bart 0.0.2

A bottom navigation bar using navigator 2 for switching tabs

Bart - A scaffold powered by Navigator2

Developed with 💙  by Apparence.io

Tldr - features?

• bottom navigation bar using sub router for switching tabs within the body
• show AppBar on demand within your nested routes
• easy integration
• basic material bottom bar factory
• create your own bottom bar design if you need it

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")));
    // now call you can call show method that will start animation
    showAppBar(context);
    return Container();
  }
}

Also you can hide AppBar with a smooth animation using this method from mixin (for example when user scroll down a list)

hideAppBar(context);

or directly using Actions methods

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