Question 216900 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Single/Common scaffold between multiple screens with go_router navigation

I want to use common scaffold widget between multiple screens with go_router navigation library.
I don’t understand the approach.

I saw some examples for common scaffold with multiple screens but they are using some index based scaffold body content widget. I want some solution where i can use go_router navigation(push/pop/go) instead of any indexed based scaffold body widget replacement.

Note: I don’t have any tab based or bottom navigation in my design. I want to navigate based on buttons or selection containing in scaffold body widget only.

Someone can suggest me the approach that can help me.

Also interested in to know which navigation lib is best like standard and more power full (go_router vs GetX).

Thanks and waiting for some response.

Looking for approach.

Tags:

2

Answers


  1. 0

    If sticking with go_router, check out using a ShellRoute. For example:

    class AppRouter extends GoRouter {
  AppRouter({
    required GlobalKey<NavigatorState>? navigatorKey,
    required String initialRoute,
  }) : super(
          initialLocation: initialRoute,
          navigatorKey: routerKey,
          routes: [
            ShellRoute(
              navigatorKey: navigatorKey,
              builder: (context, routerState, child) {
                return Scaffold(
                  appBar: PreferredSize(
                    preferredSize: AppBar().preferredSize,
                    child: const MainAppBar(),
                  ),
                  drawer: const AppDrawer(),
                  body: child,
                );
              },
              routes: [
                GoRoute(
                  path: '/route1',
                  pageBuilder: (context, state) => NoTransitionPage(
                    child: const FirstView(),
                    key: state.pageKey,
                    name: state.name,
                  ),
                ),
                GoRoute(
                  path: '/route2',
                  pageBuilder: (context, state) => NoTransitionPage(
                    child: const SecondView(),
                    key: state.pageKey,
                    name: state.name,
                  ),
                ),
                GoRoute(
                  path: '/route3',
                  pageBuilder: (context, state) => const NoTransitionPage(
                    child: const ThirdView(),
                  ),
                ),
            
              ],
            )
          ],
        );
}
    Login or Signup to reply.
  2. 0

    You can use ShellRoute. For example:

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

void main() {
  runApp(const MyApp());
}

final _router = GoRouter(
  initialLocation: '/1',
  routes: [
    ShellRoute(
      builder: (
        BuildContext context,
        GoRouterState state,
        Widget child,
      ) {
        return Scaffold(
          appBar: AppBar(
            title: const Text('Scaffold Common'),
          ),
          body: child,
        );
      },
      routes: [
        GoRoute(
          path: '/1',
          pageBuilder: (context, state) => const NoTransitionPage(
            child: PageOne(),
          ),
        ),
        GoRoute(
          path: '/2',
          pageBuilder: (context, state) => const NoTransitionPage(
            child: PageTwo(),
          ),
        ),
        GoRoute(
          path: '/3',
          pageBuilder: (context, state) => const NoTransitionPage(
            child: PageThree(),
          ),
        ),
      ],
    ),
  ],
);

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: _router,
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: const [
        Text('PageOne'),
        ControlCommonWidget(),
      ],
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: const [
        Text('PageTwo'),
        ControlCommonWidget(),
      ],
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: const [
        Text('PageThree'),
        ControlCommonWidget(),
      ],
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextButton(
          onPressed: () {
            context.go('/1');
          },
          child: const Text('Go to Page One'),
        ),
        TextButton(
          onPressed: () {
            context.go('/2');
          },
          child: const Text('Go to Page Two'),
        ),
        TextButton(
          onPressed: () {
            context.go('/3');
          },
          child: const Text('Go to Page Three'),
        )
      ],
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search