Modular 6 - BottomNavigationBar - RouterOutlet

main.dart

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

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

class AppWidget extends StatelessWidget {
  const AppWidget({super.key});

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

class AppModule extends Module {
  @override
  void binds(i) {}

  @override
  void routes(r) {
    r.child('/', child: (context) => const MainPage());
    r.module('/example1', module: Example1Module());
    r.module('/example2', module: Example2Module());
  }
}

class MainPage extends StatelessWidget {
  const MainPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () => Modular.to.navigate('/example1/home'),
              child: const Text('Example1 with Modules'),
            ),
            ElevatedButton(
              onPressed: () => Modular.to.navigate('/example2/home'),
              child: const Text('Example2 with Pages'),
            ),
          ],
        ),
      ),
    );
  }
}

class Example1Module extends Module {
  @override
  void routes(r) {
    r.child(
      '/',
      child: (context) => const Example1Page(),
      children: [
        ModuleRoute('/home', module: HomeModule()),
        ModuleRoute('/business', module: BusinessModule()),
        ModuleRoute('/school', module: SchoolModule()),
      ],
      transition: TransitionType.fadeIn,
    );
  }
}

class Example1Page extends StatefulWidget {
  const Example1Page({super.key});

  @override
  State<Example1Page> createState() => _Example1PageState();
}

class _Example1PageState extends State<Example1Page> {
  int _selectedIndex = 0;

  void _onItemTapped(int index) {
    switch (index) {
      case 0:
        Modular.to.navigate('/example1/home/');
        break;
      case 1:
        Modular.to.navigate('/example1/business/');
        break;
      case 2:
        Modular.to.navigate('/example1/school/');
        break;
    }
    _selectedIndex = index;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('BNB with Modules')),
      body: const RouterOutlet(),
      bottomNavigationBar: NavigationListener(builder: (context, child) {
        return BottomNavigationBar(
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.business),
              label: 'Business',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.school),
              label: 'School',
            ),
          ],
          currentIndex: _selectedIndex,
          selectedItemColor: Colors.amber[800],
          onTap: _onItemTapped,
        );
      }),
    );
  }
}

class Example2Module extends Module {
  @override
  void routes(r) {
    r.child(
      '/',
      child: (context) => const Example2Page(),
      children: [
        ChildRoute('/home', child: (context) => const HomePage()),
        ChildRoute('/business', child: (context) => const BusinessPage()),
        ChildRoute('/school', child: (context) => const SchoolPage()),
      ],
      transition: TransitionType.fadeIn,
    );
  }
}

class Example2Page extends StatefulWidget {
  const Example2Page({super.key});

  @override
  State<Example2Page> createState() => _Example2PageState();
}

class _Example2PageState extends State<Example2Page> {
  int _selectedIndex = 0;

  void _onItemTapped(int index) {
    _selectedIndex = index;
    switch (index) {
      case 0:
        Modular.to.navigate('/example2/home');
        break;
      case 1:
        Modular.to.navigate('/example2/business');
        break;
      case 2:
        Modular.to.navigate('/example2/school');
        break;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('BNB with Pages')),
      body: const RouterOutlet(),
      bottomNavigationBar: NavigationListener(builder: (context, child) {
        return BottomNavigationBar(
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.business),
              label: 'Business',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.school),
              label: 'School',
            ),
          ],
          currentIndex: _selectedIndex,
          selectedItemColor: Colors.amber[800],
          onTap: _onItemTapped,
        );
      }),
    );
  }
}

class HomeModule extends Module {
  @override
  void routes(r) {
    r.child('/', child: (_) => const HomePage());
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Padding(
              padding: EdgeInsets.symmetric(vertical: 8.0),
              child: Text('Home'),
            ),
            ElevatedButton(onPressed: () => Modular.to.navigate('/'), child: const Text('Logout'))
          ],
        ),
      ),
    );
  }
}

class BusinessModule extends Module {
  @override
  void routes(r) {
    r.child('/', child: (_) => const BusinessPage());
  }
}

class BusinessPage extends StatelessWidget {
  const BusinessPage({super.key});

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(child: Text('Business')),
    );
  }
}

class SchoolModule extends Module {
  @override
  void routes(r) {
    r.child('/', child: (_) => const SchoolPage());
  }
}

class SchoolPage extends StatelessWidget {
  const SchoolPage({super.key});

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(child: Text('School')),
    );
  }
}