Custom Navigationbar In Flutter

Custom Navigationbar In Flutter :

Here is the flutter tutorial of custom navigationbar in flutter

Screenshot :

Custom Navigationbar In Flutter

custom_navigation_bar_item.dart

import 'package:flutter/material.dart';

class CustomNavigationBarItem {
  /// Create a Custom Navigationbar Item.
  ///
  /// the [selectedIcon] must not be null.
  const CustomNavigationBarItem({
    @required this.icon,
    IconData selectedIcon,
    this.selectedTitle,
    this.unSelectedTitle,
  }) : selectedIcon = selectedIcon ?? icon;

  ///
  /// The icon of the item
  /// Typically the icon is an [Icon].
  ///
  final IconData icon;

  /// An alternative icon displayed when this bottom navigation item is
  /// selected.
  ///
  /// If this icon is not provided, the bottom navigation bar will display
  /// [icon] in either state.
  final IconData selectedIcon;

  ///
  /// The title string when item is selected.
  ///
  /// Item will only show [icon] when [selectedTitle] is null.
  final String selectedTitle;

  ///
  /// The title string when item is unselected.
  ///
  /// Item will only show [icon] when [unSelectedTitle] is null.
  final String unSelectedTitle;
}

custome_navigation_bar.dart

import 'package:flutter/material.dart';
import 'custom_navigation_bar_item.dart';
import 'default_style.dart';
import 'dart:math' as math;

class CustomNavigationBar extends StatefulWidget {
  const CustomNavigationBar({
    Key key,
    @required this.items,
    this.height,
    this.selectedColor,
    this.unSelectedColor,
    this.onTap,
    this.currentIndex = 0,
    this.iconSize = 24.0,
    this.backgroundColor = Colors.white,
    this.strokeColor = Colors.blueAccent,
    this.bubbleCurve = Curves.linear,
    this.scaleCurve = Curves.linear,
  })  : assert(items != null),
        super(key: key);

  ///
  /// height of the [CustomNavigationBar].
  ///
  /// use [defaultHeight] in [DefaultCustomNavigationBarStyle] when height is null.
  ///
  final double height;

  ///
  /// Item data in [CustomNavigationBarItem]
  ///
  final List<CustomNavigationBarItem> items;

  ///
  /// [Color] when [CustomNavigationBarItem] is selected.
  ///
  /// default color is [blueAccent].
  final Color selectedColor;

  ///
  /// [Color] when [CustomNavigationBarItem] is not selected.
  ///
  /// default color is [grey[600]].
  final Color unSelectedColor;

  ///
  /// callback function when item tapped
  ///
  final Function(int) onTap;

  ///
  /// current index of navigation bar.
  ///
  final int currentIndex;

  ///
  /// size of icon.
  /// also represent the max radius of bubble effect animation.
  final double iconSize;

  ///
  /// Background color of [CustomNavigationBar]
  ///
  final Color backgroundColor;

  ///
  /// stroke color.
  /// default is [Colors.blueAccent].
  final Color strokeColor;

  ///
  /// animation curve of bubble effect
  ///
  final Curve bubbleCurve;

