Floating Bottom Nav Bar and Floating Action Button in Flutter

Question

I would like to create a UI for some screens with a nav bar and FAB in flutter below: UI design for floating Nav bar And FAB

here is what I have currently:

 floatingActionButton: InkWell(
          onTap: (){
            log('Action Button Tapped');
          },
          child: Stack(
            alignment: Alignment(0,-0.2),
              children:[
                SvgPicture.asset('assets/svg/floating_button.svg'),
                SvgPicture.asset('assets/svg/floating_button_icon.svg'),
              ]),
        ),

      bottomNavigationBar: Container(
        color: Colors.transparent,
        padding: EdgeInsets.only(bottom: 30,left: 15, right: 15),
        child: ClipRRect(
          borderRadius: BorderRadius.all(Radius.circular(25)),
          child: Material(
            elevation: 100.0,
            child: Container(
              height: 55,
             color: Colors.black12.withOpacity(0.15),
             child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      SvgPicture.asset('assets/svg/colored_home_icon.svg'),
                      SizedBox(
                        height: 1.5,
                      ),
                      Text('Home', style: GoogleFonts.outfit(
                        color: AppColors.primaryGreen,
                        fontSize: AppFontSize.s12
                      ),)
                    ],
                  ),
                  Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      SvgPicture.asset('assets/svg/grey_transfer_icon.svg'),
                      SizedBox(
                        height: 1.5,
                      ),
                      Text('Transactions', style: GoogleFonts.outfit(
                          color: AppColors.homeDullText,
                          fontSize: AppFontSize.s12
                      ),)
                    ],
                  ),
                  Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      SvgPicture.asset('assets/svg/grey_more_icon.svg'),
                      SizedBox(
                        height: 1.5,
                      ),
                      Text('More', style: GoogleFonts.outfit(
                          color: AppColors.homeDullText,
                          fontSize: AppFontSize.s12
                      ),)
                    ],
                  ),
                ],
              ),
            ),
          ),
        ),
      ),

and here is the result: result of UI flutter code ,

I need help transitioning from what I currently have to the UI requirement... Thanks.

Answer 1

As fast decision you can use floating_navbar lib ( https://pub.dev/packages/floating_navbar , but if you want to made it by yourself, you can try this implementation ( https://codenameakshay.medium.com/flutter-floating-bottom-bar-how-to-4164a9981afb ).