Créer une application mobile avec Flutter

Objectif

Comment importer un fichier Dart dans un autre fichier Dart.
Comment implémenter un bouton et comment afficher une boîte de dialogue.

Présentation

Flutter est un framework d’interface utilisateur mobile gratuit et open source créé par Google et publié en mai 2017. Il vous permet de créer une application mobile native avec une seule base de code.
Flutter peut être utilisé dans différents IDE. Les deux principaux éditeurs de code pour développer avec cette technologie sont Android Studio (IntelliJ) et VS Code.

Premier exemple Flutter

Nous commençons avec un exemple simple
Code et exécution

Modification du code par

Créer une application mobiles avec Flutter

Exécution du code

Créer une application mobiles avec Flutter

Explication

import 'package:flutter/material.dart': Vous devez commencer par importer le package Flutter,Material Design est un langage visuel standard que Flutter utilise pour fournir des widgets.
void main(): Comme vous le savez, chaque programme Dart doit avoir une fonction void main(), et Flutter ne fait pas exception.
La méthode main() utilise la notation de flèche (=>) qui vous permet de raccourcir les fonctions.

Les fonctions dans Dart

Notre application MyApp hérite de Widget Stateless, ce qui en fait également un widget.
runApp(): La méthode runApp() est une instance de widget, ce qui en fait la racine de l’arborescence qui démarre notre application.
Center: La méthode runApp() prend un widget comme argument. Dans notre cas, Center , qui possède un autre widget enfant, Text.
Nous avons plusieurs widgets imbriqués, comme Center et Text.
Text: Le widget Text permet d’afficher un texte du côté utilisateur. Il est hautement personnalisable, vous pouvez modifier la couleur et la taille de la police.
En réalité, les widgets peuvent avoir un ou plusieurs enfants, et cela se produit tout le temps et peut être très profond.
Les widgets Flutter peuvent avoir leurs propres propriétés, comme textDirection, style et color .

Le but principal de runApp() est d’attacher le widget donné à l’écran.

Nous avons créé une application Flutter simple qui affiche un texte “Bienvenue Flutter!” au centre de l’écran.

Deuxième exemple Flutter

Créer une application mobiles avec Flutter

Explication

Les méthodes décrits en haut ne seront pas cités ici
Notre application MyApp hérite de Widget Stateless, ce qui est un autre widget.
Le widget Scaffold (qui veut dire échafaudage), issu de la bibliothèque Material, fournit une barre d’application par défaut, un titre et un corps qui contient l’arborescence de widgets de l’écran d’accueil.
La sous-arborescence du widget peut être assez complexe. De plus, Scaffold est généralement utilisé comme sous-widget de MaterialApp, il remplit l’espace disponible et occupe la totalité de la fenêtre ou de l’écran de l’appareil.
La tâche principale d’un widget consiste à fournir une méthode build() qui décrit comment afficher le widget en fonction d’autres widgets de niveau inférieur.
La fonction build() renvoie ce qui doit être affiché à l’écran.
MaterialApp est le widget le plus couramment utilisé pour le développement Flutter, qui est conforme aux concepts de Material Design.
BuildContext est utilisé pour localiser un widget particulier dans une arborescence et chaque widget possède son propre BuidContext. En fait, chaque widget dans Flutter est créé par la méthode build(), qui prend BuildContext comme argument.
Le corps de cet exemple consiste en un widget Center contenant un widget enfant Text. Le widget Center aligne sa sous-arborescence au centre de l’écran.

Utiliser plusieurs fichiers dans Flutter

Diviser votre projet Flutter en plusieurs fichiers permet de garder une vue d’ensemble de votre code.
Par conséquent, dans le dossier lib, créez un nouveau fichier appelé homepage.dart avec le contenu suivant, et modifiez votre widget MyApp dans le main.dart.

Pagehomepage.dart

Créer une application mobiles avec Flutter

Page main.dart

Créer une application mobiles avec Flutter

Exécution du code

Créer une application mobiles avec Flutter

Changer le style du Widget Text ‘Bienvenue Flutter‘ avec les propriétés suivantes:

Créer une application mobile avec Flutter

Applications

Remplacez le widget Text dans votre page HomePage par un ElevatedButton

Dans Flutter, le widget ElevatedButton est l’un des boutons de Material Design dont la caractéristique est que l’élévation augmente lorsque l’utilisateur appuie dessus.

Afficher la solution pour ElevatedButton

Créer une application mobile avec Flutter

Si vous appuyez sur le bouton, vous devriez voir la sortie dans votre DEBUG VsCode CONSOLE.

Enveloppez votre widget crée précédemment dans un nouveau widget

La propriété body du PageHomePage widget définit le widget enfant. Ce widget enfant contient plusieurs autres widgets.
Extrayez ces widgets pour que le code soit plus facile à lire. Par conséquent, déplacez le widget affecté à la bodypropriété dans un widget personnalisé appelé MaBouton.
Mettez ce widget dans le fichier homepage.dart , Dart n’exige pas que chaque widget soit dans son propre fichier.

Afficher la solution pour MaBouton

Créer une application mobile avec Flutter

Afficher la solution pour PageHomePage


class PageHomePage extends StatelessWidget {
  final String title;
  // ignore: use_key_in_widget_constructors
  const PageHomePage(this.title);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: const MaBouton(),
    );
  }
}

Afficher un message (snackbar) une fois le bouton (crée précédemment) appuyé

Maintenant, vous voulez afficher un message une fois que vous avez cliqué sur le bouton ElevatedButton.
Selon la spécification de conception matérielle, un snack-bar est un bref message sur les processus d’application en bas de l’écran.
SnackBar est un widget Flutter qui vous permet d’afficher temporairement un message contextuel dans votre application. Il apparaît généralement en bas de l’écran de l’application.
Dans les applications mobiles, SnackBar est un petit composant d’interface qui fournit une brève réponse après une action de l’utilisateur. Il apparaît en bas de l’écran et disparaît automatiquement lorsque le temps est écoulé ou lorsque l’utilisateur interagit ailleurs sur l’écran.
SnackBar fournit également un bouton en option pour effectuer une action. Par exemple, annuler une action que vous venez d’effectuer ou réessayer l’action que vous venez d’effectuer si elle échoue.

Afficher la solution pour PageHomePage


SnackBar _createSnackBar() {
    var snackbar = SnackBar(
      content: const Text('Bienvenu sur notre site apcpedagogie.com'),
      action: SnackBarAction(
        label: 'Supprimer',
        onPressed: () {},
      ),
    );
    return snackbar;
  }

Afficher la solution pour MaBouton


class MaBouton extends StatelessWidget {
  const MaBouton({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
            onPressed: () {
              ScaffoldMessenger.of(context).showSnackBar(_createSnackBar());
            },
            child: const Text('Afficher une boîte de dialogue'),
          ),
        ],
      ),
    );
  }

Les cours

Les cours

Flutter

Créer une application mobile avec Flutter