MDC-101 Flutter: nozioni di base sui componenti dei materiali

1. Introduzione

Che cosa sono Material Design e la libreria Material Flutter?

Material Design è un sistema per creare prodotti digitali audaci e belli. Unendo stile, branding, interazione e movimento in un insieme coerente di principi e componenti, i team di prodotto possono realizzare il loro massimo potenziale di progettazione.

La libreria Material Flutter include widget Flutter che implementano i design dei componenti Material Design (MDC in breve) per creare un'esperienza utente coerente su app e piattaforme. Man mano che il sistema Material Design si evolve, questi componenti vengono aggiornati per garantire un'implementazione coerente e perfetta al pixel, rispettando gli standard di sviluppo front-end di Google.

In questo codelab, creerai una pagina di accesso utilizzando diversi componenti di Material Flutter.

Cosa creerai

Questo codelab è il primo di quattro che ti guideranno nella creazione di un'app chiamata Shrine, un'app di e-commerce che vende abbigliamento e articoli per la casa. Mostrerà come personalizzare i componenti in modo che riflettano qualsiasi brand o stile utilizzando Material Flutter.

In questo codelab, creerai una pagina di accesso per Shrine che contiene:

• Un'immagine del logo di Shrine
• Il nome dell'app (Shrine)
• Due campi di testo, uno per inserire un nome utente e l'altro per una password
• Due pulsanti

Android	iOS

Questo è il primo di quattro codelab che ti guidano nella creazione di un'app per un prodotto chiamato Shrine. Ti consigliamo di svolgere tutti i codelab in ordine, poiché le attività vengono eseguite passo dopo passo.I codelab correlati sono disponibili all'indirizzo: MDC-102 Flutter: Material Structure and Layout MDC-103 Flutter: Material Theming con colore, forma, elevazione e tipo MDC-104 Flutter: Material Advanced Components

Componenti e sottosistemi Material Flutter in questo codelab

• Campo di testo
• Pulsante
• Ondulazione dell'inchiostro (una forma visiva di feedback per gli eventi touch)

In questo codelab utilizzerai i componenti predefiniti forniti da Material Flutter. Imparerai a personalizzarli in MDC-103: Material Design Theming with Color, Shape, Elevation and Type.

Come valuteresti il tuo livello di esperienza con lo sviluppo Flutter?

Principiante Intermedio Avanzato

2. Configura l'ambiente di sviluppo Flutter

Per completare questo lab, hai bisogno di due software: l'SDK Flutter e un editor.

Puoi eseguire il codelab utilizzando uno qualsiasi di questi dispositivi:

• Un dispositivo fisico Android o iOS connesso al computer e impostato sulla modalità sviluppatore.
• Il simulatore iOS (richiede l'installazione degli strumenti Xcode).
• L'emulatore Android (richiede la configurazione in Android Studio).
• Un browser (Chrome è necessario per il debug).
• Come applicazione desktop Windows, Linux o macOS. Devi sviluppare sulla piattaforma in cui prevedi di eseguire il deployment. Pertanto, se vuoi sviluppare un'app desktop Windows, devi svilupparla su Windows per accedere alla catena di build appropriata. Esistono requisiti specifici del sistema operativo trattati in dettaglio su docs.flutter.dev/desktop.

3. Scarica l'app iniziale del codelab

Scarica il progetto iniziale

Il progetto iniziale si trova nella directory material-components-flutter-codelabs-101-starter/mdc_100_series.

...o clonalo da GitHub

Per clonare questo codelab da GitHub, esegui i seguenti comandi:

git clone https://github.com/material-components/material-components-flutter-codelabs.git
cd material-components-flutter-codelabs/mdc_100_series
git checkout 101-starter

Per ulteriore assistenza: Clonazione di un repository da GitHub

Il ramo giusto

I codelab MDC-101-104 si basano l'uno sull'altro. Quindi, quando finisci il codice per 101, questo diventa il codice iniziale per 102. Il codice è suddiviso in diversi rami e puoi elencarli tutti con questo comando:

git branch --list

Per visualizzare il codice completato, consulta il ramo 102-starter_and_101-complete.

Apri il progetto ed esegui l'app

1. Apri il progetto nell'editor che preferisci.
2. Segui le istruzioni per "Eseguire l'app" nella sezione Guida rapida: prova per l'editor che hai scelto.

Operazione riuscita. Il codice iniziale per la pagina di accesso di Shrine dovrebbe essere in esecuzione sul tuo dispositivo. Dovresti vedere il logo di Shrine e il nome "Shrine" appena sotto.

Android	iOS

Diamo un'occhiata al codice.

I TODO nel codice includono numeri (101, 102 e così via), che si riferiscono al numero del codelab in cui implementerai la modifica.

Widget in login.dart

Apri login.dart. Deve contenere:

import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  // TODO: Add text editing controllers (101)
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView(
          padding: const EdgeInsets.symmetric(horizontal: 24.0),
          children: <Widget>[
            const SizedBox(height: 80.0),
            Column(
              children: <Widget>[
                Image.asset('assets/diamond.png'),
                const SizedBox(height: 16.0),
                const Text('SHRINE'),
              ],
            ),
            const SizedBox(height: 120.0),
            // TODO: Remove filled: true values (103)
            // TODO: Add TextField widgets (101)
            // TODO: Add button bar (101)
          ],
        ),
      ),
    );
  }
}

