/simple_navigation_menu

A library to help you use a simple and clean navigation menu.

Primary LanguageDartMIT LicenseMIT

A simple and clean navigation menu.

Build CI codecov pub package

Top Menu Bottom Menu Top Menu & Bottom Ad
Top Menu on a Tablet Bottom Menu on a Tablet
top_blue_tablet bottom_blue_tablet

Features

Simple menu that can be placed either on top or on bottom of the screens.

You can also pass an Ad (BannerAd, Native or any Widget) that will be fixed either on top or on bottom of the screens.

You can also pass up to 3 AppBar Actions to a screen. Each action will consist of an icon, an icon color and a callback function to br run when the icon is pressed.

Platform support

Simple Navigation Menu Android iOS macOS Web Windows Linux
Compatibility ✅ ✅ ✅ ✅ ✅ ✅

Getting started

Place the SimpleNavHome widget under your MaterialApp's home property and you are good to go.

If you use some state management solution, just wrap the SimpleNavHome widget with your solution, below there is an example using Provider.

You should pass a list of Menu Items (SimpleNavItemModel) to the SimpleNavHome widget, each menu item can receive a title, a screen widget and, optionally, up to 3 actions icons.

Usage

  • Minimal usage
// Fist you set up the Menu Items, consisting of a String title, a Widget screen and, optionally, up to 3 actions icons.
List<SimpleNavItemModel> _menuItemList() {
  return [
    SimpleNavItemModel(menuItemTitle: 'Menu 1', screen: Container(color: Colors.amber)),
    SimpleNavItemModel(menuItemTitle: 'Menu 2', screen: Container(color: Colors.brown)),
    SimpleNavItemModel(menuItemTitle: 'Menu 3', screen: Container(color: Colors.green)),
  ];
}

// Then you pass the Menu Items to the Navigation Menu, the full list of available parameters are in the examples.
SimpleNavHome(
  titleWidget: const Text('Simple Navigation Menu'),
  appDrawer: const Drawer(child: Center(child: Text("Drawer"))),
  navMenuItemList: _menuItemList(),
  isTopMenu: true,
);
  • If you use state management, just wrap everything up like below.
return MultiProvider(
  providers: [
    ListenableProvider<ChangeNofitierOne>(create: (_) => changeNotifierOne),
    ListenableProvider<ChangeNofitierTwo>(create: (_) => changeNotifierTwo),
  ],
  child: const Example(),
);
  • If you want to use an Ad, just pass it to the Simple Navigation Menu like below. See the example section for details.
return SimpleNavHome(
  navMenuItemList: _getNavMenuItemList(),
  isTopAd: false,
  ad: _bannerAd != null ? AdWidget(ad: _bannerAd!) : null,
  adBackColor: Colors.purple,
);

For passing actions (icons) or to see details on Ads, see the example section.

Parameters for SimpleNavHome

Required:

  • navMenuItemList: the list of Menu Items to display, each is a SimpleNavItemModel type. The current limit is 10, but you probably shouldn't use more than 6 on a mobile fone, it won't look very good, but all depends on the screen size and the size of the menu's title.

Optional:

  • titleWidget: the widget to use as title on AppBar, normally is a Text("String"). The default is SizedBox.shrink().
  • centerTitle: a bool that defines if the title should be centered inside AppBar. The default is false.
  • isTopMenu: a bool that defines if the menu should appear on the top or on the bottom of the screen. The default is true (top).
  • appDrawer: the drawer Widget to be used, if any. The default is null.
  • initialPageIndex: a int value for the initial index of the page you want. The default is 0 (first page on the left).
  • textScaleFactor: a double value that sets how much "zoom" is applied to the selected menu item. The default is 1.15 (15% larger than normal).
  • frontColorMenu: a Color value for the front of the menu (text/letters). The default is Colors.white.
  • backColorMenu: a Color value for the back of the menu (background). The default is Colors.blue.
  • frontColorAppBar: a Color value for the front of the AppBar (text/letters). The default is Colors.white.
  • backColorAppBar: a Color value for the back of the AppBar (background). The default is Colors.blue.
  • isTopAd: a bool that defines if the Ad should appear on the top or on the bottom of the screen. The default is false (bottom).
  • ad: a Widget to show as an Ad in all of the menu's screens. Normally an AdWidget instance. The default is null (doesn't show anything).
  • adBackColor: a Color value for the background of the Ad. The default is Colors.blue.
  • adHeight: a Double value for the Ad's height. The default is 50.0.

Caveats

  • The Drawer Widget can only be placed on the left side of the AppBar.

Contributing

You can contribute in many ways: