[Flutter] Navegacion desde una Lista

navigate_from_list.dart

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: MyPage()
    );
  }
}

/// Pagina Principal
/// está estructurada con un [Scaffold] que contiene una [AppBar]
/// y una [ListView.builder] en el body para generar la lista
class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Lista'),
      ),
      backgroundColor: Colors.white,
      body: ListView.builder(
        itemCount: 50,
        itemBuilder: (context, index){
          return ListTile(
            // Texto que mostrara el [ListTile]
            // utilizamos el [index] para no tener que 
            // generar datos
            title: Text(
              'Numero: $index',
              style: TextStyle(
                color: Colors.black,
              ),
            ),
            // el [onTap] ejecuta un [Navigator.push()] al hacer click
            // este recibe el contexto y una ruta a la cual dirigirse
            onTap: (){
              Navigator.push(
                context,
                // La ruta se crea con un [MaterialPageRouter]
                // este recibe el builder que retorna el widget
                // que será lo que se muestra en panatlla
                MaterialPageRoute(
                  builder: (context) {
                    return SecondPage(
                      // hacemos que nuestro widget reciba un parametro
                      // para mostrar que se hace dinamico segun el elemento
                      // al que se le de tap
                      numero: index.toString(),
                    );
                  }
                ),
              );
            },
          );
        },
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  SecondPage({
    @required this.numero,
  });
  
  final String numero;
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // notar que esta appbar detecta automaticamente que no es la ruta principal
      // y agrega el boton de back sin agregar ninguna configuracion
      appBar: AppBar(
        title: Text('Lista'),
      ),
      backgroundColor: Colors.white,
      body: Center(
        child: Text(
          numero,
          style: TextStyle(
            fontSize: 50,
            color: Colors.black,
          ),
        ),
      ),
    );
  }
}