Naviagtion Bar – Bottom Bar Custom In Flutter

Naviagtion Bar – Bottom Bar Custom In Flutter :

This flutter tutorial post is how to create bottom navigation bar custom and select tab show the text and icon change color.

Screenshot :

Naviagtion Bar - Bottom Bar Custom In Flutter

main.dart

import 'package:flutter/material.dart';

import 'bottom_bar.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Tutorial',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: BottomBarPage(),
    );
  }
}

test_page.dart

import 'package:flutter/material.dart';

class TestPage extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<TestPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flutter Tab Bar')),
      body: Container(child: Text('Flutter Tutorial')),
    );
  }
}

bottom_bar.dart

import 'package:flutter/material.dart';

import 'test_page.dart';

class NavigationIconView {
  NavigationIconView({
    this.activeIcon,
    this.icon,
    this.titleBuilder,
    this.contentBuilder,
    TickerProvider vsync,
  })  : _icon = icon,
        controller = AnimationController(
          duration: kThemeAnimationDuration,
          vsync: vsync,
        ) {
    _animation = controller.drive(CurveTween(
      curve: const Interval(0.0, 0.0, curve: Curves.fastOutSlowIn),
    ));
  }

  final Widget icon;
  final Widget activeIcon;
  final Widget _icon;
  final AnimationController controller;
  final WidgetBuilder titleBuilder;
  final WidgetBuilder contentBuilder;
  Animation<double> _animation;

  FadeTransition transition(BuildContext context) {
    return FadeTransition(
      opacity: _animation,
      child: SlideTransition(
          position: _animation.drive(
            Tween<Offset>(
              begin: const Offset(0.0, 0.00), // Slightly down.
              end: Offset.zero,
            ),
          ),
          child: contentBuilder(context)),
    );
  }
}

class CustomIcon extends StatelessWidget {
  CustomIcon({this.icon});

  IconData icon;

  @override
  Widget build(BuildContext context) {
    final IconThemeData iconTheme = IconTheme.of(context);
    return Icon(
      icon,
      color: Theme.of(context).primaryColor,
    );
  }
}

class CustomIconInactive extends StatelessWidget {
  CustomIconInactive({this.icon});

  IconData icon;

  @override
  Widget build(BuildContext context) {
    return Icon(
      icon,
      color: Colors.black26,
    );
  }
}

class BottomBarPage extends StatefulWidget {
  @override
  _BottomBarState createState() => _BottomBarState();
}

class _BottomBarState extends State<BottomBarPage> with TickerProviderStateMixin {
  int _currentIndex = 0;

  List<NavigationIconView> _navigationViews;

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

    _navigationViews = <NavigationIconView>[
      NavigationIconView(
        activeIcon: CustomIcon(icon: Icons.home),
        icon: CustomIconInactive(icon: Icons.home),
        titleBuilder: (context) => Text(
              'Java',
              style: TextStyle(color: Theme.of(context).primaryColor),
            ),
        contentBuilder: (context) => TestPage(),
        vsync: this,
      ),
      NavigationIconView(
        activeIcon: CustomIcon(icon: Icons.person),
        icon: CustomIconInactive(icon: Icons.person),
        titleBuilder: (context) => Text(
              'Flutter',
              style: TextStyle(color: Theme.of(context).primaryColor),
            ),
        contentBuilder: (context) => TestPage(),
        vsync: this,
      ),
      NavigationIconView(
        activeIcon: CustomIcon(icon: Icons.group),
        icon: CustomIconInactive(icon: Icons.group),
        titleBuilder: (context) => Text(
              'Android',
              style: TextStyle(color: Theme.of(context).primaryColor),
            ),
        contentBuilder: (context) => TestPage(),
        vsync: this,
      ),
      NavigationIconView(
        activeIcon: CustomIcon(icon: Icons.star),
        icon: CustomIconInactive(icon: Icons.star),
        titleBuilder: (context) => Text(
              'Challenges',
              style: TextStyle(color: Theme.of(context).primaryColor),
            ),
        contentBuilder: (context) => TestPage(),
        vsync: this,
      ),
    ];

    _navigationViews[_currentIndex].controller.value = 1.0;

    setCurrentPage(0);
  }

  @override
  Widget build(BuildContext context) {
    final BottomNavigationBar botNavBar = BottomNavigationBar(
        items: _navigationViews
            .map<BottomNavigationBarItem>((NavigationIconView navigationView) {
          return BottomNavigationBarItem(
            activeIcon: navigationView.activeIcon,
            icon: navigationView.icon,
            title: navigationView.titleBuilder(context),
          );
        }).toList(),
        currentIndex: _currentIndex,
        //iconSize: 4.0,
        onTap: setCurrentPage);

    return Scaffold(
      body: Center(
        child: _buildTransitionsStack(),
      ),
      bottomNavigationBar: botNavBar,
    );
  }

  void setCurrentPage(int index) {
    setState(() {
      _navigationViews[_currentIndex].controller.reverse();
      _currentIndex = index;
      _navigationViews[_currentIndex].controller.forward();
    });
  }

  @override
  void dispose() {
    for (NavigationIconView view in _navigationViews) view.controller.dispose();
    super.dispose();
  }

  Widget _buildTransitionsStack() {
    final List<Widget> transitions = <Widget>[];

    for (NavigationIconView view in _navigationViews)
      transitions.add(
        IgnorePointer(
          ignoring: _navigationViews[_currentIndex] != view,
          child: view.transition(context),
        ),
      );

    return Stack(children: transitions);
  }
}

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