Tieni presente che contiene un'istruzione import e due nuove classi:

• L'istruzione import consente di utilizzare la libreria Material in questo file.
• La classe LoginPage rappresenta l'intera pagina visualizzata nel simulatore.
• La funzione build() della classe _LoginPageState controlla la modalità di creazione di tutti i widget nella nostra UI.

Per saperne di più sulle basi della UI di Flutter e su cosa sono i widget, puoi fare un tour del framework dei widget di Flutter o seguire il codelab Scrivi la tua prima app Flutter, parte 1.

4. Aggiungere widget TextField

Per iniziare, aggiungiamo due campi di testo alla nostra pagina di accesso, in cui gli utenti inseriscono il nome utente e la password. Utilizzeremo il widget TextField, che mostra un'etichetta mobile e attiva un'increspatura al tocco.

I campi di testo di Material sono stati notevolmente migliorati per aumentare la flessibilità del brand, con miglioramenti supportati da un'ampia ricerca sull'esperienza utente (UX) per una migliore usabilità e un design visivo.

Scopri di più sui nuovi campi di testo nell'articolo sulle linee guida di Material.

Questa pagina è strutturata principalmente con un ListView, che dispone i suoi elementi secondari in una colonna scorrevole. Inseriamo i campi di testo di seguito.

Aggiungere i widget TextField

Aggiungi due nuovi campi di testo e uno spazio dopo const SizedBox(height: 120.0).

// TODO: Add TextField widgets (101)
// [Name]
TextField(
  decoration: const InputDecoration(
    filled: true,
    labelText: 'Username',
  ),
),
// spacer
const SizedBox(height: 120.0),
// [Password]
TextField(
  decoration: const InputDecoration(
    filled: true,
    labelText: 'Password',
  ),
  obscureText: true,
),

I campi di testo hanno un campo decoration: che accetta un widget InputDecoration. Il campo filled: indica che lo sfondo del campo di testo è leggermente riempito per aiutare gli utenti a riconoscere l'area di tocco o di selezione del campo di testo. Il valore obscureText: true del secondo campo di testo sostituisce automaticamente l'input digitato dall'utente con dei punti elenco, il che è appropriato per le password.

Salva il progetto (con la combinazione di tasti Comando + S), che esegue un Hot Reload.

A questo punto dovresti visualizzare una pagina con due campi di testo per nome utente e password. Guarda l'animazione dell'etichetta mobile:

Android	iOS

Le funzionalità di TextField includono:

• L'aspetto del widget TextField può essere modificato facilmente. Per il campo di decorazione, specifica un valore InputDecoration.
• Per impostazione predefinita, il campo di testo mostra il feedback tattile (chiamato increspatura o "inchiostro").
• FormField è un widget simile che dispone di funzionalità speciali per l'incorporamento di campi in Moduli.
• Documentazione della classe TextField

5. Aggiungere pulsanti

A questo punto, aggiungeremo due pulsanti alla nostra pagina di accesso: "Annulla" e "Avanti". Utilizzeremo due tipi di widget pulsante: TextButton ed ElevatedButton.

Scegliere tra pulsanti di testo e pulsanti in rilievo

Perché non visualizzare semplicemente due pulsanti rialzati? Ogni tipo di pulsante indica quali azioni sono più importanti di altre.

Un layout deve contenere un singolo pulsante in evidenza. In questo modo, è chiaro che gli altri pulsanti hanno meno importanza. Questo pulsante ben visibile rappresenta l'azione che vogliamo che gli utenti intraprendano per avanzare nell'app.

L'azione che vorremmo meno che intraprendessero è l'annullamento dell'accesso. Poiché un pulsante rialzato attira l'attenzione con il suo aspetto in rilievo, deve essere utilizzato per l'azione più importante. Al contrario, il pulsante di testo normale a sinistra appare meno enfatizzato.

Scopri di più sulla gerarchia dei pulsanti nell'articolo Pulsanti delle linee guida di Material.

Aggiungere OverflowBar

Dopo i campi di testo, aggiungi OverflowBar ai figli di ListView:

// TODO: Add button bar (101)
OverflowBar(
  alignment: MainAxisAlignment.end,
  // TODO: Add a beveled rectangular border to CANCEL (103)
  children: <Widget>[
    // TODO: Add buttons (101)
  ],
),

OverflowBar dispone i suoi elementi secondari in una riga.

Aggiungere i pulsanti

Quindi, aggiungi due pulsanti all'elenco di children di OverflowBar:

    // TODO: Add buttons (101)
    TextButton(
      child: const Text('CANCEL'),
      onPressed: () {
        // TODO: Clear the text fields (101)
      },
    ),
    // TODO: Add an elevation to NEXT (103)
    // TODO: Add a beveled rectangular border to NEXT (103)
    ElevatedButton(
      child: const Text('NEXT'),
      onPressed: () {
    // TODO: Show the next page (101) 
      },
    ),

