Squelette d'une application

Contexte

Flutter repose sur des widgets qui sont des composants plus ou moins complexes qui affichent de l'information à l'écran. Lorsque vous développez en Flutter, « tout est widget ». Dans la documentation de Flutter, les widgets sont décrits comme étant construits à partir d'un framework moderne inspiré de React. L'idée centrale est de construire l'interface utilisateur à partir de widgets, plus celle-ci est élaborée, plus il y aura de widgets.

Le développeur va construire une interface avec des widgets. Ces derniers peuvent être un espacement, une vue ou une gesture. Ils ont des propriétés comme la hauteur, la largeur, la couleur de fond, etc. Ils ont un ou des enfants. Le widget se reconstruit lorsque son état change. Flutter fait une comparaison de l'état A (avant) et l'état B (après). Lors de la reconstruction du module, le nombre de modifications sera réduit au minimum. La vitesse et la qualité du rendu sont optimisées.

Comme les poupées russes, les widgets vont s'imbriquer les uns dans les autres. On va composer des vues à l'aide de widgets.

Dans ce cours, nous verrons une application de base, générée à la création d'un projet flutter. Nous verrons ensuite la construction d'un widget principal, la structure de l'application et les widgets de base.

MéthodeCréation d'une application de base

Étape 1 : après le lancement d'Android Studio, nous allons créer un nouveau projet Flutter.

On choisit : « Create New Flutter Project ». À l'écran suivant, il faut faire « Next ».

Étape 2 : ensuite on donne un nom au projet. Il faut écrire son nom en minuscule.

  • Le champ « Project location » permet de définir l'emplacement où sera stocké le projet sur le disque dur,

  • Le champ « Description » permet de faire une rapide description du projet,

  • Les champs des langages de programmation : Kotlin pour Android et Swift pour iOS,

  • Pour « Plateforms », on coche iOS et Android.

On valide. Android Studio va nous finaliser le projet.

On arrive alors sur l'écran suivant :

La fenêtre principale est divisée en deux : à gauche l'arborescence du projet et à droite le fichier sélectionné.

Les fichiers qui contiennent du code « Dart » se trouvent dans le répertoire lib. Ces fichiers ont l'extension .dart. Au départ, le projet comprend uniquement le fichier : main.dart. Toute l'application est dans ce fichier.

L'application retourne le widget « MaterialApp ». Ce widget contient les propriétés suivantes :

  • title : pour le site titre de l'application.

  • thème : pour choisir un thème en appelant un autre widget.

  • home : permet de spécifier le widget de départ de notre application. Dans le cas présent, c'est MyHomePage qui définit le widget principal de l'application. Ensuite, nous allons le supprimer pour recréer notre propre widget.

Étape 3 : pour lancer l'application, on sélectionne l'émulateur ou l'appareil, puis on clique sur le petit triangle vert à droite de main.dart.

L'arbre d'un widget

  • Un widget est présenté sous la forme d'un arbre,

  • Un widget peut contenir un ou plusieurs widgets enfants,

  • Le widget enfant sera contenu par un autre widget.

On peut représenter l'application de base par le diagramme suivant :

Les widget « StateLessWidget »

Les « StatelessWidget » sont des widgets basiques sur lesquels on ne peut pas interagir comme un texte, une image, etc. Leur valeur ne va pas changer une fois construit.

Un widget se définit en appelant son constructeur à partir du mot clé class. Le widget container s'appelle avec son nom puis ouvrant une parenthèse et fermant la parenthèse : Container().

Un widget est composé de plusieurs propriétés dont l'une s'appelle child. Avec cette dernière, on pourra définir le widget imbriqué à l'intérieur.

ExempleAppel du widget Center

1
Center(
2
 child: Text("Bonjour",
3
 textAlign: TextAlign.center,
4
 style: TextStyle(fontStyle: FontStyle.italic),),
5
),

On construit un widget Center qui a un fils : un widget Text. Ce dernier a deux propriétés : textAlign et style. Ce dernier appelle un widget TextStyle.

Méthode

On pourra aussi créer nos propres widgets. La création de widget va permettre de réutiliser notre code à différents endroits de notre application.

La définition d'un widget va commencer par le mot clé class en étant étendu avec un stateLessWidget. Le nom widget commencera par une majuscule : « BasicsPage ». Le widget est défini dans un bloc entre accolades. À l'intérieur de ce bloc, on a une fonction obligatoire : la fonction build. Pour la définir, il faut taper le mot clé build. Cette fonction va retourner le widget et donc un élément de l'interface utilisateur. Dans notre widget MaterialApp, on va mettre au niveau de la propriété home.

