Les widgets: Importance et utilité.

Bienvenue à tous et à toutes dans cet article qui nous aidera à comprendre l'un des concepts fondamentaux du développement avec Flutter : les Widgets.

Comme mentionné dans l'article précédent, les widgets sont les éléments de base pour construire les interfaces utilisateur sur Flutter.

Les widgets dans Flutter sont organisés d'une manière telle que chacun d'eux est lié à son widget parent. Cette arborescence commence par un widget appelé widget racine(root), qui est généralement MaterialApp ou CupertinoApp.

MaterialApp vs CuppertinoApp

La difference entre ces deux widgets est que cupertinoApp est utilisé pour construire des interfaces utilisateurs IOS tandis que Materialapp est généralement utilisé pour développer des interfaces sur Android.

Pour cet article on va se concentrer sur le développement d'application Android.

Scaffold

Scaffold est l'une des widgets les plus utile dans FLutter. Scaffold offre une arborescence de widget enfants qui inclus beaucoup de fonctionnalité demandé sur application modernes tels que :

     - le widget Appbar: une zone en haut de l'interface où on peut mettre un titre ou des icones.
     - le widget Body: contient les éléments essentiels de ton application: le texte, les images, etc.
     - Le widget BottomNavigationBar: contient un menu de navigation entre les différentes interfaces.
     - Le widget Snackbar: utilisé pour afficher des messages de succés ou d'erreur à l'utilisateur.

Exemple:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     home: Scaffold(
       appBar: AppBar(
         title: Text('Exemple de Scaffold'),
       ),
       body: Center(
         child: Text('Hello, World!'),
       ),
     ),
   );
 }
}

Maintenant que nous connaissons les éléments de base des widgets, nous pouvons personnaliser notre application selon nos besoins d'interface en ajoutant des images (Image.network(...)), du texte (Text(...)), etc.

Références:

Flutter Widgets, consulté le 02/03/2024.

Scaffold class,consulté le 02/03/2024. 

Librairie Materia, consulté le 02/03/2024