Navigation system of Flutterap configuration

Links:

https://flutterap.com/
https://flutterap.features.com/
https://docs.flutterap.com/
https://github.com/flutterap59/flutterap/

index

• First level navigate bloc in drawer
• First level expnd bloc in drawer
• Next level navigate bloc in drawer
• Next level expand bloc in drawer
• Breadcrumb navigator
•  

The items in drawer or side bar are divided into some groups:

First level navigate bloc in drawer

You can press on it and navigate center part into the related rout, It is like chart or dashboard bloc in panel and you can use its bloc , if the page is defined by FullScreenLayout in layouts folder, you should set isReturnable value true for it.

   {
        'title': AppLocalizations.of(context)!.dashboard,
        'iconPath':
        "packages/fx_flutterap_components/assets/svgs/homehashtag.svg",
        'routeName': FcDashboard.routeName,
        'isReturnable': false,
        'submenu': [],
      },

you should add this map into menuList items in config/ui/drawer/drawer_config.dart then this bloc will be added into drawer.

Next level navigate bloc in drawer

You can press on it and navigate center part into the related page or route too, but it is in submenus, It is like Tutorial in  bloc in Advanced components in panel and you can use its bloc, if the page is defined by FullScreenLayout in layouts folder, you should set isReturnable value true for it.

  {
            'title': AppLocalizations.of(context)!.tutorial,
            'iconPath': "",
            'routeName': FcTutorial.routeName,
            'isReturnable': false,
            'submenu': [],
          },

you should add this map into menuList items submenu in config/ui/drawer/drawer_config.dart then this bloc will be added into drawer or sidebar.

First level expnd bloc in drawer

You can press the arrow inside and the relevant blocs will be displayed, It is like Components and Advanced components bloc in panel and you can use its

bloc .

{
        'title': AppLocalizations.of(context)!.advancedcomponents,
        'iconPath': "packages/fx_flutterap_components/assets/svgs/advanced.svg",
        'routeName': "",
        'isReturnable': false,
        'submenu': [
          {
            'title': AppLocalizations.of(context)!.toastmessage,
            'iconPath': "",
            'routeName': FcToast.routeName,
            'isReturnable': false,
            'submenu': [],
          },
          {
            'title': AppLocalizations.of(context)!.tutorial,
            'iconPath': "",
            'routeName': FcTutorial.routeName,
            'isReturnable': false,
            'submenu': [],
          },
          {
            'title': AppLocalizations.of(context)!.tooltip,
            'iconPath': "",
            'routeName': FcTooltip.routeName,
            'isReturnable': false,
            'submenu': [],
          },
          {
            'title': AppLocalizations.of(context)!.sweetalert,
            'iconPath': "",
            'routeName': FcSweetAlert.routeName,
            'isReturnable': false,
            'submenu': [],
          },
          {
            'title': AppLocalizations.of(context)!.treelist,
            'iconPath': "",
            'routeName': FcTreeList.routeName,
            'isReturnable': false,
            'submenu': [],
          },
          {
            'title': AppLocalizations.of(context)!.mediaplayer,
            'iconPath': "",
            'routeName': (kIsWeb)
                ? FcMediaPlayer.routeName
                : (Platform.isWindows || Platform.isMacOS || Platform.isLinux)
                ? FcDesktopMediaPlayer.routeName
                : FcMediaPlayer.routeName,

            'isReturnable': false,
            'submenu': [],
          },
        ],
      },

you should add this map into menuList items in config/ui/drawer/drawer_config.dart then this bloc will be added into drawer or sidebar.

Next level expand bloc in drawer

You can press the arrow inside and the relevant blocs will be displayed, It is like Errors bloc in Component bloc in panel and you can use its

bloc

{
            'title': AppLocalizations.of(context)!.card,
            'iconPath': "",
            'routeName': "",
            'submenu': [
              {
                'title': AppLocalizations.of(context)!.primarycard,
                'iconPath': "",
                'routeName': FcPrimaryCard.routeName,
                'isReturnable': false,
                'submenu': [],
              },
              {
                'title': AppLocalizations.of(context)!.scrollablecard,
                'iconPath': "",
                'routeName': FcScrollableCard.routeName,
                'isReturnable': false,
                'submenu': [],
              },
              {
                'title': AppLocalizations.of(context)!.imagecard,
                'iconPath': "",
                'routeName': FcImageCard.routeName,
                'isReturnable': false,
                'submenu': [],
              },
            ],
          },

you should add this map into menuList items submenu in config/ui/drawer/drawer_config.dart then this bloc will be added into drawer or sidebar.

Breadcrumb navigator

The other way to navigate the page is using Bread Crumb Nvigator if you find Bread crumb in components of panel you can see different styles of breadcrumb,

in the seconund container(Navigate breadcrumb) you can press the button under the breadcrumb component and go to secound page and third page too,

and you can manage presence on each page by the breadcrumb component at the first section of screen.





one case of using breadcrumb component is using it directly in the page that you start it empty as widget:

FxBreadCrumbNavigator.shaped(
                    firstRoute: AppLocalizations.of(context)!.breadcrumb,
                    breadButtonType: BreadButtonType.shaped,
                  ),

It  should be on every page you navigate to. and the routs should be defined in lib/routs/routs.dart.