android - flutter 中的FAB在其他小部件后面

标签 android flutter dart

我试图用底部的应用栏和FAB创建一个webview应用。这是我的home.dart代码

class _HomeState extends State<Home> {
  // Properties & Variables needed

  int currentTab = 0; // to keep track of active tab index
  final List<Widget> screens = [
    Dashboard(),
    Profile(),
  ]; // to store nested tabs
  final PageStorageBucket bucket = PageStorageBucket();
  Widget currentScreen = Dashboard(); // Our first view in viewport

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: Icon(
          Icons.home,
          color: currentTab == 0 ? Colors.white : Colors.black26,
        ),
        onPressed: () {
          setState(() {
            currentScreen =
                Dashboard(); // if user taps on this dashboard tab will be active
            currentTab = 0;
          });
        },
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        shape: CircularNotchedRectangle(),
        notchMargin: 10,
        child: Container(
          height: 60,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  MaterialButton(
                    minWidth: 40,
                    onPressed: () {
                      setState(() {
                        currentScreen =
                            Chat(); // if user taps on this dashboard tab will be active
                        currentTab = 1;
                      });
                    },
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Icon(
                          Icons.chat_bubble,
                          color: currentTab == 1 ? Colors.orange : Colors.black26,
                        ),
                        Text(
                          'Chats',
                          style: TextStyle(
                            color:
                                currentTab == 1 ? Colors.orange : Colors.black26,
                          ),
                        ),
                      ],
                    ),
                  )
                ],
              ),

              // Right Tab bar icons

              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  MaterialButton(
                    minWidth: 40,
                    onPressed: () {
                      setState(() {
                        currentScreen =
                            Profile(); // if user taps on this dashboard tab will be active
                        currentTab = 2;
                      });
                    },
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Icon(
                          Icons.branding_watermark,
                          color: currentTab == 2 ? Colors.orange : Colors.black26,
                        ),
                        Text(
                          'Profile',
                          style: TextStyle(
                            color:
                                currentTab == 2 ? Colors.orange : Colors.black26,
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              )
            ],
          ),
        ),
      ),
      body: PageStorage(
        child: currentScreen,
        bucket: bucket,
      ),
    );
  }
}

这是我的仪表板
class _DashboardState extends State<Dashboard> {
  @override
  Widget build(BuildContext context) {
    return WebviewScaffold(
      url: 'https://google.com',
    );
  }
}

结果是这样的

Webview

FAB应该位于webview小部件上方,无论我将FAB放在何处,它始终位于webview小部件之后。即使我将FAB代码放在主体窗口小部件上,但我在哪里做错了?

最佳答案

嘿,如果有人遇到此问题,我可以通过使用webview_flutter:0.2.0而不是flutter_webview_plugin:^ 0.3.10 + 1来解决它,并且我的应用程序可以像这样正常工作。

enter image description here

关于android - flutter 中的FAB在其他小部件后面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60086465/

相关文章:

android - Unity 要求我定位我的 Android SDK

android - 来自 ActivityGroup 的子 Activity 仅 "sometimes"调用 onBackPressed()

android - 在 Flutter 中合并/合并两个 InputDecoration 实例

android - Flutter 中 ListView.builder 中的反向列表

flutter - 如何在Flutter中验证ExpansionTile中的TextFormField?

flutter - 如何在 flutter 行小部件中绘制水平线?

flutter - 无法建立Flutter APK以发布

android - NestedScrollView 无法使用 match_parent 高度子项滚动

java - R.java 文件中的语法错误

android - Flutter如何打开SD卡目录选择文件?