build License: MIT pub dev bart

Bart - A scaffold powered by Navigator2

Apparence.io logo

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

Apparence.io logo

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.<br/> Simply extends BartBottomBarFactory and create your own bottom bar like BartMaterialBottomBar. <br/> 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());

Libraries

animated_appbar
bart
bart_appbar
bart_model
bart_scaffold
bottom_bar
router_delegate