bart logo

build License: MIT pub dev bart

🚀  Overview

Bart is very simple solution to implement tabulation system layout with Navigator into your application.

  • 📱 Material & Cupertino themes available.
  • 🤝 Automatic theme switching between material & cupertino.
  • 🛣 Inner routing inside tab.
  • 🥷 Parent routing (over tabbar content).
  • 😌 Very easy to implement.
  • 🪄 Show AppBar on demand (automatically animated).
  • 🚀 Create your own bottom bar design if you need it.
  • 👻 Hide/Show bottom bar when you need
  • 🗃 Cache route page if you need to restore state.

🧐  Live example

Bart example

📖  Installation

Install the package

flutter pub add bart

Import the package

import 'package:bart/bart.dart';

🚀  Get started

  • Define in your page the routing tab
List<BartMenuRoute> subRoutes() {
  return [
      label: "Home",
      icon: Icons.home,
      path: '/home',
      pageBuilder: (context) => PageFake(
        key: PageStorageKey<String>("home"), // this is required to enable state caching,
      label: "Library",
      icon: Icons.video_library_rounded,
      path: '/library',
      pageBuilder: (context) => PageFake(Colors.blueGrey),
      label: "Profile",
      icon: Icons.person,
      path: '/profile',
      pageBuilder: (context) => PageFake(Colors.yellow),
    BartMenuRoute.innerRoute( // add an inner route, no item will be added in bottom bar
      path: '/subpage',
      pageBuilder: (context) =>
          PageFake(Colors.greenAccent, child: Text("Sub Route page")),
What are the differences between innerRoute & bottomBar ?

This creates a route with a bottom menu item:


This creates a route that you can push within your scaffold body (no extra item will be added in bottom bar)


  • Create your main page which include the Bart tabbar Scaffold
class MainPageMenu extends StatelessWidget {
  const MainPageMenu({Key? key}) : super(key: key);

  Widget build(BuildContext context) {
    return BartScaffold(
      routesBuilder: subRoutes, // add a reference to the subRoutes list you created before
      bottomBar: BartBottomBar.adaptive(), // add the bottom bar (see below for other options)

🏞  Bottom bar themes

Bart include 4 ways to display a bottom bar:

BartBottomBar.cupertino() // iOS look.
BartBottomBar.material3() // Android look.
BartBottomBar.adaptive() // automatically select between cupertino & material depending on the device.
BartBottomBar.custom() // your own design

To custom the bottom bar, simply extends BartBottomBarCustom and create your own bottom bar like SimpleBottomBar(in example project).

🤖  Material 3 bottom bar

If you want to custom your material 3 bottom bar, you can use the BottomNavigationBarThemeData class in your theme.

  navigationBarTheme: NavigationBarThemeData(

🗃  State caching

How it works 🤔 ?

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?.

Bart include a caching system to implement this feature.

By default state caching is enabled. But you can override it:

BartMenuRoute.bottomBar(cache: false)

How to use it 🤓 ?

Your tab pages you want to be cached must use a PageStorageKey property:

  label: "Library",
  icon: Icons.video_library_rounded,
  path: '/library',
  pageBuilder: (context, settings) => PageFake(
    key: PageStorageKey<String>("library"), // add this property
    child: Text('Cached page !'),

🗃  Show/Hide animated AppBar

You can show an animated AppBar or hide it whenever you want inside all your Bart sub pages.

AppBar will automatically shows or hide with a smooth animation

Simply add the AppBarNotifier mixin like this:

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

  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
    return Container();

To hide app bar, just execute this code inside your widget with AppBarNotifier


You can also use Actions to performs AppBar related actions

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

🫥  Show/hide bottom bar

Sometimes you wants to hide the bottom menu bar. As this is possible for the appbar you can use a mixin for that. It just require to be called from a sub context of the BartScaffold.

Actions.invoke(context, BottomBarIntent.hide());

Or use the mixin

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

  Widget build(BuildContext context) {
    // directly show the bottom bar
    // directly hide the bottom bar
    return Container();

💫  Transitions between items

You can use the official animation plugin to create better transition or create your owns.


  label: "Library",
  icon: Icons.video_library_rounded,
  path: '/library',
  pageBuilder: (context, settings) => PageFake(Colors.blueGrey),
  transitionDuration: Duration(milliseconds: 500),
  transitionsBuilder: (context, anim1, anim2, widget) => FadeThroughTransition(
    animation: anim1,
    secondaryAnimation: anim2,
    child: widget,

📣  Sponsor

logo apparence io

Initiated and sponsored by

👥  Contribution

Contributions are welcome. Contribute by creating a PR or create an issue 🎉.