MDC-101 Flutter : Principes de base de Material Components (MDC) (Flutter)

Que sont Material Design et Material Components pour Flutter ?

Material Design est un système permettant de créer des produits numériques intéressants et attrayants. Les équipes produit peuvent ainsi réaliser leurs meilleurs graphismes en combinant style, branding, interactions et animations selon des principes communs et des composants harmonieux.

Material Components pour Flutter (MDC-Flutter) met une bibliothèque de composants au service du graphisme et de l'ingénierie afin d'assurer une expérience utilisateur homogène, quelles que soient les applications et les plates-formes. Ces composants sont mis à jour lorsque le système Material Design évolue afin garantir une mise en œuvre homogène au pixel près et de respecter les normes de développement front-end de Google. MDC est également disponible pour Android, iOS et le Web.

Dans cet atelier de programmation, vous allez créer une page de connexion à l'aide de plusieurs composants de MDC-Flutter.

Objectifs de l'atelier

Cet atelier de programmation est le premier d'une série de quatre qui vous aideront à créer une application d'e-commerce appelée Shrine, dédiée à la vente de vêtements et d'articles pour la maison. Il vous montrera comment personnaliser les composants pour représenter n'importe quelle marque ou style à l'aide de MDC-Flutter.

Dans cet atelier de programmation, vous créerez une page de connexion pour Shrine contenant :

  • Image du logo Shrine
  • Le nom de l'application (Shrine)
  • Deux champs de texte, un pour le nom d'utilisateur et l'autre pour un mot de passe
  • Deux boutons

Android

iOS

Composants MDC utilisés dans cet atelier

  • Zone de texte
  • Bouton
  • Ripple (une forme de retour visuel pour les événements tactiles)

Comment évalueriez-vous votre niveau d'expérience en développement avec Flutter ?

Débutant Intermédiaire Expert

Avant de commencer

Pour commencer à développer des applications mobiles avec Flutter, vous devez :

  1. télécharger et installer le SDK Flutter ;
  2. Mettre à jour votre PATH avec le SDK Flutter ;
  3. installer Android Studio avec les plug-ins Flutter et Dart, ou votre éditeur préféré ;
  4. installer un émulateur Android, un simulateur iOS (nécessite un Mac avec Xcode) ou utiliser un appareil physique.

Pour plus d'informations sur l'installation de Flutter, consultez la section Premiers pas : Installation. Pour configurer un éditeur, consultez la section Premiers pas : Configurer un éditeur. Lorsque vous installez un émulateur Android, n'hésitez pas à utiliser les options par défaut, comme un téléphone Pixel 3 doté de la dernière image système. Il est conseillé, mais pas obligatoire, d'activer l'accélération de la VM. Une fois les quatre étapes ci-dessus effectuées, vous pouvez revenir à l'atelier de programmation. Pour cet atelier de programmation, vous avez seulement à installer Flutter pour une plate-forme (Android ou iOS).

Vérifier que l'état de votre SDK Flutter est correct

Avant de poursuivre cet atelier de programmation, assurez-vous que l'état de votre SDK est correct. Si le SDK Flutter a déjà été installé, utilisez flutter upgrade pour vous assurer qu'il s'agit de la dernière version.

 flutter upgrade

