flutterflutter-layoutbottom-navigation-bar

FloatingActionButton appear in the appbar instead of bottom navigation bar


I expected to see the FloatingActionButton in the middle of my bottom navigation bar. How to put the FloatingActionButton at the bottom of the screen and explain why it's now at the top of the screen?

class _BTMState extends State<BTM> {
  int currentIndex = 0;
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        bottomNavigationBar: CupertinoTabScaffold(
          tabBar: CupertinoTabBar(
            backgroundColor: Colors.white,
            activeColor: Colors.blue,
            inactiveColor: const Color.fromARGB(228, 159, 203, 240),
            iconSize: 40,
            height: 70,
            border: const Border(
                top: BorderSide(width: 1, color: Colors.grey),
                bottom: BorderSide(width: 16, color: Colors.blue)),
            currentIndex: 0,
            items: const <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                label: '',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.favorite),
                label: '',
              ),
            ],
          ),
          tabBuilder: (context, index) {
            switch (index) {
              case 0:
                return CupertinoTabView(builder: (context) {
                  return const CupertinoPageScaffold(
                    child: Categories(),
                  );
                });
              case 1:
                return CupertinoTabView(builder: (context) {
                  return const CupertinoPageScaffold(
                    child: FavPage(),
                  );
                });
              default:
                return CupertinoTabView(builder: (context) {
                  return const CupertinoPageScaffold(
                    child: HomePage(),
                  );
                });
            }
          },
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            onTabTapped(0);
          },
          tooltip: "Message",
          elevation: 4.0,
          backgroundColor: Colors.blue,
          child: const Icon(Icons.shopping_cart, color: Colors.white),
        ),
      ),
    );
  }

  void onTabTapped(int index) {
    setState(() {
      currentIndex = index;
    });
  }
}

Solution

  • Instead of using bottomNavigationBar you can use body of the Scaffold.

     child: Scaffold(
            body: CupertinoTabScaffold(
              tabBuilder: (context, index)