Créer une application mobile avec Flutter
Sommaire
- 1- Objectif
- 2- Présentation
- 3- Premier exemple Flutter
- 3.1- Code et exécution
- 3.2- Explication
- 4- Deuxième exemple Flutter
- 4.1- Explication
- 5- Utiliser plusieurs fichiers dans Flutter
- 6- Applications
- 6.1- Remplacez le widget
Text
dans votre page HomePage par unElevatedButton
- 6.2- Enveloppez votre widget crée précédemment dans un nouveau widget
- 6.3- Afficher un message (snackbar) une fois le bouton (crée précédemment) appuyé
- 6.3.1- Cours Flutter
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
-
Explication
import 'package:flutter/material.dart'
: Vous devez commencer par importer le packageFlutter,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. - 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
etText
. 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
etcolor
. - Le but principal de runApp() est d’attacher le widget donné à 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 WidgetStateless
, 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.
- Changer le style du Widget
Text
‘Bienvenue Flutter‘ avec les propriétés suivantes: -
Applications
-
Remplacez le widget
Text
dans votre page HomePage par unElevatedButton
- 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. - 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 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.
Modification du code par
Exécution du code
Nous avons créé une application Flutter simple qui affiche un texte “Bienvenue Flutter!” au centre de l’écran.
Pagehomepage.dart
Page main.dart
Exécution du code
Afficher la solution pour ElevatedButton
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(),
);
}
}
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'),
),
],
),
);
}