bart 0.0.1

A bottom navigation bar using navigator 2 for switching tabs

Bart - A scaffold powered by Navigator2

• bottom navigation bar using sub router for switching tabs within the body
• show AppBar on demand within your nested routes

Install

Add Bart in your pubspec and import it.

import 'package:bart/bart.dart';

Get started

Create your routes

List<BartMenuRoute> subRoutes() {
  return [
    BartMenuRoute.bottomBar(
      label: "Home",
      icon: Icons.home,
      path: '/home',
      pageBuilder: (context) => PageFake(Colors.red),
    ),
    BartMenuRoute.bottomBar(
      label: "Library",
      icon: Icons.video_library_rounded,
      path: '/library',
      pageBuilder: (context) => PageFake(Colors.blueGrey),
    ),
    BartMenuRoute.bottomBar(
      label: "Profile",
      icon: Icons.person,
      path: '/profile',
      pageBuilder: (context) => PageFake(Colors.yellow),
    ),
    BartMenuRoute.innerRoute(
      path: '/subpage',
      pageBuilder: (context) =>
          PageFake(Colors.greenAccent, child: Text("Sub Route page")),
    ),
  ];
}

This creates a route with a bottom menu item

BartMenuRoute.bottomBar(...)

This creates a route that you can push within your scaffold body

BartMenuRoute.innerRoute(...)

Create your page

class MainPageMenu extends StatelessWidget {
  final BartRouteBuilder routesBuilder;

  const MainPageMenu({Key? key, required this.routesBuilder}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BartScaffold(
      routesBuilder: routesBuilder,
      navigatorObservers: [routeObserver],
      bottomBar: BartBottomBar.fromFactory(
        bottomBarFactory: BartMaterialBottomBar.bottomBarFactory,
      ),
    );
  }
}

Customize your bottom bar

Default behavior is using material standart theme but you can create yours.
Simply extends BartBottomBarFactory and create your own bottom bar like BartMaterialBottomBar.
See code in library.

Show an AppBar

You can show an AppBar or hide it whenever you want inside BartScaffold subPages.

Using mixin method

class MyPage extends StatelessWidget with AppBarNotifier {
  const MyPage({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // use the update app bar method to dynamically change app bar  
    updateAppBar(context, AppBar(title: Text("test")));
    return Container();
  }
}

or directly

Actions.invoke(context, AppBarBuildIntent(AppBar(title: Text("title text"))));