颤振中的FAB在其他小部件后面

时间:2020-02-06 01:27:40

标签: 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,
      ),
    );
  }
}

这是我的仪表板。dart

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

结果是这样的

Webview

FAB应该位于webview小部件上方,无论我将FAB放在哪里,它都始终位于webview小部件之后。即使我将FAB代码放在body小部件顶部,但我在哪里做错了?

1 个答案:

答案 0 :(得分:1)

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

enter image description here