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 la creazione di prodotti digitali audaci e accattivanti. 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 di 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 a livello di pixel, in conformità con 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. Ti mostrerà come personalizzare i componenti per riflettere 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 guideranno nella creazione di un'app per un prodotto chiamato Shrine. Ti consigliamo di eseguire tutti i codelab in ordine, poiché le attività vengono eseguite passo dopo passo.I codelab correlati sono disponibili all'indirizzo: MDC-102 Flutter: struttura e layout di Material MDC-103 Flutter: temi di Material con colore, forma, elevazione e tipo MDC-104 Flutter: componenti avanzati Material

Componenti e sottosistemi di Material Flutter in questo codelab

• Campo di testo
• Pulsante
• Ripple di 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: temi di Material Design con colore, forma, elevazione e tipo.

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

Principiante Intermedio Esperto

2. Configurare l'ambiente di sviluppo di Flutter

Per completare questo laboratorio, sono necessari due software: Flutter SDK e un editor.

Puoi eseguire il codelab utilizzando uno di questi dispositivi:

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

3. Scaricare l'app di base del codelab

Scarica il progetto di avvio

Il progetto di avvio 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: Clonare un repository da GitHub

Il ramo giusto

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

git branch --list

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

Aprire il progetto ed eseguire l'app

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

Operazione riuscita. Il codice di avvio 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. Dovrebbe contenere quanto segue:

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 ulteriori informazioni sulle nozioni di base dell'interfaccia utente di Flutter e sui widget, puoi consultare la sezione Tour del framework dei widget di Flutter o eseguire il codelab Scrivere la prima app Flutter, parte 1.

4. Aggiungere widget TextField

Per iniziare, aggiungeremo due campi di testo alla nostra pagina di accesso, in cui gli utenti inseriranno il nome utente e la password. Utilizzeremo il widget TextField, che mostra un'etichetta mobile e attiva un ripple touch.

I campi di testo di Material sono stati notevolmente aggiornati per migliorare 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 delle 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 spaziatore 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 ciascuno 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 destinazione del tocco del campo di testo. Il valore obscureText: true del secondo campo di testo sostituisce automaticamente l'input digitato dall'utente con dei punti, il che è appropriato per le password.

Salva il progetto (con la sequenza di tasti: comando + s) che esegue un ricaricamento rapido.

Ora dovresti vedere una pagina con due campi di testo per nome utente e password. Dai un'occhiata all'animazione dell'etichetta mobile:

Android	iOS

Le funzionalità di TextField includono:

• L'aspetto del widget TextField può essere modificato facilmente. Per il campo decoration, specifica un valore InputDecoration.
• Per impostazione predefinita, il campo di testo mostra il feedback touch (chiamato ripple o "inchiostro").
• FormField è un widget simile che ha funzionalità speciali per l'incorporamento di campi nei moduli.
• Documentazione della classe TextField

5. Aggiungere pulsanti

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

Scegliere tra pulsanti di testo e pulsanti con elevazione

Perché non visualizzare semplicemente due pulsanti con elevazione? 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 in evidenza rappresenta l'azione che vogliamo che i nostri utenti intraprendano per avanzare nella nostra app.

L'azione che vorremmo che intraprendessero meno è l'annullamento dell'accesso. Poiché un pulsante con elevazione attira l'attenzione con il suo aspetto rialzato, deve essere utilizzato per l'azione più importante. Al contrario, il pulsante di testo semplice a sinistra sembra 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 agli elementi secondari 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 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 chiara del loro comportamento abilitato. L'utilizzo di blocchi vuoti impedisce la disattivazione.

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

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

Android	iOS

OverflowBar gestisce il lavoro di layout per te. Posiziona i pulsanti orizzontalmente, in modo che appaiano uno accanto all'altro.

Quando tocchi un pulsante, viene avviata un'animazione ripple di inchiostro, senza che accada nient'altro. Aggiungiamo funzionalità alle funzioni anonime onPressed:, 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 _passwordController:

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

Modificare onPressed

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

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

Salva 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. Facciamo avanzare i nostri utenti al resto dell'app Shrine.

Pop

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

Navigator gestisce uno stack di route proprio come UINavigationController su iOS. L'operazione di push di una route la inserisce nella parte superiore dello stack. L'operazione di pop dello stack rimuove la route aggiunta più di recente. In app.dart della nostra app, la chiamata initialRoute: '/login', aggiunge la schermata di accesso a Navigator.

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

Nella funzione onPressed: di ElevatedButton, estrai la route più recente 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 modifica le dimensioni della home page o dei relativi widget.

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

Ce l'hai fatta.

Android	iOS

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

Informazioni sui pulsanti:

• Oltre a TextButton e ElevatedButton, esistono OutlinedButton, FloatingActionButton IconButton e altri.

6. Complimenti.

Abbiamo aggiunto campi di testo e pulsanti e non abbiamo dovuto considerare il codice di layout. I componenti di 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 all'app in quel ramo.

Passaggi successivi

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

In alternativa, vai a MDC-102: struttura e layout di Material Design 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

Molto d'accordo D'accordo Neutro Non d'accordo Molto in disaccordo

Mi piacerebbe continuare a utilizzare i componenti di Material in futuro

Molto d'accordo D'accordo Neutro Non d'accordo Molto in disaccordo