How to Reshape Floating Action Button And Add BottomNavBar in Flutter

Question

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),)
                ],
               ),
              ), 
            ],
          ),
        ),
      ),

Answer 1

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

Answer 2

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: () {},
    ),
  ),