Flutter — Floating Bottom NavBar

I’ve struggled a bit trying to find a clean code to build a nice roundish floating navbar until I came with a simple solution which I believe that works fine. I’d like to share the result and code below.

BottomNavBar Widget Code

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

class BottomNavBar extends StatefulWidget {
  @override
  _BottomNavBarState createState() => _BottomNavBarState();
}

class _BottomNavBarState extends State<BottomNavBar> {
  int currentIndex;

  @override
  void initState() {
    this.currentIndex = 0;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {

    return Padding(
        padding: const EdgeInsets.all(8.0),
      child: ClipRRect(
        borderRadius: BorderRadius.all(Radius.circular(40)),
        child: BottomNavigationBar(
          currentIndex: this.currentIndex,
          backgroundColor: Colors.transparent,
          type: BottomNavigationBarType.shifting,
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.directions_car),
              label: 'Page 0',
              backgroundColor: Colors.grey[700],
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.directions_car),
              label: 'Page 1',
              backgroundColor: Colors.grey[700],
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.directions_car),
              label: 'Page 2',
              backgroundColor: Colors.grey[800],
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.directions_car),
              label: 'Page 3',
              backgroundColor: Colors.grey[900],
            ),
          ],
          onTap: (index) {
            setState((){
              this.currentIndex = index;
            });
          },
        ),
      ),
    );
  }
}

Using Widget In Scaffold

return Scaffold(
  appBar: AppBar(
    title: Text(widget.title),
  ),
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          'You have pushed the button this many times:',
        ),
        Text(
          '$_counter',
          style: Theme.of(context).textTheme.headline4,
        ),
      ],
    ),
  ),
  bottomNavigationBar: BottomNavBar(),
  floatingActionButton: FloatingActionButton(
    onPressed: _incrementCounter,
    tooltip: 'Increment',
    child: Icon(Icons.add),
  ), // This trailing comma makes auto-formatting nicer for build methods.
);

That’s it! Hope it helps :)