A basic app with go_router and bottom navigation.

bottom_navigation_bar_go_router.dart

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

void main() {
  runApp(MusicAppDemo());
}

class MusicAppDemo extends StatelessWidget {
  MusicAppDemo({super.key});

  final GoRouter _router = GoRouter(
    initialLocation: IncidentsPage.path,
    routes: <RouteBase>[
      ShellRoute(
        builder: (BuildContext context, GoRouterState state, Widget child) {
          return PsiBottomNavigationBar(
            currentIndex: switch (state.uri.path) {
              var p when p.startsWith(IncidentsPage.path) => 0,
              var p when p.startsWith(SettingsPage.path) => 1,
              _ => 0,
            },
            child: child,
          );
        },
        routes: <RouteBase>[
          GoRoute(
            path: IncidentsPage.path,
            pageBuilder: (context, state) {
              return const MaterialPage(
                child: IncidentsPage(),
              );
            },
          ),
          GoRoute(
            path: SettingsPage.path,
            pageBuilder: (context, state) {
              return const MaterialPage(
                child: SettingsPage(),
              );
            },
          ),
        ],
      ),
    ],
  );

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'PSI Mobile',
      theme: ThemeData(
        useMaterial3: true,
      ),
      routerConfig: _router,
    );
  }
}

class PsiBottomNavigationBar extends StatelessWidget {
  final Widget child;
  final int currentIndex;

  PsiBottomNavigationBar({
    super.key,
    required this.child,
    required this.currentIndex,
  });

  final _routes = [
    IncidentsPage.path,
    SettingsPage.path,
  ];

  @override
  Widget build(BuildContext context) {
    const middleIconSize = 32.0;
    const iconPadding = 16.0;
    final middlePosition =
        (MediaQuery.of(context).size.width - middleIconSize - iconPadding) / 2;
    return Scaffold(
      body: child,
      bottomNavigationBar: Stack(
        children: [
          BottomNavigationBar(
            items: const <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                icon: Icon(Icons.public),
                label: 'Incidents',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.settings),
                label: 'Settings',
              ),
            ],
            currentIndex: currentIndex,
            onTap: (int index) {
              context.go(_routes[index]);
            },
          ),
          Positioned(
            left: middlePosition,
            right: middlePosition,
            child: IconButton(
              onPressed: () {},
              icon: const Icon(
                Icons.circle,
                size: middleIconSize,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

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

  static const String path = '/incidents';

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

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

  static const String path = '/settings';

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