Flutter Modular with pushNamed/pushReplacementNamed and RouterOutlet

main.dart

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

void main() {
  runApp(ModularApp(module: AppModule(), child: AppWidget()));
}

class AppModule extends Module {
  @override
  List<ModularRoute> get routes => [
        ChildRoute('/', child: (_, __) => HomePage()),
        ModuleRoute('/products', module: ProductsModule(), transition: TransitionType.noTransition),
      ];
}

class AppWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Modular.to.addListener(() {
      print('Navigate: ${Modular.to.path}');
      print('History: ${Modular.to.navigateHistory.map((e) => e.name)}');
    });

    return MaterialApp.router(
      routeInformationParser: Modular.routeInformationParser,
      routerDelegate: Modular.routerDelegate,
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Center(
        child: ElevatedButton(
          child: const Text('Go Products'),
          // navigate to module only
          onPressed: () async {
            await Modular.to.pushNamed('/products/');
          },
        ),
      ),
    );
  }
}

class ProductsModule extends Module {
  @override
  List<ModularRoute> get routes => [
        ChildRoute('/', child: (_, __) => ProductsPage(), children: [
          ChildRoute('/red', child: (_, __) => Container(color: Colors.red)),
          ChildRoute('/yellow', child: (_, __) => Container(color: Colors.yellow)),
          ChildRoute('/green', child: (_, __) => Container(color: Colors.green)),
        ])
      ];
}

class ProductsPage extends StatefulWidget {
  @override
  State<ProductsPage> createState() => _ProductsPageState();
}

class _ProductsPageState extends State<ProductsPage> {
  @override
  void initState() {
    super.initState();
    // Set the initial route inside the module
    Modular.to.pushNamed('./red');
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        // Returns to root product module before pop
        Modular.to.pushReplacementNamed('./');
        return true;
      },
      child: Scaffold(
        appBar: AppBar(title: const Text('Products')),
        body: NavigationListener(builder: (context, child) {
          return Row(
            children: [
              SizedBox(
                width: 100,
                child: Column(children: [
                  ListTile(
                    title: const Text('Red'),
                    onTap: () => Modular.to.pushReplacementNamed('./red'),
                    selected: Modular.to.path.endsWith('/red'),
                  ),
                  ListTile(
                    title: const Text('Yellow'),
                    onTap: () => Modular.to.pushReplacementNamed('./yellow'),
                    selected: Modular.to.path.endsWith('/yellow'),
                  ),
                  ListTile(
                    title: const Text('Green'),
                    onTap: () => Modular.to.pushReplacementNamed('./green'),
                    selected: Modular.to.path.endsWith('/green'),
                  ),
                ]),
              ),
              const Expanded(child: RouterOutlet())
            ],
          );
        }),
      ),
    );
  }
}