How to get Bottom Navigation Functionality with FAB in Flutter

Issue

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

Solution

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

flutter-bottomappbar-navigation-with-fab

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(title: Text('Title')),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButton:
            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(Icons.search), 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.