how to create floating button bar in flutter?

Question

I want to create a floating button bar in flutter similar to the floating bottom bar as shown in the image shared

the above image is from dependency https://pub.dev/packages/floating_bottom_navigation_bar , this is for the page navigation , but I don't want navigation just want the action to be performed upon pressing the button, and the view should be the same.

Answer 1

You can copy paste run full code below
You do not need to put page navigation logic in it and view will be the same
You can directly check onTap to know which button user click

bottomNavigationBar: FloatingNavbar(
          onTap: (int val) {
            switch (val) {
              case 0:
                {
                  action = "Home";
                }
                break;

working demo

full code

import 'package:floating_bottom_navigation_bar/floating_bottom_navigation_bar.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  // This widget is the root of your application.
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _index = 0;
  String action = "Home";

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Floating NavBar Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Floating NavBar Example'),
          centerTitle: true,
        ),
        //If you want to show body behind the navbar, it should be true
        extendBody: true,
        body: Center(
          child: Column(
            children: [
              Text(
                "index: $_index",
                style: TextStyle(
                  fontSize: 52,
                ),
              ),
              Text("$action"),
            ],
          ),
        ),
        bottomNavigationBar: FloatingNavbar(
          onTap: (int val) {
            switch (val) {
              case 0:
                {
                  action = "Home";
                }
                break;

              case 1:
                {
                  action = "Explore"; //statements;
                }
                break;
              case 2:
                {
                  action = "Chats"; //statements;
                }
                break;
              case 3:
                {
                  action = "Settings"; //statements;
                }
                break;
              default:
                {
                  //statements;
                }
                break;
            }

            setState(() => _index = val);
          },
          currentIndex: _index,
          items: [
            FloatingNavbarItem(icon: Icons.home, title: 'Home'),
            FloatingNavbarItem(icon: Icons.explore, title: 'Explore'),
            FloatingNavbarItem(icon: Icons.chat_bubble_outline, title: 'Chats'),
            FloatingNavbarItem(icon: Icons.settings, title: 'Settings'),
          ],
        ),
      ),
    );
  }
}