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.

score 0 · Accepted Answer · answered Jun 29 '20 at 06:46

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'),
          ],
        ),
      ),
    );
  }
}

I already understand this method, I was looking for the floating button bar without page navigation — , Jun 29 '20 at 06:48
You can directly use it . you do not need put any page navigate in it. — chunhunghan, Jun 29 '20 at 06:49
how we reduce the width of bar. For eg- if we have only two tabs then width will cover the entire screen but i need to be place bar in centre with two tabs. I'm not able to reduce the width of bar. Could you please help me regarding this ? — Mallikarjun Hampannavar, May 20 '21 at 06:58

how to create floating button bar in flutter?

1 Answers1