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

Question

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.

Answer 1

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'),
        )
      ],
    );
  }
}