How to make this type of bottom navigation bar in flutter?

Question

Flutter bottom navigation bar

I need to make this type of bottom navigation bar in flutter, where the selected item will be highlighted just like the home button. Can anyone please help?

Answer 1

Use this plugin

and put this code inside your scaffold widget.

bottomNavigationBar: CurvedNavigationBar(
  backgroundColor: Colors.blueAccent,
  items: <Widget>[
    Icon(Icons.add, size: 30),
    Icon(Icons.list, size: 30),
    Icon(Icons.compare_arrows, size: 30),
  ],
  onTap: (index) {
    setState(() {
      _page = index;
    });
  },
),

and if you want to Change the page programmatically (like a button that navigates you to another page).

add these variables,

int _page = 0;
GlobalKey<CurvedNavigationBarState> _bottomNavigationKey = GlobalKey();

then add this put this property inside the button that will navigate to another page

ElevatedButton(
  child: Text('Your Button'),
  onPressed: () {
    final CurvedNavigationBarState? navBarState =
      _bottomNavigationKey.currentState;
    navBarState?.setPage(1);//this will navigate to page at index 1
  },
)

your code should look like this

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

void main() {
  runApp(Home());
}

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  GlobalKey<CurvedNavigationBarState> _bottomNavigationKey = GlobalKey();
  int _page = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: CurvedNavigationBar(
        key: _bottomNavigationKey,
        items: <Widget>[
          Icon(Icons.add, size: 30),
          Icon(Icons.list, size: 30),
          Icon(Icons.compare_arrows, size: 30),
        ],
        onTap: (index) {
          setState(() {
            _page = index;
          });
        },
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Your Button'),
          onPressed: () {
            final CurvedNavigationBarState? navBarState =
                _bottomNavigationKey.currentState;
            navBarState?.setPage(1);
          },
        ),
      )
    );
  }
}

For more info check the plugin's page