Search code examples
flutternavigator

Navigation inside NavigationBody fluent_ui Flutter


I'm writing a flutter windows application using fluent_ui package.

I have NavigationView with NavigationPage and NavigationBody items.

On some NavigationBody item, I want to navigate to the other page (for example from page app/cars/ to app/cars/id) but leave the same NavigationPane state (which mean changing only a NavigationBody widget).

How can I achieve this? Only by using some kind of SetState() which totally changes the content of the widget or some solutions with using Navigator?

Basic page structure:
- NavigationView
  - NavigationPane
  - NavigationBody

Solution

  • So. I found a solution to this problem. My solution is based on using Navigator as a base widget. In NavigationView as a NavigationBody item used not concrete page (widget), but Navigator which takes care of inner navigation. So Push() method changes only the NavigationBody of NavigationView and not the entire window of the application. Here is Code example for this. Hope someone will find this helpful: nav_view_page.dart

    NavigationView(
          appBar: //some app bar
          pane: // your NavigationPane
          content: NavigationBody(
            index: _selectedIndex,
            children: [
              //some other body items
              CarsPageNavigator(
                navigatorKey: GlobalKey<NavigatorState>(),
                carsController: widget.carsController,
              ), //this is our navigator
            ],
          ),
        );
    

    custom_navigator.dart

    class CarsPageNavigator extends StatelessWidget {
      const CarsPageNavigator(
          {Key? key, required this.navigatorKey, required this.carsController})
          : super(key: key);
      final GlobalKey<NavigatorState> navigatorKey;
      final CarsController carsController;
      @override
      Widget build(BuildContext context) {
        return Navigator(
            key: navigatorKey,
            initialRoute: '/car',
            onGenerateRoute: (RouteSettings routeSettings) {
              return FluentPageRoute(
                  settings: routeSettings,
                  builder: (context) {
                    return getPage(routeSettings.name);
                  });
            });
      }
    
      Widget getPage(String? url) {
        switch (url) {
          case CarsManagementPage.routeName:
            {
              return CarsManagementPage(carsController: carsController);
            }
          case CarManagementPage.routeName:
            return CarManagementPage(controller: carsController);
          default:
            return CarsManagementPage(carsController: carsController);
        }
      }
    }
    

    In this code in OnGenerateRoute method returns page that you want to navigate to. To navigate to other page from some inner page use pushNamed(or other named push methods of Navigator):

    Navigator.pushNamed(context, CarManagementPage.routeName, arguments: car);
    

    small remark: some "basic" code is skipped to make answer smaller