Bottom Navigation Bar In Flutter

Flutter Tutorial : Bottom Navigation Bar In Flutter

Screenshot :

Flutter Tutorial : Bottom Navigation Bar In Flutter

1.main.dart

import 'package:flutter/material.dart';

import 'sphere_bottom_navigation_bar.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      debugShowMaterialGrid: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({
    Key key,
  }) : super(key: key);
  @override
  MyHomePageState createState() => MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  Color backgroudColor = Colors.white;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: backgroudColor,
      appBar: AppBar(
        backgroundColor: backgroudColor,
        title: Center(child: Text('Sphere Bottom Navigation')),
        elevation: 0,
      ),
      bottomNavigationBar: SphereBottomNavigationBar(
        defaultSelectedItem: 0,
        sheetRadius: BorderRadius.only(
            topLeft: Radius.circular(20), topRight: Radius.circular(20)),
        onItemPressed: (index) => setState(() {
              print('Selected item is - $index');
              switch (index) {
                case 0:
                  backgroudColor = Color(0xFFFFD6B2);
                  break;
                case 1:
                  backgroudColor = Color(0xFFB2F4FF);
                  break;
                case 2:
                  backgroudColor = Color(0xFFCDB2FF);
                  break;
                case 3:
                  backgroudColor = Color(0xFFFFB2D9);
                  break;
                default:
              }
            }),
        onItemLongPressed: (index) => setState(() {
              backgroudColor = Color(0xFF44D6B2);
            }),
        navigationItems: [
          BuildNavigationItem(
              tooltip: 'Home',
              itemColor: Color(0xFFFFD6B2),
              icon: Icon(Icons.home),
              selectedItemColor: Color(0xFFFFD6B2),
              title: 'Home'),
          BuildNavigationItem(
              tooltip: 'Chat',
              itemColor: Color(0xFFB2F4FF),
              icon: Icon(Icons.chat),
              selectedItemColor: Color(0xFFB2F4FF),
              title: 'Chat'),
          BuildNavigationItem(
              tooltip: 'Peoples',
              itemColor: Color(0xFFCDB2FF),
              icon: Icon(Icons.people),
              selectedItemColor: Color(0xFFCDB2FF),
              title: 'Peoples'),
          BuildNavigationItem(
              tooltip: 'Settings',
              itemColor: Color(0xFFFFB2D9),
              icon: Icon(Icons.settings),
              selectedItemColor: Color(0xFFFFB2D9),
              title: 'Settings'
          ),
        ],
      ),
      body: Container(
        color: backgroudColor,
      ),
    );
  }
}

2. sphere_bottom_navigation_bar.dart

import 'package:flutter/material.dart';

class BuildNavigationItem {
  final Icon icon;
  final Color selectedItemColor;
  final Color itemColor;
  final String tooltip;
  final String title;

  BuildNavigationItem(
      {@required this.icon,
        @required this.tooltip,
        this.selectedItemColor = Colors.blue,
        this.itemColor,
        this.title});
}

class SphereBottomNavigationBar extends StatefulWidget {
  final int defaultSelectedItem;
  final Color sheetBackgroundColor;
  final BorderRadius sheetRadius;
  final List<BuildNavigationItem> navigationItems;
  final ValueChanged<int> onItemPressed;
  final ValueChanged<int> onItemLongPressed;

  SphereBottomNavigationBar(
      {Key key,
        this.defaultSelectedItem,
        this.sheetBackgroundColor,
        this.sheetRadius,
        this.onItemLongPressed,
        @required this.navigationItems,
        @required this.onItemPressed}) {
    assert(onItemPressed != null, 'You must implement onItemPressed ');
  }

  @override
  _SphereBottomNavigationBarState createState() {
    return _SphereBottomNavigationBarState(
        items: navigationItems,
        sheetRadius: sheetRadius,
        onItemLongPressed: onItemLongPressed,
        sheetBackgroundColor: sheetBackgroundColor,
        defaultSelectedItem: defaultSelectedItem,
        onItemPressed: onItemPressed);
  }
}

class _SphereBottomNavigationBarState extends State<SphereBottomNavigationBar> {
  final int defaultSelectedItem;
  List<BuildNavigationItem> items;
  int selectedItemIndex;
  BorderRadius sheetRadius;
  var sheetHieght;
  var sheetWidth;
  Color sheetBackgroundColor;
  ValueChanged<int> onItemLongPressed;
  ValueChanged<int> onItemPressed;

  _SphereBottomNavigationBarState(
      {@required this.items,
        this.onItemLongPressed,
        this.defaultSelectedItem = 0,
        this.sheetRadius,
        this.sheetBackgroundColor,
        //this.iconSize,
        @required this.onItemPressed}) {
    selectedItemIndex = defaultSelectedItem;
    assert(items.length > 1, 'Atleast 2 item required. ');
    assert(items.length <= 5, 'You can add Maximum 5 Item');
  }

  Widget itemBuilder(BuildNavigationItem item, bool isSelected) {
    var containerHieght = ((sheetHieght + sheetWidth) / 8);
    var containerWidth = ((sheetHieght + sheetWidth) / 8);
    var tooltip =
    item.tooltip == null ? selectedItemIndex.toString() : item.tooltip;
    return Padding(
      padding: const EdgeInsets.only(left: 6, right: 6),
      child: Tooltip(
        verticalOffset: 50,
        message: '$tooltip',
        child: Column(
          children: <Widget>[
            Container(
              width: containerWidth,
              height: containerHieght,
              decoration: BoxDecoration(
                color: isSelected
                    ? item.selectedItemColor.withOpacity(1)
                    : item.itemColor.withOpacity(0.4),
                borderRadius: BorderRadius.all(Radius.circular(150)),
              ),
              child: Center(
                child: ListView(
                  shrinkWrap: true,
                  physics: NeverScrollableScrollPhysics(),
                  scrollDirection: Axis.horizontal,
                  children: <Widget>[
                    Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        IconTheme(
                          data: IconThemeData(
                              size: ((containerHieght + containerWidth) / 5),
                              color: isSelected
                                  ? Colors.white
                                  : item.itemColor == null
                                  ? Colors.white
                                  : item.itemColor),
                          child: item.icon,
                        ),
                      ],
                    ),

                  ],
                ),
              ),
            ),
            Text(item.title)
          ],
        )



      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    sheetHieght = MediaQuery.of(context).size.height / 8;
    sheetWidth = MediaQuery.of(context).size.width;
    sheetBackgroundColor = (sheetBackgroundColor == null)
        ? Theme.of(context).bottomAppBarColor
        : sheetBackgroundColor;
    return Container(
      width: sheetWidth,
      height: sheetHieght,
      color: Colors.transparent,
      child: Container(
        padding: EdgeInsets.only(top: 6),
        width: sheetWidth,
        height: sheetHieght,
        decoration: BoxDecoration(
            color: sheetBackgroundColor,
            borderRadius: sheetRadius,
            boxShadow: [BoxShadow(color: Colors.black12, blurRadius: 3)]),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: items.map((item) {
            var index = items.indexOf(item);
            return GestureDetector(
              onTap: () {
                onItemPressed(index);
                setState(() {
                  selectedItemIndex = index;
                });
              },
              onLongPress: () {
                onItemLongPressed(index);
                setState(() {
                  selectedItemIndex = index;
                });
              },
              child: itemBuilder(item, selectedItemIndex == index),
            );
          }).toList(),
        ),
      ),
    );
  }
}

For more information about Flutter. visit www.fluttertutorial.in