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 belli e audaci. 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 (in breve MDC) 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 perfetta in pixel e coerente, in conformità agli 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 dei quattro codelab che ti guideranno nella creazione di un'app chiamata Shrine, un'app di e-commerce che vende abbigliamento e articoli per la casa. Scoprirai come personalizzare i componenti per adattarli a qualsiasi brand o stile con Material Flutter.

In questo codelab, creerai una pagina di accesso per il Santuario contenente:

• Immagine del logo di Santuario
• Il nome dell'app (Shrine)
• Due campi di testo, uno per inserire il nome utente e l'altro per la password
• Due pulsanti

Android	iOS

Questo è il primo dei 4 codelab che ti guideranno nella creazione di un'app per un prodotto chiamato Santuario. Ti consigliamo di eseguire tutti i codelab in sequenza man mano che le attività vengono eseguite passo passo.I codelab correlati sono disponibili all'indirizzo: MDC-102 Flutter: struttura e layout dei materiali MDC-103 Flutter: temi Material con Colore, Forma, Elevazione e Tipo MDC-104 Flutter: componenti Material Advanced

Componenti e sottosistemi di Material Flutter in questo codelab

• Campo di testo
• Pulsante
• Onde 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: Material Design Theming con Colore, Forma, Elevazione e Tipo.

Come valuteresti il tuo livello di esperienza nello sviluppo di Flutter?

Principiante Livello intermedio Eccellente

2. Configura l'ambiente di sviluppo di Flutter

Per completare questo lab sono necessari due software: l'SDK Flutter e l'editor.

Puoi eseguire il codelab utilizzando uno 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 (per il debug è richiesto Chrome).
• Come applicazione desktop Windows, Linux o macOS. Devi svilupparle sulla piattaforma in cui prevedi di eseguire il deployment. Quindi, se vuoi sviluppare un'app desktop per Windows, devi sviluppare su Windows per accedere alla catena di build appropriata. Alcuni requisiti specifici del sistema operativo sono descritti in dettaglio all'indirizzo 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 clonarlo da GitHub

Per clonare questo codelab da GitHub, esegui questi 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

Ramo destro

I codelab dalla versione MDC-101 alla 104 si basano uno sull'altro. Una volta completato il codice per il codice 101, questo diventa il codice di avvio per il codice 102. Il codice è suddiviso in diversi rami e puoi elencarli tutti con questo comando:

git branch --list

Per visualizzare il codice completato, vai alla filiale 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 "Esegui l'app". in Inizia: prova l'editor che hai scelto.

Operazione riuscita. Il codice di avvio per la pagina di accesso di Santuario dovrebbe essere in esecuzione sul tuo dispositivo. Dovresti vedere il logo del Santuario e il nome "Santuario" immediatamente sotto.

Android	iOS

Diamo un'occhiata al codice.

I TODO nel codice includono numeri (101, 102 e così via), che si riferiscono al numero 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)
          ],
        ),
      ),
    );
  }
}

Nota 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 il modo in cui vengono creati tutti i widget nella nostra UI.

Per saperne di più sulle nozioni di base dell'interfaccia utente di Flutter e su cosa sono i widget, puoi fare un tour del framework dei widget Flutter o svolgere il codelab Write Your First Flutter App, parte 1.

4. Aggiungi widget Campo di testo

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

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 design visivo.

Scopri di più sui nuovi campi di testo nel loro articolo sulle linee guida sui materiali.

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

Aggiungere i widget TextField

Aggiungi due nuovi campi di testo e un 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,
),

Ogni campo di testo ha un campo decoration: che utilizza un widget InputDecoration. Il campo filled: indica che lo sfondo del campo di testo è leggermente riempito per aiutare le persone a riconoscere l'area del tocco o del touch target del campo di testo. Il valore obscureText: true del secondo campo di testo sostituisce automaticamente l'input digitato dall'utente con un elenco puntato, che è appropriato per le password.

Salva il progetto (con la sequenza di tasti: command + s), che esegue un Hot Reload.

Dovrebbe essere visualizzata una pagina con due campi di testo per Nome utente e Password. Guarda l'animazione dell'etichetta mobile:

Android	iOS

Le funzionalità TextField includono:

