bart 0.1.0
bart: ^0.1.0 copied to clipboard

A bottom navigation bar using navigator 2 for switching tabs

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
  • easy integration
  • show AppBar on demand within your nested routes (automatically animated)
  • basic material bottom bar factory
  • create your own bottom bar design if you need it
  • cache route page if you need to restore state

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(...)

Enable disable route caching #

Why?

Imagine you got a page with a counter. You increment this counter and change tab. You want this tab to come back with the incremented counter? That's the reason why you need cache.

How

By default BartMenuRoute bottomBar factory is cached. But you can override it.

BartMenuRoute.bottomBar(cache: true)

By default BartMenuRoute innerRoute factory is NOT cached. But you can override it.

BartMenuRoute.bottomBar(cache: false)

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.

Appbar will automatically shows or hide with a smooth animation

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());
14
likes
120
pub points
40%
popularity

Publisher

apparence.io

A bottom navigation bar using navigator 2 for switching tabs

Homepage
Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on bart