bart 0.1.0 bart: ^0.1.0 copied to clipboard
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
- 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
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.
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.
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());