• L'aspetto del widget TextField può essere modificato facilmente. Per il campo Decorazione, specifica un valore InputDecoration.
• Per impostazione predefinita, nel campo di testo viene visualizzato il feedback al tocco (denominato "ondulazione" o "inchiostro").
• FormField è un widget simile con funzionalità speciali per incorporare campi in Moduli.
• Documentazione della classe TextField

5. Aggiungere pulsanti

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

Scegliere tra pulsanti di testo e pulsanti con privilegi più elevati

Perché non mostrare semplicemente due pulsanti di livello superiore? Ogni tipo di pulsante indica quali azioni sono più importanti delle 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 maggiormente che gli utenti intraprendano per avanzare nell'app.

L'azione che vorremmo che intraprendessero è l'annullamento dell'accesso. Poiché un pulsante rialzato attira l'attenzione con il suo aspetto in rilievo, è consigliabile utilizzarlo per l'azione più importante. In confronto, il pulsante di testo normale a sinistra ha un aspetto meno enfatizzato.

Scopri di più sulla gerarchia dei pulsanti nell'articolo Pulsanti delle Linee guida sui materiali.

Aggiungi OverflowBar

Dopo i campi di testo, aggiungi OverflowBar agli elementi secondari del 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 relativi figli 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 trasmettiamo un valore null, i pulsanti vengono disattivati. Non ci sarebbero stati feedback da inviare e non siamo riusciti a farci un'idea del comportamento di attivazione della funzionalità. L'utilizzo di blocchi vuoti ne impedisce la disattivazione.

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

Salvare il progetto. Sotto l'ultimo campo di testo, dovrebbero essere visualizzati due pulsanti:

Android	iOS

OverflowBar gestisce il layout al posto tuo. I pulsanti vengono posizionati orizzontalmente in modo da visualizzarli uno accanto all'altro.

Se tocchi un pulsante viene avviata un'animazione a onde di inchiostro, senza che ciò accada. Aggiungiamo funzionalità alle funzioni onPressed: anonime, in modo che il pulsante Annulla cancelli i campi di testo e il pulsante Avanti chiuda la schermata:

Aggiungi TextEditingController

Per consentire la cancellazione dei campi di testo aggiungeremo TextEditingControllers per controllare il loro 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, ora imposta _passwordController:

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

Modifica su Pressati

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, premi Annulla per cancellare di nuovo ogni campo.

Questo modulo di accesso è in buone condizioni. Facciamo proseguire i nostri utenti al resto dell'app Santuario.

Vivace

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

Navigator gestisce uno stack di route proprio come UINavigatorController su iOS. Se spingi un percorso, questo viene posizionato in cima alla pila. Lo scoppio della pila rimuove il percorso aggiunto più di recente. In app.dart della nostra app, se chiami initialRoute: '/login',, la schermata di accesso viene aggiunta al navigatore.

Per saperne di più su percorsi e navigazione, consulta Nozioni di base di navigazione.

Nella funzione onPressed: di ElevatedButton, apri il percorso più recente dal Navigatore:

        // 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 ti assicuri che l'aspetto della tastiera non alteri le dimensioni della home page o dei relativi widget.

È tutto. Salvare il progetto. Procedi e fai clic su "Avanti".

Ce l'hai fatta!

Android	iOS

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

Pulsanti Informazioni:

• Oltre a TextButton e ElevatedButton, ci sono OutliningButton, FloatingActionButton IconButton e altri.

6. Complimenti!

Abbiamo aggiunto campi di testo e pulsanti e difficilmente abbiamo dovuto prendere in considerazione il codice del layout. I componenti dei materiali di Flutter sono molto eleganti e possono essere posizionati sullo schermo con facilità.

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

Puoi testare la tua versione dell'app confrontandola con quella del ramo.

Passaggi successivi

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

In alternativa, vai a MDC-102: Material Design Structured and Layout per saperne di più sui componenti trattati in MDC-102 per Flutter.

Codelab successivo

Ho completato questo codelab con una quantità di tempo e di sforzi ragionevoli

Totalmente d'accordo D'accordo Né chiara, né confusa In disaccordo Totalmente in disaccordo

Vorrei continuare a utilizzare Material Components in futuro

Totalmente d'accordo D'accordo Né chiara, né confusa In disaccordo Totalmente in disaccordo