instagram_bottom_nav_bar

Description:

instagram bottom nav bar

Best bottom bar structure created to control page flow.
Preview #

Features #

✅ As in Instagram logic, when you save only 3 of the previous tabs and press the back button, it
goes to the previous tab.
✅ If you are in a tab, it will return to the old page when the back button is clicked.
✅ If there is a tab you haven't been to before, that tab will be load after you go.

Important Notes #

✅ The use of initState must be in state management so that the bottom bar pages are not loaded
directly when the application is opened.
✅ If you want the bottom navigation bar to stay fixed when you go to another page, set the
rootNavigator parameter to false.

Navigator.of(context,rootNavigator: false).pushNamed(Routes.homePage);
copied to clipboard
Getting Started #
Add Instagram Bottom Navigation Bar to your pubspec.yaml in dependencies: section.
dependencies:
instagram_bottom_nav_bar: ^3.0.19
copied to clipboard
Update dependencies:
flutter pub get
copied to clipboard
Import the package:
import 'import 'package:instagram_bottom_nav_bar/instagram_tab_view.dart';
copied to clipboard
It also has all the features of the normal bottom navigation bar
InstagramTabView(
selectedItemColor: Colors.black,
unselectedItemColor: Colors.grey.shade400,
backgroundColor: Colors.white, // Default is Colors.white
elevation: 12, // Default elevation is 12,
showSelectedLabels: true, // Default showSelectedLabels is true,
showUnselectedLabels: true, // Default showUnselectedLabels is true
iconSize: 24, // Default iconSize is 24,
bottomNavigationBarType: BottomNavigationBarType.fixed,
iconType: IconType.icon,
items: [
InstagramTabItem(label: 'Home Page', page: HomePage(), icon: Icon(Icons.add)),
InstagramTabItem(label: 'Profile', page: Messages(), icon: Icon(Icons.refresh)),
],
)
copied to clipboard