Flutter Navigation Example

main.dart

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Ejemplo de Navegación'),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int page = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: [
        const FirstPage(),
        const SecondPage(),
      ][page],
      bottomNavigationBar: NavigationBar(
        selectedIndex: page,
        onDestinationSelected: (value) {
          page = value;
          setState(() {});
        },
        destinations: const [
          NavigationDestination(
            icon: Icon(Icons.home),
            label: 'Inicio',
          ),
          NavigationDestination(
            icon: Icon(Icons.settings),
            label: 'Ajustes',
          ),
        ],
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          ElevatedButton(
            onPressed: () async {
              MaterialPageRoute<bool> route = MaterialPageRoute(
                builder: (context) {
                  return Scaffold(
                    appBar: AppBar(
                      title: const Text('Nueva Pantalla'),
                    ),
                    body: Center(
                      child: FilledButton(
                        onPressed: () {
                          Navigator.of(context).pop(true);
                        },
                        child: const Text('Volver'),
                      ),
                    ),
                  );
                },
              );
              bool? value = await Navigator.of(context).push(route);
              print(value);
            },
            child: const Text(
              'Navegar a otra pantalla',
            ),
          ),
        ],
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          ElevatedButton(
            onPressed: () {
              showModalBottomSheet(
                context: context,
                builder: (BuildContext context) {
                  return Container(
                    padding: const EdgeInsets.all(20),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      children: [
                        Center(
                          child: Container(
                            width: 50,
                            height: 10,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(5),
                              color: Colors.grey,
                            ),
                          ),
                        )
                      ],
                    ),
                  );
                },
              );
            },
            child: const Text(
              'Desplegar BottomSheet',
            ),
          ),
        ],
      ),
    );
  }
}

Ejemplo de Navegación en Flutter. Para navegar entre "páginas" o "escenas" se utiliza el Widget NavigationBar que sigue la especificación de Material3. Este Widget permite modificar una variable llamada page en el estado del Widget padre que se utiliza para seleccionar de un arreglo el Widget que se quiere mostrar en pantalla.

En este caso se crearon dos Widgets Stateless para usarse como ejemplos de navegación. El primer Stateless Widget se llama FirstPage e incluye un botón que permite navegar a otra pantalla sobre la actual. El segundo Stateless Widget se llama SecondPage e incluye un botón que permite desplegar un ModalBottomSheet.

Vistas previas del resultado: