Categorie
Flutter

Flutter: navigazione tra screen

Questo articolo presuppone la lettura del precedente accessibile al seguente link: https://comunicando.it/2020/08/21/flutter-struttura-di-unapp/

Dopo aver lanciato il comando che crea la nostra app, ovvero flutter create my_app aprite il progetto con l’editor preferito, individuate il file main.dart all’interno della cartella lib.

E’ questo il file principale del nostro progetto, il main appunto.

Mediante flutter create my_app il framework inizializza una struttura di esempio ed il main.dart sarà già popolato con il codice necessario per eseguire una piccola app di esempio che mostra un contatore che si incrementa al clic su un pulsante. Visto che è un esempio potete eliminare tutto quello che contiene il main.dart e sostituirlo con il seguente pezzo di codice:

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MyApp'),
      ),
      body: Center(
        child: Text(
          'Hello!',
        ),
      ),
    );
  }
}

Questo è il punto di partenza del nostro esempio. Implementa la prima screen della nostra app con titolo ‘MyApp’ (title dell’AppBar) e che stampa un testo centrato all’interno della screen (testo ‘Hello’ presente nel body).

L’esempio non ha bisogno di commenti: il main richiama runApp passandogli come parametro la classe MyApp(). Questa inizializza una MaterialApp in cui è definita come home la classe MyHomePage(). Quest’ultima, a sua volta, restituisce uno Scaffold con una AppBar ed un body per il contenuto (un semplice testo).

Eseguendo questo codice, se tutto l’ambiente è stato installato correttamente questo sarà il risultato:

Riprendendo l’esempio visto al precedente articolo la prima screen desiderata è quella di welcome.

Iniziamo a creare un nuovo file dart all’interno della directory lib che contiente già main.dart e lo chiamiamo welcome.dart come mostrato nella prossima figura.

Struttura di un’applicazione Flutter vista dall’editor Visual Studio Code.

Il codice di welcome.dart sarà il seguente:

import 'package:flutter/material.dart';

class Welcome extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Welcome'),
      ),
      body: Center(
        child: Text(
          'Welcome!',
        ),
      ),
    );
  }
}

Molto simile a quanto visto prima, solo che ora il testo stampato al centro del body sarà la scritta “Welcome!” ed il titolo della AppBar sarà “Welcome”.

Ci tocca ora modificare il file main.dart in modo da dire a Flutter: quando avvii la mia app, chiama runApp e passa la classe Welcome contenuta nel file welcome.dart.

Per realizzare tutto questo basta modificare il main.dart nel seguente modo:

import 'package:flutter/material.dart';
import 'welcome.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Welcome(),
    );
  }
}

Si noti che ora il main.dart importa, oltre al package di sistema material.dart, anche il file welcome.dart mediante la riga di codice

import 'welcome.dart';

runApp chiama la classe MyApp che a sua volta inizializza una MaterialApp la cui home, stavolta, richiama la classe Welcome() appena definita.

Mandando in esecuzione il codice, il risultato è ora il seguente:

Con la stessa logica aggiungiamo ora un nuovo file dart, ovvero login.dart.

Il codice in esso contenuto sarà:

import 'package:flutter/material.dart';

class Login extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Login'),
      ),
      body: Center(
        child: Text(
          'Login!',
        ),
      ),
    );
  }
}

Semplicemente una screen con al centro la scritta “Login!”

Ora dobbiamo in qualche modo collegare la screen descritta in welcome.dart con la screen di login.dart.

A tal proposito usiamo un pulsante per implementare un’azione da far scattare alla pressione dello stesso.

Modifichiamo il file welcome.dart sostituendo quello che prima era un testo centrato con un componente RaisedButton.

import 'package:flutter/material.dart';
import 'login.dart';

class Welcome extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Welcome'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Go Login'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => Login()),
            );
          },
        ), 
      ),
    );
  }
}

Il risultato sarà quello di avere al centro della screen un pulsante con la scritta “Go Login” alla cui pressione viene fatto un push (Navitator.push) verso la MaterialPageRoute che prende il nome di Login() (classe importata mediante la direttiva import ‘login.dart’).

Il risultato è il seguente:

Flutter: navigazione tra due screen

Nel prossimo articolo introdurremo nuovi concetti ed ulteriori screen di navigazione al fine di andare verso l’obiettivo illustrato qui ovvero la creazione di una struttura di navigazione di un’app mobile Flutter pronta ad essere riempita di contenuti.

Se ti interessa e ti piace l’idea lascia un commento, mi aiuterà per scrivere il prossimo articolo!

Marco

Lascia un commento