L'exécution de flutter upgrade lance automatiquement celle de flutter doctor.. S'il s'agit d'une nouvelle installation de Flutter sans mise à niveau nécessaire, exécutez flutter doctor manuellement. Le système vous indique si vous devez installer des dépendances pour finaliser la configuration. Vous pouvez ignorer les options qui ne vous sont pas utiles (par exemple, Xcode si vous n'avez pas l'intention d'effectuer de développement pour iOS).

 flutter doctor

Questions fréquentes

Télécharger le projet de départ

Le projet de départ se trouve dans le répertoire material-components-flutter-codelabs-101-starter/mdc_100_series.

… ou cloner l'atelier depuis GitHub

Pour cloner cet atelier de programmation à partir de GitHub, exécutez les commandes suivantes :

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

Configurer votre projet

Les instructions suivantes supposent que vous utilisez Android Studio (IntelliJ).

Ouvrir le projet

1. Ouvrez Android Studio.

2. Si l'écran de bienvenue s'affiche, cliquez sur Open an existing Android Studio project (Ouvrir un projet Android Studio existant).

3. Accédez au répertoire material-components-flutter-codelabs/mdc_100_series et cliquez sur "Open" (Ouvrir). Le projet devrait s'ouvrir. Vous pouvez ignorer toutes les erreurs qui s'affichent dans Dart Analysis jusqu'à ce que vous ayez créé un premier build du projet.

4. Si vous y êtes invité :

  • Installez les mises à jour de la plate-forme et des plug-ins ou FlutterRunConfigurationType.
  • Si le SDK Dart ou Flutter n'est pas configuré, définissez le chemin d'accès au SDK Flutter pour le plug-in Flutter.
  • Configurez les frameworks Android.
  • Cliquez sur "Get dependencies" (Obtenir les dépendances) ou sur "Run 'flutter package gets'" (Exécuter "flutter packages get").

Ensuite, redémarrez Android Studio.

Exécuter l'application de départ

Les instructions suivantes supposent que vous effectuez les tests sur un émulateur ou un appareil Android. Vous pouvez également les effectuer sur un simulateur ou un appareil iOS si Xcode est installé.

1. Sélectionnez l'appareil ou l'émulateur. Si l'émulateur Android ne s'exécute pas déjà, sélectionnez Tools > Android > AVD Manager (Outils > Android > AVD Manager) pour créer un appareil virtuel et lancer l'émulateur. Si un AVD existe déjà, vous pouvez démarrer l'émulateur directement à partir du sélecteur d'appareil dans Android Studio, comme indiqué à l'étape suivante. Pour le simulateur iOS, s'il ne s'exécute pas déjà, lancez-le sur votre ordinateur de développement en sélectionnant Flutter Device Selection > Open iOS Simulator (Sélection d'appareils Flutter > Ouvrir le simulateur iOS).

2. Démarrez votre application Flutter :

  • Recherchez le menu déroulant "Flutter Device Selection" (Sélection des appareils Flutter) en haut de l'écran de votre éditeur, puis sélectionnez l'appareil (par exemple, iPhone SE ou Android SDK créé pour <version>).
  • Appuyez sur l'icône de lecture ().

Parfait ! Le code de départ de la page de connexion de Shrine doit s'exécuter dans votre simulateur. Le logo Shrine devrait s'afficher au dessus du nom "Shrine".

Android

iOS

Examinons le code.

Widgets dans login.dart

Ouvrez le fichier login.dart. Il doit contenir les éléments suivants :

import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget {
  @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: EdgeInsets.symmetric(horizontal: 24.0),
          children: <Widget>[
            SizedBox(height: 80.0),
            Column(
              children: <Widget>[
                Image.asset('assets/diamond.png'),
                SizedBox(height: 16.0),
                Text('SHRINE'),
              ],
            ),
            SizedBox(height: 120.0),
            // TODO: Wrap Username with AccentColorOverride (103)
            // TODO: Remove filled: true values (103)
            // TODO: Wrap Password with AccentColorOverride (103)
            // TODO: Add TextField widgets (101)
            // TODO: Add button bar (101)
          ],
        ),
      ),
    );
  }
}

// TODO: Add AccentColorOverride (103)

Notez qu'il contient une instruction import et deux nouvelles classes :

  • L'instruction import ajoute Material Components à ce fichier.
  • La classe LoginPage représente toute la page affichée dans le simulateur.
  • La fonction build() de la classe _LoginPageState contrôle la création de tous les widgets de notre interface utilisateur.

Pour commencer, nous allons ajouter à notre page de connexion deux champs de texte où les utilisateurs doivent saisir leur nom d'utilisateur et leur mot de passe. Nous utiliserons le widget TextField, qui affiche un libellé flottant et active une animation Ripple en cas d'appui.

Cette page est principalement structurée à l'aide d'un élément ListView, qui organise ses enfants dans une colonne à faire défiler. Plaçons des champs de texte en bas de l'écran.

Ajouter les widgets TextField

Ajoutez deux champs de texte et un espace après SizedBox(height: 120.0).

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

Les champs de texte comportent chacun un champ decoration: qui utilise un widget InputDecoration. Le champ filled: indique que l'arrière-plan du champ de texte est teinté pour aider les utilisateurs à identifier la zone cible tactile dans le champ de texte. La valeur obscureText: true du deuxième champ de texte remplace automatiquement l'entrée saisie par des puces, ce qui est préférable pour les mots de passe.

Enregistrez votre projet (avec le raccourci Cmd+S) pour effectuer une actualisation à chaud.

Une page s'affiche alors avec deux champs de texte, pour le nom d'utilisateur et le mot de passe. Regardez l'animation du libellé flottant :

