Tutorial appBase Flutter

Partiamo dall’inizio e cerchiamo di capire insieme come funziona l’app realizzata come un template per creare altre app anche molto diverse da questa, per utilizzo per creare tutte le app che realizzo per i miei progetti e per quelli dei clienti. L’app è disponbile nel canale github di WebTechAndBiz con licenza MIT.

Su internet ci sono diversi progetti e articoli che riguardano app Flutter che gestiscono login, registrazione e qualche altra funzione utile. Ad esempio questo https://github.com/HeriHer1/UTS_Kel1PemogramanLanjutan che è un nuovissimo progetto (Novembre 2021), mentre questa è un pò più datata https://medium.com/@afegbua/flutter-thursday-13-building-a-user-registration-and-login-process-with-provider-and-external-api-1bb87811fd1d. Basta cercare su google “flutter login subscribe”; qui ci sono diversi altri esempi https://flutterawesome.com/tag/login-screen/.

L’app che vediamo in questo tutorial è la base che utilizzo per realizzare app Flutter per i miei progetti e per i progetti dei clienti; l’obiettivo era quello di avere una struttura creata da zero sulla quale costruire funzionalità personalizzate ed è stata realizzata unendo e approfondendo diversi tutorial e la documentazione Flutter ufficiale.

main.dart

Il codice del file main.dart inizia con le importazioni

import 'package:baseappahome/src/auth/http/forgottenpassword_http.dart';
import 'package:baseappahome/src/auth/http/logout_http.dart';
import 'package:baseappahome/src/auth/http/subscribe_http.dart';
import 'package:baseappahome/src/config/app_config.dart';
import 'package:baseappahome/src/screens/scheda.dart';
import 'package:baseappahome/src/screens/homegrid.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart';
import 'package:shared_preferences/shared_preferences.dart'; //#per memorizzare le credenziali
import 'src/auth/http/login_http.dart';

Importiamo il file scheda.dart per gestire la scheda di dettaglio, la homegrid.dart per gestire la versione più semplice della home formata da una griglia di immagini e testi cliccabili. A parte login_http.dart che gestisce il form di login su un Webservice realizzato in WordPress, e il resto sono le importazioni di dipendenze e librerie necessarie per far funzionare le diverse versioni dell’app. Come tutte le app realizzate su questa piattaforma, anche questa inizia dal file main.dart e in particolare dal metodo main()

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

Che in questo caso richiama lo StatelessWidget widget BaseApp().

Lo StatelessWidget BaseApp()

Offre una MateriaApp() che accetta in ingresso le routes dell’app (ricavate da mynavigationroutes) e home nel quale è impostato lo StatefulWidget widget CoverPage().

La classe CoverPage() mostra un’immagine a tutto schermo; l’immagine è in /assets/images/_auth. Nel widget sono presenti alcune righe di codice commentate (perchè di default non vengono utilizzate) ma costituiscono una struttura per eventualmente inserire una barra in alto nella quale mostrare il title e un testo da inserire al centro della pagina.

E’ presente in basso a destra anche un floatingActionButton() utilizzato attualmente per navigare verso la schermata di login (attraverso la funzione _navigateToLogin()) ma che eventualmente può redirezionare verso altri screen, quando è richiesto un comportamento diverso. La funzione _navigateToLogin() presente nello State della CoverPage() ottiene username e password (oppure l’authtokenlogin) memorizzati nel dispositivo e naviga verso la route “signin_http” che corrisponde alla classe LoginHttp() (presente nel file _auth/login_http.dart) passando come parametro la ScreenArgumentsLoginFormParameters() che contiene username e password (o l’authtokenlogin). L’authtokenlogin è un rilasciato dal webservice quando l’accesso viene effettuato per la prima volta utilizzando username e password. Tutte le volte successive, verrà utilizzato authtokenlogin (se già presente nel dispositivo). Se l’accesso va in errore con authtokenlogin, viene aperto un popup che chiede di reinserire le credenziali e svuota authtokenlogin memorizzato. Questa doppia possibilità (memorizzare username e password oppure l’authtokon) nel codice è indicata con questo commento //#changeif-3412.

Questa riga imposta l’url dell’immagine mostrata nella copertina. Adesso vediamo le rotte di navigazione:

