Skip to content

Side bar

Sidebar is a powerful and customizable responsive navigation component for any type of vertical navigation. Sidebar support responsive mobile, tablet and desktop.

Desktop sidebar

Tablet sidebar

ON DEVELOPMENT

Sidebar Responsive

SidebarResponsive(
    listMenu: <SidebarDrawerItem>[
        SidebarDrawerItem(
            title: "Kartu",
            icon: const Icon(Icons.view_carousel_outlined),
        ),
        SidebarDrawerItem(
            title: "Users",
            icon: const Icon(Icons.people_outline_outlined),
        ),
        SidebarDrawerItem(
            title: "Pembayaran",
            icon: const Icon(Icons.payments_outlined),
        ),
    ],
    body: const <PageRouteInfo<dynamic>>[
        CardRoute(),
        UsersRoute(),
        PaymentRoute(),
    ],
)

Warning

Please defines body properties useing AutoRoute, follow documentation on Pub dev. for example value body you can see on presentation/routers/app_router.dart.

Constructors

  • listMenu defines the Item Sidebar on drawer,
  • body defines the contents on right side. You can generade router on app_router.dart and put the name of autoroute.
  • backgroundColor defines the color background on Side drawer.

Side Drawer Item

Side drawer item

SidebarDrawerItem(
    title: "Kartu",
    icon: const Icon(Icons.view_carousel_outlined),
)

Constructors

  • title the properties is required.
  • icon defines the icon data and it is required.
Authors: Nanang Prasetya