Android

iOS

Nous allons ensuite ajouter deux boutons sur notre page de connexion : "Cancel" (Annuler) et "Next" (Suivant). Nous allons utiliser deux types de widgets de bouton MDC : le FlatButton (appelé "Text button" [Bouton texte] dans les consignes Material Design) et le bouton RaisedButton (appelé "Contained button" [Bouton en conteneur]).

Ajouter l'élément ButtonBar

Après les champs de texte, ajoutez ButtonBar aux enfants de ListView :

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

L'élément ButtonBar dispose ses enfants sur une ligne.

Ajouter les boutons

Ensuite, ajoutez deux boutons à la liste des enfants (children) de la barre de boutons :

    // TODO: Add buttons (101)
    FlatButton(
      child: 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)
    RaisedButton(
      child: Text('NEXT'),
      onPressed: () {
    // TODO: Show the next page (101)
      },
    ),

Enregistrez le projet. Sous le dernier champ de texte, deux boutons doivent s'afficher :

Android

iOS

L'élément ButtonBar gère la mise en page. Il dispose les boutons horizontalement, de sorte qu'ils s'affichent l'un à côté de l'autre, en fonction de la marge définie dans le thème ButtonTheme actuel. (Vous trouverez plus d'informations à ce sujet dans l'atelier de programmation MDC-103.)

Lorsque vous appuyez sur un bouton, une animation "tâche d'encre" est déclenchée, mais rien d'autre ne se produit. Ajoutons une fonctionnalité aux fonctions onPressed: anonymes, de sorte que le bouton "Cancel" efface les champs de texte et que le bouton "Next" fasse disparaître l'écran :

Ajouter des éléments TextEditingController

Pour pouvoir effacer les valeurs des champs de texte, nous allons ajouter des éléments TextEditionController qui en contrôleront le texte.

Juste sous la déclaration de la classe _LoginPageState, ajoutez ces contrôleurs en tant que variables final.

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

Dans le champ controller: du premier champ de texte, définissez la valeur _usernameController :

// [Name]
TextField(
  controller: _usernameController,

Dans le champ controller: du second champ de texte, définissez maintenant _passwordController :

// [Password]
TextField(
  controller: _passwordController,

Modifier la fonction onPressed

Ajoutez une commande pour réinitialiser chaque contrôleur dans la fonction onPressed: de l'élément FlatButton :

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

Enregistrez le projet. Maintenant, lorsque vous saisissez du texte dans les zones de texte, le bouton "Cancel" efface à nouveau chaque champ.

Cette page de connexion prend une bonne tournure. Il est temps de permettre aux utilisateurs de passer à la suite de l'application Shrine

Action "Pop"

Pour ignorer cette vue, nous devons effectuer une action "pop" (c'est-à-dire supprimer) cette page (appelée route dans Flutter) pour la retirer de la pile de navigation.

Dans la fonction onPressed: de l'élément RaisedButton, effectuez une action "pop" sur la route la plus récente dans le navigateur :

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

Enfin, ouvrez home.dart et définissez resizeToAvoidBottomInset sur false dans 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,
    );

Ceci évite que l'apparence du clavier ne modifie la taille de la page d'accueil ou de ses widgets.

Et voilà ! Enregistrez le projet. Cliquez sur "Suivant".

Bravo !

Android

iOS

Cet écran constitue le point de départ de notre prochain atelier de programmation, sur lequel vous travaillerez dans MDC-102.

Nous avons ajouté des champs de texte et des boutons sans nous soucier de coder la mise en page. Les éléments Material Components pour Flutter disposent de nombreux styles et peuvent être positionnés très facilement dans l'écran.

Étapes suivantes

Les champs de texte et les boutons sont deux composants essentiels du système Material Design, mais il en existe bien d'autres. Vous pouvez également explorer les autres widgets de la bibliothèque des Material Components de Flutter.

Vous pouvez également accéder à l'atelier MDC-102 : Structure et mise en page Material Design pour en savoir plus sur les composants abordés dans MDC-102 pour Flutter.

Atelier de programmation suivant

La réalisation de cet atelier de programmation m'a demandé un temps et des efforts raisonnables

Tout à fait d'accord D'accord Ni d'accord, ni pas d'accord Pas d'accord Pas du tout d'accord

Je souhaite continuer à utiliser Material Components

Tout à fait d'accord D'accord Ni d'accord, ni pas d'accord Pas d'accord Pas du tout d'accord