Skip to content

mt-akar/bottom_nav_layout

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

bottom_nav_layout

License: MIT GitHub Repo stars GitHub followers

Demo

stack

What is bottom_nav_layout?

It is a quick flutter app layout for building an app with a bottom nav bar. You can get an app with fluent behavior running in 15 lines of code.

Why bottom_nav_layout?

  • Eliminates all boilerplate code for bottom nav bar coordination.
  • Offers additional common features.
    • Page state preservation
    • Lazy page loading
    • Page transition animations
    • In-page navigation
    • Back button navigation for Android
  • Works with any bottom bar you want. Use the material or cupertino bottom bar, grab one from pub.dev or use your own.
  • You can customize or turn any feature off.

Content

Usage

Installation

Add the following to your pubspec.yaml file.

dependencies:
  bottom_nav_layout: ^3.0.10

Quick Start Example

import 'package:bottom_nav_layout/bottom_nav_layout.dart';

void main() => runApp(MaterialApp(
      home: BottomNavLayout(
        // The app's destinations
        pages: [
          (_) => Center(child: Text("Welcome to bottom_nav_layout")),
          (_) => SliderPage(),
          (_) => Center(child: TextField(decoration: InputDecoration(hintText: 'Go..'))),
        ],
        bottomNavigationBar: (currentIndex, onTap) => BottomNavigationBar(
          currentIndex: currentIndex,
          onTap: (index) => onTap(index),
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
            BottomNavigationBarItem(icon: Icon(Icons.linear_scale), label: 'Slider'),
            BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
          ],
        ),
      ),
    ));

Done. You have a complete, working application.

SliderPage code

Parameters

Name Description Default
pages The app's destinations. N/A
bottomNavigationBar The bottom navbar of the layout. N/A
savePageState When false, the pages are reinitialized every time they are navigated. (Material behavior). When true, the pages are initialized once and hidden/shown on navigation. (Cupertino behavior) false
lazyLoadPages When false, pages are created in the beginning. When true, pages are created when they are navigated for the first time. false
pageStack Navigation stack that remembers pages visited. Enhances back button management on Android. ReorderToFrontPageStack for Android, NoPageStack for iOS
extendBody Passed to Scaffold.extendBody. false
resizeToAvoidBottomInset Passed to Scaffold.resizeToAvoidBottomInset. true
pageTransitionData Animation configuration for page transitions. null

Inner Widget Tree

inner_widget_tree


image

Page State Preservation

The state changes you made in a page such as scroll amount, sub-navigation, form inputs etc. are preserved. You can enable it as per Cupertino Design Guidelines or disable it as per Material Design Guidelines

savePageState: true, // Default is false

Lazy Page Loading

The layout offers the option to lazily create the pages using the passed in page builders. When lazyLoadPages is set to true, the pages are not created until they are navigated to for the first time. This is useful when a non-initial page;

  • Has a launch animation.
  • Runs a heavy process that is not needed until the page is opened.
lazyLoadPages: true, // Default is false

Page Back Stack

Documentation Example
documentation back stack example, programmatic navigation example

The layout remembers the order of pages navigated and when back button is pressed, navigates back to the previously navigated page.

// Default is ReorderToFrontPageStack for Android and NoPageStack for iOS.
pageStack: ReorderToFrontPageStack(initialPage: 0),

There are many useful page back stack behaviors implemented such as reorder-to-front and replace-except-first. You can also implement your own.

You also specify the initialPage inside PageStack.

To change the current page programmatically, you can use

// Navigate to a page. 
myPageStack.push(2);

// Navigate back to the previous page on the stack.
myPageStack.pop();

// PageStacks inherit ListQueue.
var top = myPageStack.peek();
var length = myPageStack.length;

Page Transition Animation

Documentation Example
- example

You can set an transition animation between pages. Create your own AnimationBuilder or use one of the built in ones.

These animation work with both bottom navbar and Android back button.

// Default is null.
pageTransitionData: PageTransitionData(
  builder: PrebuiltAnimationBuilderBuilders.zoomInAndFadeOut,
  duration: 150,
  direction: AnimationDirection.inAndOut,
),

In-Page Navigation

Documentation Example
documentation example

The layout maintains a flat navigation pattern.


Figure: Flat Navigation

Benefits

  1. Navigator per page is trivial to set up.
  2. You only need to push pages you need. Pops are handled by the layout.
  3. Android back button navigates both in-page and among pages.
  4. Bottom bar pops all in-page stack when the current bar item is reselected.
  5. If you put an app bar to your page, it will show the up button correctly.

To do this, the page should have a Navigator widget that use the passed in GlobalKey as its key.

pages: [
  (navKey) => Navigator(
        key: navKey,
        initialRoute: "/",
        onGenerateRoute: (routeSettings) => MaterialPageRoute(
          builder: (context) {
            if (routeSettings.name == "/")
              return OverviewPage();
            else if (routeSettings.name == "/details")
              return DetailsPage();
            else
              return Center(child: Text("Unknown route."));
          },
        ),
      ),
  (_) => SliderPage(),
  (_) => SliderPage(),
],

Different Bottom Bars

Documentation Example
documentation example

So far, we only worked on Material bottom nav bar. The layout supports any bottom bar.

Example usage of flutter_snake_navigationbar:

bottomNavigationBar: (currentIndex, onTap) => SnakeNavigationBar.color(
  currentIndex: currentIndex,
  onTap: (index) => onTap(index),
  items: [
    BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
    BottomNavigationBarItem(icon: Icon(Icons.linear_scale), label: 'Slider'),
    BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
  ],
),

Improvements

  • Tell me if you want to see a feature your app has/needs in this package. I will do my best to integrate it.
  • I am also considering to make a drawer_nav_layout package. If you are interested, let me know!

Community

Any feedback is appreciated. πŸš€πŸš€

I love talking about code. Find me on discord at ViraL#2868

If you like this work, please consider πŸ‘ the package and ⭐ the repo. It is appreciated.

If you have queries, feel free to create an issue.

If you would like to contribute, feel free to create a PR.

About

A quick and powerful Flutter layout with a bottom navbar.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages