Custom Bottom Bar In Flutter

Custom Bottom Bar In Flutter :

Screenshot :

custom_bottom_navbar.dart

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_icons/flutter_icons.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:simple_animations/simple_animations/controlled_animation.dart';
import 'package:simple_animations/simple_animations/multi_track_tween.dart';

class CustomBottomNavBar extends StatefulWidget {
  final int currentIndex;
  final ValueChanged<int> onTap;
  CustomBottomNavBar({Key key, this.onTap, this.currentIndex})
      : super(key: key);

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

class _CustomBottomNavBarState extends State<CustomBottomNavBar> {
  @override
  Widget build(BuildContext context) {
    int _itemIndex = widget.currentIndex == null ? 0 : widget.currentIndex;
    return Stack(alignment: Alignment.center, children: <Widget>[
      Container(
          height: 55,
          decoration: BoxDecoration(
              color: Colors.grey.withOpacity(0.1),
              borderRadius: BorderRadius.only(
                  topRight: Radius.circular(30),
                  topLeft: Radius.circular(30)))),
      Padding(
          padding: const EdgeInsets.only(left: 20, right: 20),
          child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                BottomCustomAppBarItem(
                    text: 'Android',
                    icon: Feather.home,
                    index: 0,
                    currentIndex: _itemIndex,
                    onTap: () {
                      setState(() {
                        _itemIndex = 0;
                        widget.onTap(_itemIndex);
                      });
                    }),
                BottomCustomAppBarItem(
                    text: 'Flutter',
                    icon: Feather.bookmark,
                    index: 1,
                    currentIndex: _itemIndex,
                    onTap: () {
                      setState(() {
                        _itemIndex = 1;
                        widget.onTap(_itemIndex);
                      });
                    }),
                BottomCustomAppBarItem(
                    text: 'Kotlin',
                    icon: Feather.user,
                    index: 2,
                    currentIndex: _itemIndex,
                    onTap: () {
                      setState(() {
                        _itemIndex = 2;
                        widget.onTap(_itemIndex);
                      });
                    })
              ]))
    ]);
  }
}

class BottomCustomAppBarItem extends StatelessWidget {
  final int index;
  final GestureTapCallback onTap;
  final IconData icon;
  final int currentIndex;
  final String text;
  BottomCustomAppBarItem(
      {this.index, this.onTap, this.icon, this.currentIndex, this.text});

  final tween = MultiTrackTween([
    Track("scale").add(Duration(milliseconds: 800), Tween(begin: 0.0, end: 1),
        curve: Curves.elasticOut),
  ]);

  @override
  Widget build(BuildContext context) {
    Color _orange = Colors.orange;
    Color _grey = Colors.grey[800];
    return GestureDetector(
        onTap: onTap,
        child: Stack(alignment: Alignment.center, children: <Widget>[
          AnimatedContainer(
            duration: Duration(milliseconds: 300),
            width: 80,
            height: 50,
            child: index == currentIndex
                ? Center(
                    child: ControlledAnimation(
                        playback: Playback.PLAY_FORWARD,
                        duration: tween.duration,
                        tween: tween,
                        builder: (context, animation) {
                          return Transform.scale(
                              scale: animation["scale"],
                              child: Column(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: <Widget>[
                                    Text(text,
                                        style: GoogleFonts.oxygen(
                                            color: Color.fromARGB(
                                                255, 232, 96, 75),
                                            fontWeight: FontWeight.bold,
                                            fontSize: 16)),
                                    SizedBox(height: 5),
                                    Container(
                                        height: 4,
                                        width: 4,
                                        decoration: BoxDecoration(
                                            shape: BoxShape.circle,
                                            color: Color.fromARGB(
                                                255, 232, 96, 75)))
                                  ]));
                        }))
                : Icon(icon, color: index == currentIndex ? _orange : _grey),
          )
        ]));
  }
}

home_page.dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:simple_animations/simple_animations/controlled_animation.dart';
import 'package:simple_animations/simple_animations/multi_track_tween.dart';
import 'custom_bottom_navbar.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _currentIndex;
  List<Widget> _list;

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

  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(
      SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
        statusBarIconBrightness: Brightness.dark,
        systemNavigationBarIconBrightness: Brightness.light,
      ),
    );
    _list = [
      Container(child: SafeArea(child: Text('Android'))),
      Container(child: SafeArea(child: Text('Kotlin'))),
      Container(child: SafeArea(child: Text('Flutter')))
    ];
    return Scaffold(
        extendBody: true,
        body: _list[_currentIndex],
        backgroundColor: Colors.white,
        bottomNavigationBar: CustomBottomNavBar(
            currentIndex: _currentIndex,
            onTap: (index) {
              if (_currentIndex != index) {
                setState(() {
                  _currentIndex = index;
                });
              }
            }));
  }
}

main.dart

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

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

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

pubspec.yaml

name: bottombar
description: A new Flutter application.

version: 1.0.0+1

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons:
  flutter_icons:
  google_fonts:
  simple_animations:
  flutter_staggered_animations:

dev_dependencies:
  flutter_test:
    sdk: flutter


flutter:
  uses-material-design: true

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