nit_router 0.5.0

nit_router: ^0.5.0 copied to clipboard

Convenience wrapper for Go Router providing easy routes configuration, navigation parameters management, dynamic redirects and navigation bar

Features #

1. Configure routes with enums avoiding all boilerplate code and manual strings
2. Use navigation params with name and type to avoid any mistakes
3. Add dynamic redirects - depending on your state via Riverpod

Getting started #

Just add package to your dependencies

flutter pub add nit_router

Define navigation zones (will be covered below) and pass provider to your MaterialApp

return MaterialApp.router(
  routerConfig: ref.watch(
    nitRouterStateProvider(
      navigationZones: [
        AuthNavigationZone.values,
        AppNavigationZone.values,
      ],
      redirectsProvider: redirectsProvider,
    ),
  ),
);

ref.watch is used because of redirects provider which can depend on application state in order to handle updated redirects

Usage #

Navigation Zones #

The heart of nit_router are navigation zones - enums implementing NavigationZoneRoute. Below is a simple example with 2 top level routes and 1 child route with a parameter. This is enough to have everything working properly (without any code generation)

enum AppNavigationZone implements NavigationZoneRoute {
  home(
    SimpleNavigationRouteDescriptor(
      page: HomePage(),
    ),
  ),
  catalog(
    SimpleNavigationRouteDescriptor(
      page: CatalogPage(),
    ),
  ),
  product(
    ParameterizedNavigationRouteDescriptor(
      parameter: AppNavigationParams.productId,
      page: ProductPage(),
      parent: AppNavigationZone.catalog,
    ),
  );

  const AppNavigationZone(this.descriptor);

  @override
  final NavigationRouteDescriptor descriptor;

  @override
  String get root => '';
}

Navigation Parameters #

Navigation params are also configured with a enum which allows to secure type safety and easily track all usages of each parameter.

enum AppNavigationParams<T> with NavigationParamsMixin<T> {
  productId<int>();
}

With this you can easily pass parameter to routes

onPressed: () => context.goNamed(
  AppNavigationZone.product.name,
  pathParameters: AppNavigationParams.productId.set(e),
),

And access param on the destination page

final productId = ref.watchNavigationParam(
  AppNavigationParams.productId,
);

Redirects #

In order to setup redirects you only need to create a Provider

final redirectsProvider = Provider<RedirectsStateModel>(
  (ref) {
    debugPrint("rebuilding redirects");

    if (ref.watch(
      authStateProvider.select(
        (state) => state.signedIn,
      ),
    )) {
      return RedirectsStateModel(
        redirects: Map.fromEntries(
          AuthNavigationZone.values.map(
            (e) => MapEntry(
              e,
              AppNavigationZone.home,
            ),
          ),
        ),
      );
    } else {
      return RedirectsStateModel(
        redirects: Map.fromEntries(
          AppNavigationZone.values.map(
            (e) => MapEntry(
              e,
              AuthNavigationZone.signIn,
            ),
          ),
        ),
      );
    }
  },
);

Bottom Navigation Bar #

Common task is to create a navigation bar with several icons and track which one is actually active. nit_router provides out of the box solution for this.

bottomNavigationBar: NitBottomNavigationBar(
        menuItems: [
          NitMenuItem(
            route: AppNavigationZone.home,
            displayTitle: 'Home',
            iconData: Icons.home,
          ),
          NitMenuItem(
            route: AppNavigationZone.catalog,
            displayTitle: 'Catalog',
            iconData: Icons.shop_2_sharp,
          ),
        ],
      ),

NitBottomNavigationBar automatically determines which of the menu items should be highlighted as an active one.

Further plans #

1. Add Shell routes support
2. Add various page transition effects support
3. Add navigation bar styling and customization