Bottom Navigation Bar In Flutter

Bottom Navigation Bar In Flutter :

Screenshot :

Bottom Navigation Bar In Flutter

bottom_navigation_bar.dart

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

import 'bottom_navigation_bar_item.dart';
import 'custom_colors.dart';

// Bottom navigation bar of the application.
class AppBottomNavigationBar extends StatefulWidget {
  final List<AppBottomNavigationBarItem> items;

  // Callback on what to do when another tab has been selected.
  final ValueChanged<int> onItemSelected;

  // Height of the bar.
  final double height;

  // Size of the icons.
  final double iconSize;

  // Background color of the bar.
  final Color backgroundColor;

  // Text color of the bar items.
  final Color color;

  // Text color of selected bar items.
  final Color selectedColor;

  // Notch shape in the bar.
  final NotchedShape shape;

  // Index of the initially selected item.
  final int selectedItemIndex;

  // Create app navigation bar.
  AppBottomNavigationBar({
    @required this.items,
    @required this.onItemSelected,
    this.height = 50.0,
    this.iconSize = 25.0,
    this.backgroundColor = Colors.white,
    this.color = Colors.black54,
    this.selectedColor = CustomColors.lightCoral,
    this.shape,
    this.selectedItemIndex = 0,
  });

  @override
  State<StatefulWidget> createState() => _AppBottomNavigationBarState();
}

// State of the applications bottom navigation bar.
class _AppBottomNavigationBarState extends State<AppBottomNavigationBar> {
  @override
  void initState() {
    super.initState();
  }

  // Change the currently selected item.
  void _changeSelectedItem(int index) {
    widget.onItemSelected(index);
  }

  @override
  Widget build(BuildContext context) {
    List<Widget> items = List.generate(
        widget.items.length,
        (int index) => _buildItem(
              item: widget.items[index],
              index: index,
              onPressed: _changeSelectedItem,
            ));

    return BottomAppBar(
      shape: widget.shape,
      color: widget.backgroundColor,
      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: items,
      ),
    );
  }

  // Build the navigation item widget on the navigation bar.
  Widget _buildItem({
    AppBottomNavigationBarItem item,
    int index,
    ValueChanged<int> onPressed,
  }) {
    Color color =
        widget.selectedItemIndex == index ? widget.selectedColor : widget.color;

    return Expanded(
        child: SizedBox(
            height: widget.height,
            child: Material(
                type: MaterialType.transparency,
                child: InkWell(
                    onTap: () => onPressed(index),
                    child: Column(
                        mainAxisSize: MainAxisSize.min,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Icon(item.iconData,
                              color: color, size: widget.iconSize),
                          Text(
                            item.title,
                            style: TextStyle(
                              color: color,
                            ),
                            textScaleFactor: 0.7,
                          )
                        ])))));
  }
}

bottom_navigation_bar_item.dart

import 'package:flutter/widgets.dart';

// Item shown in the app bottom navigation bar.
class AppBottomNavigationBarItem {
  // Icon to show.
  final IconData iconData;

  // Title of the item.
  final String title;

  // Create item.
  const AppBottomNavigationBarItem({@required this.iconData, @required this.title});
}

custom_colors.dart

import 'dart:ui' show Color;

import 'package:flutter/material.dart';

// Some custom colors not being found in the flutter Colors class.
class CustomColors {
  static const Color slateGrey = Color(0xFF708090);
  static const Color lightCoral = Colors.blue;
  static const Color lightGray = Color(0xFFF9F9F9);
}

ui_util.dart

import 'package:flutter/material.dart';

// Utility class for easily getting default widgets.
class UIUtil {
  // Get the application default sliver app bar.
  static SliverAppBar getSliverAppBar({
    @required String title,
    List<Widget> actions,
    Widget leading,
    bool snap = true,
    bool pinned = false,
    bool floating = true,
  }) =>
      SliverAppBar(
        title: Text(
          title,
          style: TextStyle(color: Colors.black),
        ),
        centerTitle: true,
        backgroundColor: Colors.white,
        snap: snap,
        floating: floating,
        actions: actions,
        leading: leading,
        pinned: pinned,
      );

  // Get the application default scaffold.
  static Scaffold getScaffold({
    @required Widget body,
    Widget bottomNavigationBar,
    Widget floatingActionButton,
  }) =>
      Scaffold(
        appBar: AppBar(title: Text('Bottom Navigation')),
        body: body,
        backgroundColor: Colors.white,
        bottomNavigationBar: bottomNavigationBar,
        floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
        floatingActionButton: floatingActionButton,
      );
}

main.dart

import 'package:flutter/material.dart';

import 'bottom_navigation_bar.dart';
import 'bottom_navigation_bar_item.dart';
import 'custom_colors.dart';
import 'ui_util.dart';

void main() => runApp(MyApp(viewIndex: 0));

class MyApp extends StatefulWidget {
  /// Index of the initially selected view.
  final int viewIndex;

  /// Create view holder holding the apps views.
  MyApp({
    Key key,
    @required this.viewIndex,
  }) : super(key: key);

  @override
  State<StatefulWidget> createState() => _ViewHolderState();
}

/// State of the app view holder.
class _ViewHolderState extends State<MyApp> {
  // Controller of the view holder used to exchange views.
  PageController _controller;

  // Index of the currently shown. page.
  int _currentViewIndex = 0;

  @override
  void initState() {
    super.initState();

    _currentViewIndex = widget.viewIndex;
    _controller = PageController(initialPage: widget.viewIndex);
  }

  // What to do in case another item in the bottom navigation bar has been selected.
  void _selectPage(int index) {
    _controller.animateToPage(
      index,
      duration: Duration(milliseconds: 200),
      curve: Curves.ease,
    );

    /// Let the widget rebuild.
    setState(() {
      _currentViewIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: UIUtil.getScaffold(
            body: PageView(
                controller: _controller,
                children: _getBottomNavigationBarViews(),
                onPageChanged: (pageIndex) {
                  setState(() {
                    _currentViewIndex = pageIndex;
                  });
                }),
            bottomNavigationBar: AppBottomNavigationBar(
              items: [
                AppBottomNavigationBarItem(
                    iconData: Icons.announcement, title: 'Home'),
                AppBottomNavigationBarItem(
                    iconData: Icons.timeline, title: 'Category'),
                AppBottomNavigationBarItem(
                    iconData: Icons.menu, title: 'Setting')
              ],
              selectedItemIndex: _currentViewIndex,
              onItemSelected: _selectPage,
              shape: CircularNotchedRectangle(),
            ),
            floatingActionButton: _getFloatingActionButton(_currentViewIndex)));
  }

  // Get all views visible in the bottom navigation bar.
  List<Widget> _getBottomNavigationBarViews() => [
        Container(child: Center(child: Text('Home'))),
        Container(child: Center(child: Text('Category'))),
        Container(child: Center(child: Text('Setting'))),
      ];

  // Get the floating action button for the passed view index.
  Widget _getFloatingActionButton(int index) {
    switch (index) {
      case 1: // Week plan view
        return FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.add),
          backgroundColor: CustomColors.slateGrey,
        );

      default:
        return null;
    }
  }
}

The flutter tutorial  is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application

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