App base code - creare una pagina di copertina

La pagina di copertina è una normale pagina con un’immagine di sfondo e un bottone per navigare la pagina successiva, che potrà essere una Home, il form di Login o qualsiasi altra cosa.

1. Creare il Layout

Andiamo a modificare Scaffold() nel metodo build() di MyHomePageState() per gestire l’immagine di sfondo e un bottone per navigare. Sostituiamo il build() con questo di seguito:

Widget build(BuildContext context) {
    String splash_bg_page = 'https://www.webtechandbiz.com/splash-scaled.jpg';

    return Scaffold(
        body: Container(
          decoration: BoxDecoration(
              image: DecorationImage(
                  image: NetworkImage(splash_bg_page), fit: BoxFit.cover
              )
                  /* attivare questa parte se si preferisci prendere l'immagine in locale dalla cartella /assets
                  new Image.asset(
                    'assets/images/cover.jpg',
                    fit: BoxFit.cover,
                  ),
                  */
          ),
        ),
      floatingActionButton: FloatingActionButton(
        onPressed: _navigateToHome,
        tooltip: 'Navigate',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

2. Creare le parti Interattive

Quando l’utente preme il bottone, deve navigare verso una pagina di login o una home, e per fare questo abbiamo impostato la funzione _navigateToHome sempre all’interno di _MyHomePageState() che estende State<MyHomePage>.

 void _navigateToHome() async {
    setState(() {
        Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => SecondRoute()),
        );
    });
 }

E la classe SecondRoute pescata da qui: https://flutter.dev/docs/cookbook/navigation/navigation-basics

class SecondRoute extends StatelessWidget {
  const SecondRoute({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Route"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
             Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

La navigazione fra pagine e le tecniche per il passaggio dei parametri è descritta in questo articolo.