How to create a bottom navbar like in the image in Flutter.

Below is the current code, but that is not enough, the notch needs to be deeper like in the picture. the notch currently is not deep enough, for your reference see the package animated_notch_bottom_bar: ^1.0.3, but don't need to animate every item in the navbar, only the search icon in the middle should be in a notch just like you can see in the image provided

class HomeScreen extends ConsumerStatefulWidget {
  const HomeScreen({super.key});

  @override
  ConsumerState<ConsumerStatefulWidget> createState() => _HomeScreenState();
}

class _HomeScreenState extends ConsumerState<HomeScreen> {
  int _selectedIndex = 2;

  static const List<Widget> _widgetOptions = <Widget>[
    Text('1 Page',
        style: TextStyle(
            fontSize: 35, fontWeight: FontWeight.bold, color: Colors.amber)),
    Text('2 Page',
        style: TextStyle(
            fontSize: 35, fontWeight: FontWeight.bold, color: Colors.amber)),
    SearchDashboard(),
    Text('3 Page',
        style: TextStyle(
            fontSize: 35, fontWeight: FontWeight.bold, color: Colors.amber)),
    Text('4 Page',
        style: TextStyle(
            fontSize: 35, fontWeight: FontWeight.bold, color: Colors.amber)),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      floatingActionButton: SizedBox(
        width: 52,
        height: 52,
        child: FloatingActionButton(
          isExtended: true,
          onPressed: () {
            _onItemTapped(2);
          },
          child: SvgPicture.asset(
            AssetPaths.home_search,
          ),
          backgroundColor: context.color.primary.cyan500,
          shape: CircleBorder(),
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        height: 86,
        surfaceTintColor: context.color.grayScale.grey11,
        notchMargin: 8,
        color: context.color.grayScale.grey11,
        shape: const CircularNotchedRectangle(),
        clipBehavior: Clip.antiAlias,
        child: Container(
          color: Colors.transparent,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              _buildNavItem(0, AssetPaths.home2, 'My Gyms'),
              _buildNavItem(1, AssetPaths.scanner, 'NFC check'),
              SizedBox(
                width: 50,
              ),
              _buildNavItem(3, AssetPaths.support, 'Support'),
              _buildNavItem(4, AssetPaths.profile, 'Profile'),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildNavItem(int index, String icon, String label) {
    return GestureDetector(
      onTap: () => _onItemTapped(index),
      child: SizedBox(
        width: 60,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Padding(
              padding: const EdgeInsets.only(bottom: 2),
              child: SvgPicture.asset(
                icon,
                color: _selectedIndex == index
                    ? context.color.grayScale.grey01
                    : context.color.grayScale.grey07,
              ),
            ),
            Text(
              label,
              style: context.textTheme.cap5.copyWith(
                  color: _selectedIndex == index
                      ? context.color.grayScale.grey01
                      : context.color.grayScale.grey07),
            ),
          ],
        ),
      ),
    );
  }
}

How to create a bottom navbar like in the image in Flutter.

Below is the current code, but that is not enough, the notch needs to be deeper like in the picture. the notch currently is not deep enough, for your reference see the package animated_notch_bottom_bar: ^1.0.3, but don't need to animate every item in the navbar, only the search icon in the middle should be in a notch just like you can see in the image provided

class HomeScreen extends ConsumerStatefulWidget {
  const HomeScreen({super.key});

  @override
  ConsumerState<ConsumerStatefulWidget> createState() => _HomeScreenState();
}

class _HomeScreenState extends ConsumerState<HomeScreen> {
  int _selectedIndex = 2;

  static const List<Widget> _widgetOptions = <Widget>[
    Text('1 Page',
        style: TextStyle(
            fontSize: 35, fontWeight: FontWeight.bold, color: Colors.amber)),
    Text('2 Page',
        style: TextStyle(
            fontSize: 35, fontWeight: FontWeight.bold, color: Colors.amber)),
    SearchDashboard(),
    Text('3 Page',
        style: TextStyle(
            fontSize: 35, fontWeight: FontWeight.bold, color: Colors.amber)),
    Text('4 Page',
        style: TextStyle(
            fontSize: 35, fontWeight: FontWeight.bold, color: Colors.amber)),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      floatingActionButton: SizedBox(
        width: 52,
        height: 52,
        child: FloatingActionButton(
          isExtended: true,
          onPressed: () {
            _onItemTapped(2);
          },
          child: SvgPicture.asset(
            AssetPaths.home_search,
          ),
          backgroundColor: context.color.primary.cyan500,
          shape: CircleBorder(),
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        height: 86,
        surfaceTintColor: context.color.grayScale.grey11,
        notchMargin: 8,
        color: context.color.grayScale.grey11,
        shape: const CircularNotchedRectangle(),
        clipBehavior: Clip.antiAlias,
        child: Container(
          color: Colors.transparent,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              _buildNavItem(0, AssetPaths.home2, 'My Gyms'),
              _buildNavItem(1, AssetPaths.scanner, 'NFC check'),
              SizedBox(
                width: 50,
              ),
              _buildNavItem(3, AssetPaths.support, 'Support'),
              _buildNavItem(4, AssetPaths.profile, 'Profile'),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildNavItem(int index, String icon, String label) {
    return GestureDetector(
      onTap: () => _onItemTapped(index),
      child: SizedBox(
        width: 60,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Padding(
              padding: const EdgeInsets.only(bottom: 2),
              child: SvgPicture.asset(
                icon,
                color: _selectedIndex == index
                    ? context.color.grayScale.grey01
                    : context.color.grayScale.grey07,
              ),
            ),
            Text(
              label,
              style: context.textTheme.cap5.copyWith(
                  color: _selectedIndex == index
                      ? context.color.grayScale.grey01
                      : context.color.grayScale.grey07),
            ),
          ],
        ),
      ),
    );
  }
}

• flutter
• dart

Share Improve this question Follow edited Mar 22 at 23:33 ankushlokhande 1,9341111 silver badges3131 bronze badges asked Mar 20 at 11:47 Abhijith K SabuAbhijith K Sabu 111 bronze badge

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

You can go with animated_bottom_navigation_bar package to achieve your design.

Here is the package link: animated_bottom_navigation_bar

Here is the code to achieve expected result:

@override
Widget build(BuildContext context) {
  return Scaffold(
    floatingActionButton: ClipRRect(
      borderRadius: BorderRadius.circular(100),
      child: FloatingActionButton(
        backgroundColor: AppColors.black,
        child: const Icon(Icons.music_note_outlined),
        onPressed: () {},
      ),
    ),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    bottomNavigationBar: AnimatedBottomNavigationBar(
      icons: const [
        Icons.abc,
        Icons.baby_changing_station,
      ],
      activeIndex: _bottomNavIndex,
      gapLocation: GapLocation.center,
      notchSmoothness: NotchSmoothness.softEdge,
      onTap: (index) => setState(() => _bottomNavIndex = index),
      // other params
    ),
  );
}

Here is the output:

Now, You can change according to your design.