Question 257566 in Flutter Question posted in
The official Flutter documentation can be found here.

How to Reshape Floating Action Button And Add BottomNavBar in Flutter

enter image description here Hello Everyone! i am new In Flutter Framework i need a help from you guys. Actually I just want to design the bottom navbar with page shifting like. When use clicks on The Following tabs than the screen will change but bottom nav bar has to be fixed on the bottom. and I need same design of floating action button which is shown in This Image.

`floatingActionButtonLocation : FloatingActionButtonLocation.centerDocked,
floatingActionButton: Container(
height: 64,
width: 62,
child: FloatingActionButton(
onPressed: (){},
backgroundColor: Colors.white,
//foregroundColor: Colors.black,
elevation: 8.0,
shape: const const CircleBorder(),,
child: const ImageIcon(AssetImage(‘Assets/Images/Rupeyo-logo-icon.png’), color: Color(0XFFDF2C25), size: 39,),

      ),
    ), 
    bottomNavigationBar:  BottomAppBar(
    elevation: 0,
    color: Colors.white,
    child: Container(
      height: 30,
      child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          mainAxisSize: MainAxisSize.max,
          children: [
          Padding(padding: EdgeInsets.only(right: 0.0),
              child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
              Icon(Icons.border_all_outlined,
              color:Colors.grey),
              Text('Category', style: TextStyle(color: Colors.grey, fontSize: 10),)
              
            ],
          ),
          ),
             Padding(padding: EdgeInsets.only(right: 45.0),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Icon(Icons.favorite_border_outlined,
              color:Colors.grey  ),
              Text('WishList', style: TextStyle(color: Colors.grey, fontSize: 10),)
              
            ],
          ),
          ),
          Padding(padding: EdgeInsets.only(right: 35.0),
              child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
              Icon(Icons.local_mall_outlined,
              color:Colors.grey),
              Text('Order', style: TextStyle(color: Colors.grey, fontSize: 10),),
            ],
          ),
          ),
             Padding(padding: EdgeInsets.only(left: 0),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Icon(Icons.shopping_cart_outlined,
              color:Colors.grey),
              Text('Cart', style: TextStyle(color: Colors.grey, fontSize: 10),)
            ],
           ),
          ), 
        ],
      ),
    ),
  ),`
Tags:

2

Answers


  1. 0

    I have a simple BottomNavBar which sticks on the bottom even shifting page for your reference.

    Here HomePage(),AddActivity(),Notificationss(),ProfilePage() are the pages that slides according to navbar clicked.Be sure to design your bottomnavbar as you wish

    class _MyAppState extends State<MyApp> {
  int _selectedIndex = 0;

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

  final List<Widget> _widgetOptions = <Widget>[
    const HomePage(),
    const AddActivity(),
    const Notificationss(),
    const ProfilePage(),
  ];
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Social Event App',
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(
              seedColor: const Color.fromARGB(255, 0, 0, 0),
              primary: Colors.black,
              secondary: Colors.white),
          useMaterial3: true,
        ),
        home: Scaffold(
          body: _widgetOptions.elementAt(_selectedIndex),
          bottomNavigationBar: BottomNavigationBar(
            items: const <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                label: '',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.add_outlined),
                label: '',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.notifications),
                label: '',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.person),
                label: '',
              ),
            ],
            selectedItemColor: const Color.fromARGB(255, 0, 0, 0),
            unselectedItemColor: const Color.fromARGB(255, 146, 138, 138),
            selectedFontSize: 0,
            currentIndex: _selectedIndex,
            backgroundColor: const Color.fromARGB(255, 255, 255, 255),
            onTap: onTapImplemented,
          ),
        ));
  }
}

    Also take references from here

    Login or Signup to reply.
  2. 0

    If you want to circular shape Floating Action button you can try this code. I hope this will help you.

    floatingActionButton: Padding(
    padding: const EdgeInsets.only(top: 20),
    child: FloatingActionButton(
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
      backgroundColor: const Color(0xFF2945ED),
      child: const Icon(
        Icons.shopping_cart,
        color: Colors.white,
        size: 30,
      ),
      onPressed: () {},
    ),
  ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search