Créer une application mobile avec Flutter

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.
• Toute application Flutter doit inclure les éléments de base suivants :

  1. Appel de la bibliothèque material.dart utilisée dans la conception.

     • La bibliothèque material.dart fournit des widgets et des outils spécifiques au matériau, conformes aux directives de conception de Material Design de Google.
     • Elle est essentielle pour la création d'interfaces utilisateur attrayantes et cohérentes.

  2. La fonction main () pour démarrer le projet.

     • La fonction main () est le point d'entrée de l'application Flutter. C'est là que le programme commence son exécution. Dans l'exemple donné, la fonction main appelle runApp, qui est le point de départ pour exécuter l'application.

  3. La fonction runApp qui est le déclencheur (le moteur) de la conception.

     • La fonction runApp prend en argument le widget racine de l'application.

Premier exemple Flutter

• Nous commençons avec un exemple simple

• Code et exécution

  Modification du code par

  

  Exécution du code

  

• 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

• 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.

Troisième exemple

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Exemple'),
        ),
        body: const Center(
          child: Text('Hello, Flutter!'),
        ),
      ),
    );
  }
}

Interprétation

• Importation de packages :

import 'package:flutter/material.dart';

@override

Dans Flutter, l'@override annotation est utilisée pour indiquer qu'une méthode d'une sous-classe est destinée à remplacer une méthode de sa superclasse.
• Cette annotation permet de détecter les erreurs au moment de la compilation si la méthode de la sous-classe ne remplace pas correctement une méthode de la superclasse.

class Animal {
  void makeSound() {
    print('Some generic sound');
  }
}

class Dog extends Animal {
  @override
  void makeSound() {
    print('Woof! Woof!');
  }
}

void main() {
  var dog = Dog();
  dog.makeSound(); // This will print 'Woof! Woof!'
}

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.

  1. Pagehomepage.dart

     

  2. Page main.dart

     

  3. Exécution du code

     

  4. Changer le style du Widget Text

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

     

Applications

1. 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
   
   Si vous appuyez sur le bouton, vous devriez voir la sortie dans votre DEBUG VsCode CONSOLE.

2. 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

   

   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(),
       );
     }
   }
   

3. 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'),
             ),
           ],
         ),
       );
     }