Navigazione Flutter - Invia dati a una nuova schermata

1. Defianiamo una classe di task

Per prima cosa, è necessario un modo semplice per rappresentare i task. Per questo esempio, creiamo una classe che contenga due dati: il titolo e la descrizione.

            
class Task {
    final String titolo;
    final String descrizione;
                  
    const Task(this.titolo, this.descrizione);
}          
            
        

2. Creiamo un elenco di task

In secondo luogo, visualizziamo un elenco di cose da fare. In questo esempio, generiamo 20 task e li mostriamo utilizzando un ListView.

Generiamo l’elenco di task

         
final tasks = List.generate(
    20,
    (i) => Task(
        'Task $i',
        'Descrizione per il task $i',
    ),
);
         
     

Mostriamo l’elenco di task utilizzando una ListView

    
ListView.builder(
    itemCount: tasks.length,
    itemBuilder: (context, index) {
        return ListTile(
            title: Text(tasks[index].titolo),
        );
     },
);        
    

Fin qui tutto bene. Questo codice genera 20 task e li visualizza in una ListView.

3. Creiamo una schermata Task per visualizzare l'elenco

Per fare questo, creiamo uno StatelessWidget. Lo chiamiamo SchermataTask. Poiché il contenuto di questa pagina non cambierà durante l'esecuzione, dovremo richiedere l'elenco delle cose da fare nell'ambito di questo widget.

Passiamo il nostro ListView.builder come corpo del widget che stiamo restituendo a build(). Questo mostrerà l'elenco sullo schermo.

         
class SchermataTask extends StatelessWidget {
    // Richiede l'elenco dei task
    const SchermataTask({Key? key, required this.tasks}) : super(key: key);
              
    final List tasks;
              
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: const Text('Elenco dei Task'),
            ),
            // i task vengono passati in ListView.builder
            body: ListView.builder(
                itemCount: tasks.length,
                itemBuilder: (context, index) {
                    return ListTile(
                        title: Text(tasks[index].titolo),
                    );
                },
            ),
        );
    }
}
         
     

4. Creiamo una schermata dei dettagli per visualizzare le informazioni su un determinato task

Ora creiamo la seconda schermata. Il titolo della schermata contiene il titolo del task e il corpo della schermata mostra la descrizione.

Poiché la schermata dei dettagli è un normale StatelessWidget, richiede all'utente l’inserimento di un task nell’interfaccia utente. Quindi, crea l'interfaccia utente utilizzando quel task

    
class SchermataDettaglio extends StatelessWidget {
    // Nel costruttore, richiede un task
    const SchermataDettaglio({Key? key, required this.task}) : super(key: key);
          
    // Dichiara un campo che contenga il Task
    final Task task;
          
    @override
    Widget build(BuildContext context) {
        // Utilizza il task per creare l'interfaccia Utente
        return Scaffold(
            appBar: AppBar(
                title: Text(task.titolo),
            ),
            body: Padding(
                padding: const EdgeInsets.all(16.0),
                child: Text(task.descrizione),
            ),
        );
    }
}
    

5. Navighiamo e passiamo i dati alla schermata dei dettagli

Utilizzando un DetailScreen siamo pronti per eseguire la navigazione. In questo esempio, quando l’utente tocca un task nell'elenco, andrà al DetailScreen. Passiamo il task a DetailScreen.

Per catturare il tocco dell'utente in SchermataTask, scriviamo una callback onTap() per il widget ListTile. All'interno della callback onTap(), utilizziamo il metodo Navigator.push().

        
body: ListView.builder(
    itemCount: tasks.length,
    itemBuilder: (context, index) {
        return ListTile(
            title: Text(tasks[index].titolo),
            // Quando l'utente preme il ListTile, naviga sulla SchermataDettaglio
            // Nota che non si sta solamente creando una SchermataDettaglio, ma si sta anche passando il task attuale.
            onTap: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => DetailScreen(task: tasks[index]),
                    ),
                );
            },
        );
    },
),
        
    

Potete trovare il codice completo su Github