Bottom Navigation Animation In Flutter :

bottom navigation animation.dart
import 'package:eva_icons_flutter/eva_icons_flutter.dart'; import 'package:flutter/material.dart'; final Color bgColor = Colors.white; final Color accentColor = Colors.black.withOpacity(0.1); final Color whiteColor = Colors.black; class BottomNavBar extends StatefulWidget { @override _BottomNavBarState createState() => _BottomNavBarState(); } class _BottomNavBarState extends State<BottomNavBar> { int selectedIndex = 0; List<NavItem> items = [ NavItem( Icon( EvaIcons.homeOutline, color: accentColor, ), Text('Trending', style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold)), 0, ), NavItem( Icon( EvaIcons.filmOutline, color: accentColor, ), Text('Film', style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold)), 1, ), NavItem( Icon( EvaIcons.bellOutline, color: accentColor, ), Text('Bell', style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold)), 2, ), NavItem( Icon( EvaIcons.videoOutline, color: accentColor, ), Text('Video', style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold)), 3, ), ]; @override void initState() { super.initState(); } Widget buildNavItems(NavItem item, bool isSelected, int index) { return ClipRRect( borderRadius: BorderRadius.circular(26), child: AnimatedContainer( duration: Duration(milliseconds: 300), curve: Curves.easeInOutBack, width: MediaQuery.of(context).size.width / 4 - 20, height: double.maxFinite, color: isSelected ? accentColor : Colors.transparent, child: Stack( alignment: Alignment.center, children: <Widget>[ AnimatedPositioned( duration: Duration(milliseconds: 300), curve: Curves.easeInOutBack, bottom: -18.0 * (isSelected ? 1.0 : 5.0), child: Container( child: item.title, height: 46, ), ), AnimatedPositioned( duration: Duration(milliseconds: 300), curve: Curves.easeInOutBack, top: -5.0 * (isSelected ? 10.0 : 1.0), left: 28, child: Container( child: item.icon, height: 46, ), ), ], ), ), ); } @override Widget build(BuildContext context) { return Container( width: MediaQuery.of(context).size.width, height: 72, padding: EdgeInsets.only(top: 16, bottom: 16), decoration: BoxDecoration( color: bgColor, boxShadow: [ BoxShadow( color: Colors.black54, blurRadius: 5, ), ], ), child: Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: items.map((item) { var itemIndex = items.indexOf(item); return GestureDetector( onTap: () { setState(() { selectedIndex = itemIndex; }); }, child: buildNavItems(item, selectedIndex == itemIndex, item.index), ); }).toList(), ), ); } } class NavItem { final Icon icon; final Text title; final int index; const NavItem(this.icon, this.title, this.index); }
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