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