Apri una nuova schermata

Fa parte della sezione Elenchi e schermate del percorso Flutter di Coddy. Lezione 18 di 33.

Le app hanno più di una schermata: un elenco, poi i dettagli di un elemento, poi una pagina delle impostazioni. In Flutter una schermata è un widget, di solito uno Scaffold nella propria classe.

Il Navigator mantiene le schermate in una pila, come un mazzo di carte. Quella in cima è quella che vedi. Navigator.push mette una nuova schermata in cima:

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => const AboutScreen()),
);

MaterialPageRoute fa scorrere la nuova schermata proprio come fa un telefono. Il suo builder è una funzione che restituisce la schermata da mostrare.

context indica al Navigator dove ti trovi nell'albero dei widget. Ecco perché HomeScreen è una classe a sé stante, dentro MaterialApp: il suo context può trovare il navigatore creato da MaterialApp.

Sfida

Facile

Il pulsante About this app per ora non fa nulla. Fai in modo che apra AboutScreen con Navigator.push.

Provalo tu

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {},
          child: const Text('About this app'),
        ),
      ),
    );
  }
}

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

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