Perché abbiamo blocchi vuoti per i campi onPressed?

Se passassimo null, i pulsanti verrebbero disattivati. Non ci sarebbe alcun feedback sul tocco e non potremmo farci un'idea precisa del loro comportamento attivato. L'utilizzo di blocchi vuoti impedisce la loro disattivazione.

Per ulteriori informazioni sui pulsanti e sulle relative interazioni, vedi Aggiungere interattività all'app.

Salvare il progetto. Sotto l'ultimo campo di testo, dovresti vedere due pulsanti:

Android	iOS

OverflowBar si occupa del layout per te. Dispone i pulsanti orizzontalmente, in modo che vengano visualizzati uno accanto all'altro.

Se tocchi un pulsante, si avvia un'animazione a increspatura di inchiostro, senza che accada altro. Aggiungiamo funzionalità alle funzioni onPressed: anonime, in modo che il pulsante Annulla cancelli i campi di testo e il pulsante Avanti chiuda la schermata:

Aggiungere TextEditingController

Per consentire la cancellazione dei valori dei campi di testo, aggiungeremo TextEditingControllers per controllare il testo.

Subito sotto la dichiarazione della classe _LoginPageState, aggiungi i controller come variabili final.

  // TODO: Add text editing controllers (101)
  final _usernameController = TextEditingController();
  final _passwordController = TextEditingController();

Nel campo controller: del primo campo di testo, imposta _usernameController:

// TODO: Add TextField widgets (101)
// [Name]
TextField(
  controller: _usernameController,

Nel campo controller: del secondo campo di testo, imposta ora _passwordController:

// TODO: Add TextField widgets (101)
// [Password]
TextField(
  controller: _passwordController,

Edit onPressed

Aggiungi un comando per cancellare ogni controller nella funzione onPressed: di TextButton:

    // TODO: Clear the text fields (101)
    _usernameController.clear();
    _passwordController.clear();

Salvare il progetto. Ora, quando digiti qualcosa nei campi di testo, se premi Annulla, ogni campo viene cancellato di nuovo.

Questo modulo di accesso è in buone condizioni. Passiamo al resto dell'app Shrine.

Vivace

Per chiudere questa visualizzazione, vogliamo rimuovere (o eliminare) questa pagina (che Flutter chiama route) dallo stack di navigazione.

Navigator gestisce uno stack di route proprio come UINavigationController su iOS. Spostare un percorso lo posiziona in cima alla pila. L'estrazione dello stack rimuove l'itinerario aggiunto più di recente. In app.dart della nostra app, la chiamata initialRoute: '/login', aggiunge la schermata di accesso al navigatore.

Scopri di più su percorsi e navigazione in Nozioni di base sulla navigazione.

Nella funzione onPressed: di ElevatedButton, estrai l'ultima route da Navigator:

        // TODO: Show the next page (101) 
        Navigator.pop(context);

Infine, apri home.dart e imposta resizeToAvoidBottomInset su false in Scaffold:

    return Scaffold(
      // TODO: Add app bar (102)
      // TODO: Add a grid view (102)
      body: Center(
        child: Text('You did it!'),
      ),
      // TODO: Set resizeToAvoidBottomInset (101)
      resizeToAvoidBottomInset: false,
    );

In questo modo, l'aspetto della tastiera non altera le dimensioni della home page o dei relativi widget.

È tutto. Salvare il progetto. Fai clic su "Avanti".

Ce l'hai fatta!

Android	iOS

Questa schermata è il punto di partenza del nostro prossimo codelab, su cui lavorerai in MDC-102.

Informazioni sui pulsanti:

• Oltre a TextButton ed ElevatedButton, sono disponibili OutlinedButton, FloatingActionButton IconButton e altri ancora.

6. Complimenti!

Abbiamo aggiunto campi di testo e pulsanti e non abbiamo quasi dovuto considerare il codice di layout. I componenti Material per Flutter hanno molto stile e possono essere posizionati sullo schermo quasi senza sforzo.

L'app MDC-101 completata è disponibile nel ramo 102-starter_and_101-complete.

Puoi testare la tua versione dell'app rispetto a quella nel ramo.

Passaggi successivi

I campi di testo e i pulsanti sono due componenti principali del sistema Material, ma ce ne sono molti altri. Puoi esplorare il resto nel catalogo dei widget dei componenti Material.

In alternativa, vai a MDC-102: Material Design Structure and Layout per scoprire i componenti trattati in MDC-102 per Flutter.

Prossimo codelab

Sono riuscito a completare questo codelab con un ragionevole dispendio di tempo e impegno

Totalmente d'accordo D'accordo Indifferente In disaccordo Totalmente in disaccordo

Vorrei continuare a utilizzare i componenti Material in futuro

Totalmente d'accordo D'accordo Indifferente In disaccordo Totalmente in disaccordo