instagram_bottom_nav_bar 2.0.0

Best bottom bar structure created to control page flow.

Best bottom bar structure created to control page flow.

Preview

[Bottom Bar]

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);

Getting Started

Add Instagram Bottom Navigation Bar to your pubspec.yaml in dependencies: section.

dependencies:
  instagram_bottom_nav_bar: ^2.0.0

Update dependencies:

flutter pub get

Import the package:

import 'import 'package:instagram_bottom_nav_bar/instagram_tab_view.dart';

It also has all the features of the normal bottom navigation bar

InstagramTabView(
      bottomBarLabels: [
          'Home Page',
          'Messages',
          'Profile',
        ],
      bottomBarIcons: [
          Icon(Icons.home),
          Icon(Icons.message),
          Icon(Icons.person),
        ],
      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,
      pages: [
          HomePage(),
          Messages(),
          Profile(),
      ],
    );