//# questo prepara la route "signin_http"
//# che viene usata dopo (al click del bottone)
//# per andare alla Login
final mynavigationroutes = [
  MyNavigationRoutes(
    name: 'Sign in with HTTP',
    route: '/signin_http',
    builder: (context) => LoginHttp(), //# sta dentro login_http.dart
  ),
  MyNavigationRoutes(
    name: 'Sign out with HTTP',
    route: '/signout_http',
    builder: (context) => LogoutHttp(), //# sta dentro logout_http.dart
  ),
  MyNavigationRoutes(
    name: 'Subscribe in with HTTP',
    route: '/subscribe_http',
    builder: (context) => SubscribeHttp(),
  ),
  MyNavigationRoutes(
    name: 'Forgottenpassword in with HTTP',
    route: '/forgottenpassword_http',
    builder: (context) => ForgottenpasswordHttp(),
  ),
  MyNavigationRoutes(
    name: 'Home',
    route: '/home',
    builder: (context) => HomeRoute(), //# sta dentro login_http.dart
  ),
  MyNavigationRoutes(
    name: 'Scheda',
    route: '/scheda',
    builder: (context) => Scheda(), //# sta dentro login_http.dart
  ),
];

Lo StatefulWidget LoginHttp()

src/auth/http/login_http.dart

Nello State vengono preparati i controller per i campi username e password:

  TextEditingController _usernameController = TextEditingController();
  TextEditingController _passwordController = TextEditingController();

e le funzioni per effettuare la login _loginWithUserPassword() e _loginWithAuthToken() che controllano le credenziali username e password (oppure l’authtoken) e in caso di risposta positiva dal Webservice, redirezionano alla home dell’app, entrambe passando un oggetto futureHomedata che contiene il risultato della login, e i dati per popolare la home. Il parametro viene passato attraverso la classe ScreenArgumentsFutureLoginFormDataParameters(futureHomedata).

Nel build() verifichiamo se un authtoken è già presente (memorizzato nel dispositivo) e lo passiamo alla funzione per accedere con il solo authtoken e cioè la _loginWithAuthToken(). Se invece l’authtoken è vuoto, mostriamo la Scaffold che mostra un’immagine in alto, un campo per username e uno per la password, e un bottone per accedere.

Sotto mostriamo due bottoni (strutturati sulla stessa riga con un Container, una Row e due Expanded) per aprire lo screen di recupero password e quello per la registrazione.

Ancora più in basso abbiamo un Divider (una linea per dividere esteticamente le diverse sezioni nello screen) con il terzo e ultimo bottone, assolutamente opzionale, che viene posizionato in fondo alla schermata per effettuare l’accesso senza registrazione.

Lo StatefulWidget ForgottenpasswordHttp() per recuperare la password dimenticata

Lo stateful widget ForgottenpasswordHttp() è utilizzato per recuperare la password dimenticata, lo stateful widget SubscribeHttp() serve invece a gestire il form per effettuare la registrazione di un nuovo utente. L’accesso senza registrazione viene invece effettuato in maniera simile alla login automatica con authtoken (_loginWithGeneratedAuthToken()).

Lo StatelessWidget HomeRoute()

src/screens/homegridstatic.dart

Questo widget viene raggiunto dopo il click sul bottone Accedi e una risposta positiva dal Webservice che controlla l’autenticazione. Riceve infatti il futureHomedata (generato dalla chiamata al Webservice di login) come parametro nel build() e restituisce una Scaffold() il cui body è costituito da un FutureBuilder che crea una struttura a blocchi con immagini e testi cliccabili utilizzando GridView. Quando un blocco viene cliccato, il GestureDetector() se ne accorge e redireziona verso la scheda di dettaglio passando come parametro la classe ScreenArgumentsSchedaParameters() che contiene l’authentication-token e l’identificativo dell’item cliccato.

    Navigator.pushNamed(
        context,
        '/scheda',
        arguments: ScreenArgumentsSchedaParameters(value.authenticationToken, value.IDitem)
    );

Questo è quello che succede nel HomeGrid() che è il widget più semplice per la creazione di homepage in quest’app. L’altro widget, che permette di realizzare homepage più complesse, è HomeGrid.dart.

Lo StatefulWidget Scheda()

src/screens/scheda.dart

Contiene un metodo build() che, come la home, restituisce una Scaffold() con AppBar() per mostrare una barra in alto con un bottone per tornare indietro e la possibilità di impostare un titolo che di default in questa app base è vuoto. Utilizzando i parametri passati alla scheda, viene effettuata una chiamata al Webservice che scarica le informazioni da mostrare nella scheda di dettaglio.

    final schedaArgs = ModalRoute.of(context)!.settings.arguments as ScreenArgumentsSchedaParameters;
    futureDatascheda = fetchDatascheda(schedaArgs.authenticationToken, schedaArgs.id);

Questo genera un oggetto futureDatascheda che contiene i dati restituiti dal Webservice; il body è quindi costituito da un FutureBuilder che crea una struttura tipicamente utile per le schede di dettaglio, formata da un widget ListView() che combina un titolo, una descrizione e un’immagine nel file scheda.dart.

---