custom_navigator 0.3.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 93

Custom navigator #

A flutter package that makes it easy to create your own navigator anywhere in the widget tree.

A common use for such widget is when you need to implement an "Always presenting bottom navigation bar"

Getting Started #

First you need to add the package to your pubspec.yaml file.

Custom scaffold #

CustomScaffold is a stateful widget that uses the CustomNavigator to to handle item transition of [BottomNavigationBar] with nested navigation while keeping the [BottomNavigationBar] visible!

Usage #

// Here's the custom scaffold widget
// It takes a normal scaffold with mandatory bottom navigation bar
// and children who are your pages
      scaffold: Scaffold(
        bottomNavigationBar: BottomNavigationBar(
          items: _items,

      // Children are the pages that will be shown by every click
      // They should placed in order such as
      // `page 0` will be presented when `item 0` in the [BottomNavigationBar] clicked.
      children: <Widget>[

      // Called when one of the [items] is tapped.
      onItemTap: (index) {},

See the custom_scaffold_example for more details

Custom navigator #

The CustomNavigator is fairly easy to use

Usage #

        home: YourChildWidget(),
        //Specify your page route [PageRoutes.materialPageRoute] or [PageRoutes.cupertinoPageRoute]
        pageRoute: PageRoutes.materialPageRoute,

Then you can call it using the same old Navigator.of(context)

Options #

  • you can specify Named routes exactly like in MaterialApp.

if you want to use the default [Navigator] you need to specify a [GlobalKey] to your [MaterialApp] and use it navigatorKey.currentState

See the example for more details.

[0.3.0] - Sep 18, 2019

  • Updated CustomScaffold so it pops all views when you click on a BottomNav item.

[0.2.0] - Sep 18, 2019

[0.1.1] - Sep 17, 2019

Updated readme and added an example

[0.1.0] - Sep 17, 2019

Initial Version of the library.

  • Includes the ability to use a new navigator anywhere in the widget tree without the being dependent on App Navigator


example #

Here's a simple application that demonstrates how [CustomNavigator] works. Using a bottom navigation with simple details page.

Getting Started #

give a navigator key to [MaterialApp] if you want to use the default navigation anywhere in your app eg: line 15 & line 93. This should be on a global level.

GlobalKey<NavigatorState> mainNavigatorKey = GlobalKey<NavigatorState>();

HomePage #

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  _MyHomePageState createState() => _MyHomePageState();

class _MyHomePageState extends State<MyHomePage> {
  Page _page = Page('Page 0');
  int _currentIndex = 0;

  // Custom navigator takes a global key if you want to access the
  // navigator from outside it's widget tree subtree
  GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: _items,
        onTap: (index) {
          // here we used the navigator key to pop the stack to get back to our
          // main page
          setState(() => _page = Page('Page $index'));
          _currentIndex = index;
        currentIndex: _currentIndex,
      body: CustomNavigator(
        navigatorKey: navigatorKey,
        home: _page,
        //Specify your page route [PageRoutes.materialPageRoute] or [PageRoutes.cupertinoPageRoute]
        pageRoute: PageRoutes.materialPageRoute,

  final _items = [
    BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('home')),
    BottomNavigationBarItem(icon: Icon(Icons.event), title: Text('events')),
        icon: Icon(Icons.save_alt), title: Text('downloads')),

Page tab #

This is the page of each tab in the bottom navigation

class Page extends StatelessWidget {
  final String title;

  const Page(this.title) : assert(title != null);

  Widget build(BuildContext context) {
    final text = Text(title);

    return Container(
      child: Center(
          child: FlatButton(
              onPressed: () => _openDetailsPage(context), child: text)),

  //Use the navigator like you usually do with .of(context) method
  _openDetailsPage(BuildContext context) => Navigator.of(context)
      .push(MaterialPageRoute(builder: (context) => DetailsPage(title)));

//  _openDetailsPage(BuildContext context) => mainNavigatorKey.currentState.push(MaterialPageRoute(builder: (context) => DetailsPage(title)));


Details page #

class DetailsPage extends StatelessWidget {
  final String title;

  const DetailsPage(this.title) : assert(title != null);

  Widget build(BuildContext context) {
    final text = Text('Details of $title');
    return Container(
      child: Center(child: text),

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  custom_navigator: ^0.3.0

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:custom_navigator/custom_navigator.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Jan 16, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.0
  • pana: 0.13.4
  • Flutter: 1.12.13+hotfix.5

Health suggestions

Format lib/custom_navigation.dart.

Run flutter format to format lib/custom_navigation.dart.

Format lib/custom_navigator.dart.

Run flutter format to format lib/custom_navigator.dart.

Format lib/custom_scaffold.dart.

Run flutter format to format lib/custom_scaffold.dart.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies