App Bar¶

Inside the widget SidebarResponsive body defines the page in it, the page can be generated with the help of autoroute in app_router.dart.

Default¶

DesignImplementation

 SidebarBodyApp(
    title: 'Kartu',
    profile: SidebarBodyProfile(
      onTap: () {},
      user: UserProfileModel(
        name: 'Nanang Prasetya Bekti',
        image: AppImages.avatarUrl,
        role: 'Admin',
        email: '[email protected]',
        package: 'FREE',
        uuid: 'vpUi37K2f7',
      ),
    ),
    action: [
      ElevatedButtonIcon(
        onPressed: () {},
        icon: const Icon(Icons.notifications_none_rounded, color: AppColors.labelPrimary),
        backgroundColor: AppColors.grey.shade50,
      ),
    ],
  )

Warning

In the example above the properties action use the ElevatedButtonIcon for example learn more on Icon Button.

Constructors

title defines the title on top left.
tabBar if you use tabBar please wrap SidaberBodyApp with DefaultTabController on top widget.
profile it is optional but you can use widget SidebarBodyProfile.
action defines button action on right after properties profile.

height if you need mobile responsive you can use :

height: context.responsiveValue<double>(
    desktop: AppDimens.appBarHeight,
    tablet: AppDimens.appBarHeight,
    mobile: AppDimens.appBarHeightM,
)

Appbar with tabs¶

DesignImplementation

AutoTabsRouter(
  routes: const <PageRouteInfo<dynamic>>[
    ListCardRoute(),
    CategoryCardRoute(),
    TypeCardRoute(),
  ],
  builder: (context, child, _) {
    late TabsRouter tabsRouter = context.tabsRouter;

    return DefaultTabController(
      length: 3,
      initialIndex: tabsRouter.activeIndex,
      child: Scaffold(
        appBar: SidebarBodyApp(
          title: 'Kartu', 
          tabBar: TabBar(
            onTap: tabsRouter.setActiveIndex,
            isScrollable: true,
            tabs: const <Tab>[
              Tab(text: 'Daftar Kartu'),
              Tab(text: 'Kategori'),
              Tab(text: 'Tipe'),
            ],
          ),
          profile: SidebarBodyProfile(
            onTap: () {},
            user: UserProfileModel(
              name: 'Nanang Prasetya Bekti',
              image: AppImages.avatarUrl,
              role: 'Admin',
              email: '[email protected]',
              package: 'FREE',
              uuid: 'vpUi37K2f7',
            ),
          ),
          action: [
            ElevatedButtonIcon(
              onPressed: () {},
              icon: const Icon(Icons.notifications_none_rounded, color: AppColors.labelPrimary),
              backgroundColor: AppColors.grey.shade50,
            ),
          ],
          height: context.responsiveValue<double>(
            desktop: AppDimens.appBarHeight,
            tablet: AppDimens.appBarHeight,
            mobile: AppDimens.appBarHeightM,
          ),
        ),
        body: child,
      ),
    );
  },
)

Danger

If Appbar uses the tabBar property then SidebarBodyApp must be wrapped using DefaultTabController. And for tab routers use AutoTabsRouter, and must be wrapped above DefaultTabController. For implement AutoTabsRouter you can learn more on Navigation

Constructors

title defines the title on top left.
tabBar if you use tabBar please wrap SidaberBodyApp with DefaultTabController on top widget.
profile it is optional but you can use widget SidebarBodyProfile.
action defines button action on right after properties profile.

height if you need mobile responsive you can use :

height: context.responsiveValue<double>(
    desktop: AppDimens.appBarHeight,
    tablet: AppDimens.appBarHeight,
    mobile: AppDimens.appBarHeightM,
)

Appbar Profile¶

Please use the widget SidebarBodyProfile wrap with Appbar and put this widget in profile.

DesignImplementation

SidebarBodyProfile(
  onTap: () {},
  user: UserProfileModel(
    name: 'Nanang Prasetya Bekti',
    image: AppImages.avatarUrl,
    role: 'Admin',
    email: '[email protected]',
    package: 'FREE',
    uuid: 'vpUi37K2f7',
  ),
)

Danger

This component on development, if you use the component please follow this documentation.

Constructors

onTab if need interaction use this properties.
user the properties is Model, for now this propertis under development 🚧.

Authors: Nanang Prasetya