Nested navigation with different paths

[ferraridamiano]

Hi, and thank you for this awesome package!
My app has the same navigation bar in every page. I would like to change just the right part of the screen when I navigate through different pages. Unfortunately it seems with this package that I can't accomplish this. Here's an example:

As you can see I would like to have a settings page and 3 family pages. The path is "/settings" for the first and "/family/:fid" for the others. I can navigate between the family pages without opening an entire new app page. But when I navigate to settings a new app page opens.
How can just change the right page of the screen? Is this accomplishable with this package?

Code example

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'shared/data.dart';

void main() => runApp(App());

enum PAGE_TYPE {
  settings,
  family,
}

class App extends StatelessWidget {
  App({Key? key}) : super(key: key);

  static const title = 'GoRouter Example: Nested Navigation';

  @override
  Widget build(BuildContext context) => MaterialApp.router(
        routeInformationParser: _router.routeInformationParser,
        routerDelegate: _router.routerDelegate,
        title: title,
      );

  late final _router = GoRouter(
    routes: [
      GoRoute(
        path: '/',
        redirect: (_) => '/family/${Families.data[0].id}',
      ),
      GoRoute(
        path: '/family/:fid',
        builder: (context, state) => MainScreen(
          key: state.pageKey,
          initialIndex: Families.data.indexWhere((f) => f.id == Families.family(state.params['fid']!).id),
        ),
      ),
      GoRoute(
        path: '/settings',
        builder: (context, state) => MainScreen(
          key: state.pageKey,
          initialPageType: PAGE_TYPE.settings,
        ),
      ),
    ],
  );
}

class MainScreen extends StatefulWidget {
  const MainScreen({
    Key? key,
    this.initialPageType = PAGE_TYPE.family,
    this.initialIndex = 0,
  }) : super(key: key);

  final int initialIndex;
  final PAGE_TYPE initialPageType;

  @override
  _MainScreenState createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> with TickerProviderStateMixin {
  late PAGE_TYPE currentPageType;
  late int currentPage;

  List<Widget> pages = [for (final f in Families.data) FamilyView(family: f)];

  @override
  void initState() {
    super.initState();
    currentPageType = widget.initialPageType;
    currentPage = widget.initialIndex;
  }

  @override
  Widget build(BuildContext context) {

    Widget rigthPage;

    if (currentPageType == PAGE_TYPE.settings) {
      rigthPage = const Expanded(
        child: Center(
          child: Text('Settings page'),
        ),
      );
    }
    else {
      rigthPage = pages[currentPage];
    }

    return Scaffold(
      body: Row(
        children: [
          Drawer(
            child: ListView(
              children: [
                ListTile(
                  title: const Text('Settings'),
                  leading: const Icon(Icons.settings),
                  onTap: () => context.go('/settings'),
                ),
                const Divider(),
                for (int i = 0; i < Families.data.length; i++)
                  ListTile(
                    title: Text(Families.data[i].name),
                    onTap: () {
                      _tap(context, i);
                      setState(() => currentPage = i);
                    },
                  ),
              ],
            ),
          ),
          rigthPage,
        ],
      ),
    );
  }

  void _tap(BuildContext context, int index) => context.go('/family/${Families.data[index].id}');
}

class FamilyView extends StatefulWidget {
  const FamilyView({required this.family, Key? key}) : super(key: key);
  final Family family;

  @override
  State<FamilyView> createState() => _FamilyViewState();
}

class _FamilyViewState extends State<FamilyView> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Expanded(
      child: ListView(
        children: [
          for (final p in widget.family.people)
            ListTile(
              title: Text(p.name),
              onTap: () => {},
            ),
        ],
      ),
    );
  }
}

[csells]

Check out the books sample for an example of how to do that.

[ferraridamiano]

Thank you!