FAB on flutter is behind other widget

Question

I tried to create a webview app with bottom appbar and FAB on flutter. here's my home.dart code

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

and here's my dashboard.dart

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

and the result is like this

the FAB should be above the webview widget, no matter where i put the FAB, it always behind the webview widget. even if i put the FAB code on top of body widget, but where did i do wrong?

Answer 1

Hey if anyone face this problem, i fix it by using webview_flutter: 0.2.0 not flutter_webview_plugin: ^0.3.10+1, and my apps works as expected like this.