flutter: how to create bottom navigation bar like this

Question

I want to make a bottom navigation bar exact like this which is in photo but I can't make. Please help me.

I also want devide section between each part. please help me

Answer 1

You can custom create bottomNavigationBar using BottomAppBar.

Example:

Step 1: Create a statefull widget in this example its called MyHomePage:

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //Default is true so this can be ignore/removed
      resizeToAvoidBottomInset: true,
      appBar: AppBar(
        title: Text(widget.title),
      ),
      bottomNavigationBar: BottomAppBar(
        child: Container(
          height: 56,
          padding: EdgeInsets.all(6),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              BottomNavigationMenu(
                label: 'Home',
                isSelected: _selectedIndex == 0,
                icon: Icons.home,
                onTap: () {
                  _onItemTapped(0);
                },
              ),
              VerticalDivider(),
              BottomNavigationMenu(
                label: 'Business',
                isSelected: _selectedIndex == 1,
                icon: Icons.work,
                onTap: () {
                  _onItemTapped(1);
                },
              ),
              VerticalDivider(),
              BottomNavigationMenu(
                label: 'Map',
                isSelected: _selectedIndex == 2,
                icon: Icons.map_outlined,
                onTap: () {
                  _onItemTapped(2);
                },
              ),
              VerticalDivider(),
              BottomNavigationMenu(
                label: 'Service',
                isSelected: _selectedIndex == 3,
                icon: Icons.room_service,
                onTap: () {
                  _onItemTapped(3);
                },
              ),
              VerticalDivider(),
              BottomNavigationMenu(
                label: 'Profile',
                isSelected: _selectedIndex == 4,
                icon: Icons.account_circle,
                onTap: () {
                  _onItemTapped(4);
                },
              ),
            ],
          ),
        ),
      ),
      body: SingleChildScrollView(
        padding: EdgeInsets.all(16),
        child: Center(
          child: Text("Demo"),
        ),
      ),
    );
  }
}

Step 2: Creating custom BottomNavigationMenu item using StatelessWidget ie. BottomNavigationMenu:

class BottomNavigationMenu extends StatelessWidget {
  final Function()? onTap;
  final String label;
  final IconData icon;
  final bool isSelected;
  final Color selectedColor = Colors.green;
  final Color defaultColor = Colors.grey;

  const BottomNavigationMenu(
      {required this.icon,
      required this.label,
      required this.onTap,
      required this.isSelected});

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: InkWell(
        onTap: onTap,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(
              icon,
              color: isSelected ? selectedColor : defaultColor,
            ),
            Text(
              label,
              style: Theme.of(context).textTheme.bodyText2!.copyWith(
                    color: isSelected ? selectedColor : defaultColor,
                  ),
            )
          ],
        ),
      ),
    );
  }
}

That's it. You can customise your selected color in BottomNavigationMenu.

And this is how it looks: Custom BottomNavigationBar

Answer 2

Result

CustomNavBarItem

class BottomNavIcon extends StatelessWidget {
  final IconData iconData;
  final bool isSelected;
  final String label;

  final Function callback;

  const BottomNavIcon({
    Key? key,
    required this.iconData,
    required this.isSelected,
    required this.label,
    required this.callback,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        callback();
      },
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            padding: EdgeInsets.all(8),
            decoration: BoxDecoration(
              color: isSelected ? Colors.green.shade200 : Colors.grey.shade300,
              shape: BoxShape.circle,
            ),
            child: Icon(
              iconData,
              color: isSelected ? Colors.green.shade800 : Colors.grey.shade600,
            ),
          ),
          Text(
            label,
            style: TextStyle(
              fontSize: 12,
              color: isSelected ? Colors.green : Colors.grey,
              fontWeight: FontWeight.bold,
            ),
          )
        ],
      ),
    );
  }
}

VerticalDivider Control

 get divider => VerticalDivider(
        color: Colors.grey.shade300,
        endIndent: 4,
        indent: 4,
      );

Full Widget:

import 'package:flutter/material.dart';

class BottomNavBar extends StatefulWidget {
  BottomNavBar({Key? key}) : super(key: key);

  @override
  _BottomNavBarState createState() => _BottomNavBarState();
}

class _BottomNavBarState extends State<BottomNavBar> {
  int _selectedIndex = 0;

  get divider => VerticalDivider(
        color: Colors.grey.shade300,
        endIndent: 4,
        indent: 4,
      );
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Text("Body"),
      bottomNavigationBar: BottomAppBar(
        child: Container(
          //* for padding
          height: kBottomNavigationBarHeight + 16,
          padding: EdgeInsets.all(8),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              BottomNavIcon(
                iconData: Icons.home_filled,
                isSelected: _selectedIndex == 0,
                label: "Home".toUpperCase(),
                callback: () {
                  setState(() {
                    _selectedIndex = 0;
                  });
                },
              ),
              divider,
              BottomNavIcon(
                iconData: Icons.business_center,
                isSelected: _selectedIndex == 1,
                label: "Business".toUpperCase(),
                callback: () {
                  setState(() {
                    _selectedIndex = 1;
                  });
                },
              ),
              divider,
              BottomNavIcon(
                iconData: Icons.location_on_outlined,
                isSelected: _selectedIndex == 2,
                label: "Map".toUpperCase(),
                callback: () {
                  setState(() {
                    _selectedIndex = 2;
                  });
                },
              ),
              divider,
              BottomNavIcon(
                iconData: Icons.design_services_outlined,
                isSelected: _selectedIndex == 3,
                label: "services".toUpperCase(),
                callback: () {
                  setState(() {
                    _selectedIndex = 3;
                  });
                },
              ),
              divider,
              Container(
                child: BottomNavIcon(
                  iconData: Icons.settings,
                  isSelected: _selectedIndex == 4,
                  label: "Profile".toUpperCase(),
                  callback: () {
                    print("oncalleck  $_selectedIndex");
                    setState(() {
                      _selectedIndex = 4;
                    });
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}