Use AutoRoute with FluentUI.

[TreyThomas93]

Does anyone know on how to use AutoRoute with FluentUI. I want to be able to navigate to nested routes without replacing the entire FluentUI Navigation screen. Any ideas? Thanks

[Milad-Akarie]

@TreyThomas93 show some code please.

[TreyThomas93]

home_screen.dart

return NavigationView(
    appBar: const NavigationAppBar(title: Text('Home'), automaticallyImplyLeading: false),
    pane: NavigationPane(
      displayMode: PaneDisplayMode.compact,
      selected: ref.read(selectedIndex),
      onChanged: (value) {
        ref.read(selectedIndex.notifier).state = value;
      },
      header: const SizedBox(
        width: double.infinity,
        child: Center(child: Text("App")),
      ),
      items: [
        PaneItem(
          icon: const Icon(FluentIcons.people),
          title: const Text("Roster"),
          body: const RosterScreen(),
        ),
        PaneItem(
          icon: const Icon(FluentIcons.sync),
          title: const Text("Sync"),
          onTap: () => runSync(),
          body: const Text("Sync"),
        ),
        PaneItem(
          icon: const Icon(FluentIcons.settings),
          title: const Text("Settings"),
          body: const Text("Settings"),
        ),
      ],
    ),
  );

roster_screen.dart

return fluent.Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          fluent.FilledButton(
            onPressed: () => context.router.push(DocumentsRoute(patientId: patient.id)),
            child: const Text("Documents"),
          ),
        ],
      );

routes.dart

CustomRoute(
          path: "/roster",
          page: EmptyRoutePage.page,
          transitionsBuilder: transitionsBuilder,
          durationInMilliseconds: durationInMilliseconds,
          children: [
            CustomRoute(
              path: "",
              page: RosterRoute.page,
              transitionsBuilder: transitionsBuilder,
              durationInMilliseconds: durationInMilliseconds,
            ),
            CustomRoute(
              path: "documents/:patientId",
              page: EmptyRoutePage.page,
              transitionsBuilder: transitionsBuilder,
              durationInMilliseconds: durationInMilliseconds,
              children: [
                CustomRoute(
                  path: "",
                  page: DocumentsRoute.page,
                  transitionsBuilder: transitionsBuilder,
                  durationInMilliseconds: durationInMilliseconds,
                ),
                CustomRoute(
                  path: "document/:documentId",
                  page: DocumentRoute.page,
                  transitionsBuilder: transitionsBuilder,
                  durationInMilliseconds: durationInMilliseconds,
                ),
              ],
            ),
          ],
        ),

When I navigate to DocumentsRoute() from RosterRoute(), the DocumentsRoute() overrides the FluentUI NavigationView. How do I internalize the routing system within the FluentUI body window and not the entire screen.

[Milad-Akarie]

@TreyThomas93 according to the following thread I guess you'd have to use paneBodyBuilder to build an AutoRouter() widget
bdlukaa/fluent_ui#679

[TreyThomas93]

Thanks. I'll give it a try.