Exemple

1
class MyApp extends StatelessWidget {
2
 // This widget is the root of your application.
3
 @override
4
 Widget build(BuildContext context) {
5
   return MaterialApp(
6
     title: 'Flutter Demo',
7
     theme: ThemeData(
8
       primarySwatch: Colors.blue,
9
     ),
10
     home: BasicsPage()  // appel du widget créé dessous
11
   );
12
 }
13
}
14
15
class BasicsPage extends StatelessWidget{
16
 @override
17
 Widget build(BuildContext context) {
18
  return
19
 }
20
}
La fonction build va construire le widget. Le constructeur prend en paramètres un argument de type « BuildContext ». Il décrit l'interface de ce widget, soit le contexte dans lequel ce widget est créé : sa hauteur, sa largeur, la plateforme, etc.
Grâce à ce contexte, on pourra faire appel à MediaQuery pour en définir les propriétés, comme la taille. On peut aussi récupérer la plateforme (iOS ou Android).
Dans notre constructeur, on retournera un widget Container().
1
@override
2
Widget build(BuildContext context) {
3
 var size = MediaQuery.of(context).size;
4
 var platform = Theme.of(context).platform;
5
 print("size : $size");
6
 print("plateform : $platform");
7
return Container(
8
  height: 10,
9
    width: 10,
10
);
11
}
DéfinitionScaffold
Le scaffold est le squelette de l'application, il est présent dans toutes les applications. Il comprend les widgets suivants avec les propriétés :
  • appBar : la barre du haut
  • body : le corps de notre application
  • floatingButtonAction : un bouton en bas
  • drawer : un menu sur le côté
DéfinitionAppBar
L'appBar est un widget qui vient se situer en haut de l'écran. En général, il contient le titre de l'application. Il peut aussi accueillir des boutons.
1
return  Scaffold(
2
  appBar: AppBar(
3
    title: Text("Le titre de l'application"),
4
    actions:<Widget> [
5
      IconButton(onPressed: pressedAction, icon:Icon(Icons.nat))
6
    ], ),
7
);
DéfinitionLe drawer
Le drawer est un menu caché qui glisse horizontalement, il est déplié avec l'icône « Hamburger », 3 traits. Pour construire le drawer, le widget Drawer est appelé, il a comme enfant un widget Column que nous verrons plus tard dans le cours qui contiendra l'entête du menu et la liste des choix avec des widgets Text.
1
drawer: Drawer(
2
 child:Column(
3
   children: [
4
     DrawerHeader(child: Text('menu de navigation')
5
     ),
6
     Text("Onglet 1"),
7
     Text("Onglet 2"),
8
     Text("Onglet 3"),],
9
 )
10
),
Exemple
DéfinitionLe FloatingActionButton
Le floatingActionButton est un widget qui est un bouton flottant en bas à gauche, on peut le retrouver dans certaines applications de messagerie. En appuyant dessus, on crée un nouveau message, c'est ce bouton qui va exécuter une méthode.
1
),
2
floatingActionButton: FloatingActionButton(
3
 	onPressed: pressedAction,
4
 backgroundColor: Colors.red,
5
 	child: Icon(Icons.add),
6
),
Exemple
FondamentalRécapitulatif du Scaffold
1
@override
2
Widget build(BuildContext context) {
3
return  Scaffold(
4
  appBar: AppBar(
5
    title: Text("Le titre de l'application"),
6
    actions:<Widget> [
7
      IconButton(onPressed: pressedAction, icon:Icon(Icons.photo))
8
    ], ),
9
10
  drawer: Drawer(
11
    child:Column(
12
      children: [
13
        DrawerHeader(child: Text('menu de navigation')
14
        ),
15
        Text("Onglet 1"),
16
        Text("Onglet 2"),
17
        Text("Onglet 3"),
18
      ],
19
    )
20
  ),
21
  floatingActionButton: FloatingActionButton(
22
    onPressed: pressedAction,
23
    backgroundColor: Colors.red,
24
    child: Icon(Icons.add),
25
  ),
26
);
27
}
DéfinitionLe widget Center et container
Le widget Center a pour rôle de centrer son enfant (child). En mettant le widget container en tant qu'enfant de center, il sera au centre de notre écran.
1
body:Center(
2
   child:Container(
3
     height: 80,
4
     width: 100,
5
     color: Colors.red,
6
   )
7
)
Ici, on centre le container dans le body du Scaffold. Les propriétés height et width permettent de définir la taille du container.