How to get Bottom Navigation Functionality with FAB in Flutter


I have this design where when we open the app, it first goes to the Home Screen by default and I have two Bottom Navigation Bar Items.

I am unable to get it working because I want it to behave how Bottom Navigation Bar works but I want default screen to be the home. And when you click on Cart or Profile, it should highlight that tab but when you click on home, it should remove highlighting from it.

Desired Outcome


Here is a simple workaround or try search for bottomnavigation packages

check this persistent_bottom_nav_bar pacakge it allows to show bottom navigation in all pages with navigator,In other packages you have to do it yourself all the things.

if you want use persistent_bottom_nav_bar check this example for persistent_bottom_nav_bar

Top 16 Flutter Navigation Libraries


import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(title: Text('Title')),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
            FloatingActionButton(child: Icon(Icons.add), onPressed: () {}),
        bottomNavigationBar: BottomAppBar(
            shape: CircularNotchedRectangle(),
            child: Container(
              height: 56,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  IconButton(icon: Icon(Icons.home), onPressed: () {}),
                  IconButton(icon: Icon(, onPressed: () {}),
                  SizedBox(width: 40), // The dummy child
                  IconButton(icon: Icon(Icons.notifications), onPressed: () {}),
                  IconButton(icon: Icon(Icons.message), onPressed: () {}),

Answered By – Abhijith

Answer Checked By – Mary Flores (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.