appBase Flutter - come aggiungere un nuovo screen

Impariamo ad utilizzare l’app base rilasciata con licenza MIT su github.

Creare il file .dart nella cartella adatta (nel caso, creare anche la cartella).

Creare il file .dart da zero; con AndroidStudio basta cliccare col tasto destro del mouse sulla cartella nella quale inserire il file .dart e selezionare New->Dart file e impostare un nome.

Creare la navigation route nelle prime righe del file main.dart

  MyNavigationRoutes(
    name: '[testo]',
    route: '/[identificativo]',
    builder: (context) => [classe],
  ),

Creare lo ScreenArguments per passare parametri navigando verso la pagina

class ScreenArguments[nomeclasse]FormParameters { //# questa serve per passare alla [classe] i dati memorizzati
  final String [varibile1];
  final String [variabile2];

  ScreenArguments[nomeclasse]FormParameters(this.[variabile1], this.[variabile2]);
}

Da inserire in fondo nel main.dart insieme agli altri ScreenArguments nella sezione //# — ScreenArgumentsFormParameters.

Creare il bottone per navigare verso la nuova pagina

Ad esempio questo è il bottone per navigare verso la pagina di Registrazione dalla pagina di Login.

Expanded(
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.end,
    children: [
      Container(
        child: TextButton(
          child: const Text(
            'Registrati',
            style: TextStyle(
                color: Colors.black
            ),
          ),
          style: TextButton.styleFrom(
            backgroundColor: Colors.blue,
            minimumSize: Size(MediaQuery.of(context).size.width/2-20,40)
          ),
          onPressed: () async {
            Navigator.pushNamed(
                context,
                '/subscribe_http',
                arguments: ScreenArgumentsSubscribeFormParameters()
            );
          },
        ),
      ),
    ],
  ),
),

Utilizzo sempre una classe ScreenArguments anche se al momento non ci sono parametri da passare, in modo che le strutture siano tutte uguali e si differenzino solo nei casi in cui ci sono o non ci sono parametri da passare.

---

Testiamo insieme le indicazioni riportate qui sopra per creare lo screen “Password dimenticata”.

Creare il file .dart nella cartella adatta (nel caso, creare anche la cartella)

In questo caso di esempio abbiamo già la cartella (src/auth/) quindi inseriamo un nuovo file .dart che per questo test chiamiamo forgottenpassword_http.dart

Dato che lo screen sarà formato da un’immagine, un campo di testo (per digitare l’email) e un bottone, copio il contenuto da login_http.dart così da avere una base da modificare. Dato che ho copiato da login, sostituisco tutte le stringhe “Login” con “Forgottenpassword” e le “login” con “forgottenpassword”. In questo caso sostuisco anche il codice Navigator con un più semplice codice per mostrare un popup e tornare indietro:

                        _showDialog("Controlla la tua email");
                        Navigator.pop(context);

E’ in questa fare che vengono effettuate tutte le modifiche e nuove implementazioni del caso per sviluppare tutto ciò di cui abbiamo bisogno; ma non è lo scopo di questo articolo, quindi procediamo a testare gli altri punti.

Creare la navigation route nelle prime righe del file main.dart

Andiamo alle prime righe del file main.dart e inseriamo questo codice in mynavigationroutes:

  MyNavigationRoutes(
    name: 'Forgottenpassword in with HTTP',
    route: '/forgottenpassword_http',
    builder: (context) => ForgottenpasswordHttp(),
  ),

Creare lo ScreenArguments per passare parametri navigando verso la pagina

Prendiamo quindi il codice suggerito in alto in questo articolo e sostituiamo i placeholder fra parentesi quadre.

class ScreenArgumentsForgottenpasswordFormParameters { //# questa serve per passare alla [classe] i dati memorizzati

  ScreenArgumentsForgottenpasswordFormParameters();
}

In questo caso non abbiamo bisogno di parametri quindi li eliminiamo e modifichiamo solo il nome della classe e la andiamo ad inserire come ultima in //# — ScreenArgumentsFormParameters.

Nel codice del file forgottenpassword_http.dart (che abbiamo copiato da login_http.dart per questo esempio) dovremo sostituire il nome della classe ScreenArguments in ScreenArgumentsForgottenpasswordFormParameters che non passa alcun parametro.

Creare il bottone per navigare verso la nuova pagina

L’ultimo step è inserire un bottone che permetta di navigare verso lo screen appena creato.

Quindi in main.dart importimao il file forgottenpassword_http.dart e andiamo ad aggiungere il bottone nel punto dell’app nel quale vogliamo il bottone, che in questo caso è lo screen login_http.dart.

Come children del widget Row andiamo ad inserire il bottone:

Expanded(
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Container(
        child: TextButton(
          child: const Text(
            'Password dimenticata',
            style: TextStyle(
                color: Colors.black
            ),
          ),
          style: TextButton.styleFrom(
              backgroundColor: Colors.blue,
              minimumSize: Size(MediaQuery.of(context).size.width/2-20,40)
          ),
          onPressed: () async {
            Navigator.pushNamed(
                context,
                '/forgottenpassword_http',
                arguments: ScreenArgumentsForgottenpasswordFormParameters()
            );
          },
        ),
      ),
    ],
  ),
),

Da notare che nel onPressed() è stato inserito il Navigator() che punta proprio alla route creata sopra e cioè la forgottenpassword_http passando come parametro la classe ScreenArgumentsForgottenpasswordFormParameters();