  ///
  /// animation curve of scale effect
  ///
  final Curve scaleCurve;

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

class _CustomNavigationBarState extends State<CustomNavigationBar>
    with TickerProviderStateMixin {
  List<double> _radiuses;
  List<double> _sizes;
  AnimationController _controller;
  AnimationController _scaleController;

  double _bubbleRadius = 0.0;
  double _maxRadius;

  @override
  void initState() {
    super.initState();
    _bubbleRadius = 0.0;
    _radiuses = List<double>.generate(widget.items.length, (index) {
      return _bubbleRadius;
    });

    _sizes = List<double>.generate(widget.items.length, (index) {
      return 0.0;
    });
    _maxRadius = widget.iconSize;
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  void didUpdateWidget(CustomNavigationBar oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.currentIndex != oldWidget.currentIndex) {
      _startAnimation(widget.currentIndex);
      _startScale(widget.currentIndex);
    }
  }

  void _startAnimation(int index) {
    _controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 300),
    );
    CurvedAnimation _curvedAnimation = CurvedAnimation(
      parent: _controller,
      curve: widget.bubbleCurve,
    );
    Tween<double>(begin: 0.0, end: 1.0).animate(_curvedAnimation)
      ..addListener(() {
        setState(() {
          _radiuses[index] = _maxRadius * _curvedAnimation.value;
        });
      });
    _controller.forward();
  }

  void _startScale(int index) {
    _scaleController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 400),
    )..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          _scaleController.reverse();
        }
      });
    CurvedAnimation _scaleAnimation = CurvedAnimation(
      parent: _scaleController,
      curve: widget.scaleCurve,
      reverseCurve: widget.scaleCurve.flipped,
    );

    Tween<double>(begin: 0.0, end: 1.0).animate(_scaleAnimation)
      ..addListener(() {
        setState(() {
          _sizes[index] = _scaleAnimation.value * 0.2;
        });
      });
    _scaleController.forward();
  }

  @override
  Widget build(BuildContext context) {
    final double additionalBottomPadding =
        math.max(MediaQuery.of(context).padding.bottom, 0.0);

    return Container(
        color: widget.backgroundColor,
        height: widget.height ??
            DefaultCustomNavigationBarStyle.defaultHeight +
                additionalBottomPadding,
        child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              for (var i = 0; i < widget.items.length; i++)
                _CustomNavigationBarTile(
                    iconSize: widget.iconSize,
                    scale: _sizes[i],
                    onPressed: () {
                      widget.onTap(i);
                    },
                    selected: i == widget.currentIndex,
                    item: widget.items[i],
                    selectedColor: widget.selectedColor ??
                        DefaultCustomNavigationBarStyle.defaultColor,
                    unSelectedColor: widget.unSelectedColor ??
                        DefaultCustomNavigationBarStyle.defaultUnselectedColor)
            ]));
  }
}

class _CustomNavigationBarTile extends StatelessWidget {
  const _CustomNavigationBarTile({
    Key key,
    this.onPressed,
    this.selected,
    this.item,
    this.selectedColor,
    this.unSelectedColor,
    this.scale = 1.0,
    this.iconSize,
  }) : super(key: key);

  final VoidCallback onPressed;

  final bool selected;

  final CustomNavigationBarItem item;

  final Color selectedColor;

  final Color unSelectedColor;

  final double scale;

  final double iconSize;

  @override
  Widget build(BuildContext context) {
    return Transform.scale(
        scale: 1.0 + scale,
        child: GestureDetector(
            child: Icon(item.icon,
                color: selected ? selectedColor : unSelectedColor,
                size: iconSize),
            onTap: onPressed));
  }
}

default_style.dart

import 'package:flutter/material.dart';

class DefaultCustomNavigationBarStyle {
  static final defaultHeight = kBottomNavigationBarHeight;
  static final defaultColor = Colors.blueAccent;
  static final defaultUnselectedColor = Colors.grey[600];
}

main.dart

import 'package:flutter/material.dart';
import 'custom_navigation_bar_item.dart';
import 'custome_navigation_bar.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Turorial',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Tab Animation'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    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:',
            ),
          ],
        ),
      ),
      bottomNavigationBar: CustomNavigationBar(
        iconSize: 30.0,
        selectedColor: Colors.white,
        strokeColor: Colors.white,
        unSelectedColor: Color(0xff6c788a),
        backgroundColor: Color(0xff040307),
        items: [
          CustomNavigationBarItem(
            icon: Icons.home,
          ),
          CustomNavigationBarItem(
            icon: Icons.shopping_cart,
          ),
          CustomNavigationBarItem(
            icon: Icons.lightbulb_outline,
          ),
          CustomNavigationBarItem(
            icon: Icons.search,
          ),
          CustomNavigationBarItem(
            icon: Icons.account_circle,
          ),
        ],
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

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