Flutter - Introduction aux widgets

Comme nous l'avons appris dans le chapitre précédent, les widgets sont tout dans le framework Flutter. Nous avons déjà appris à créer de nouveaux widgets dans les chapitres précédents.

Dans ce chapitre, laissez-nous comprendre le concept réel derrière la création des widgets et les différents types de widgets disponibles dans le framework Flutter .

Laissez - nous vérifier le Bonjour tout le monde de l' application MyHomePage widget. Le code à cet effet est comme indiqué ci-dessous -

class MyHomePage extends StatelessWidget { 
   MyHomePage({Key key, this.title}) : super(key: key); 
   
   final String title; 
   @override 
   Widget build(BuildContext context) {
      return Scaffold( 
         appBar: AppBar(title: Text(this.title), ), 
         body: Center(child: Text( 'Hello World',)),
      );
   }
}

Ici, nous avons créé un nouveau widget en étendant StatelessWidget .

Notez que StatelessWidget ne nécessite qu'une seule génération de méthode pour être implémentée dans sa classe dérivée. La méthode de construction obtient l'environnement de contexte nécessaire pour créer les widgets via le paramètre BuildContext et renvoie le widget qu'elle crée.

Dans le code, nous avons utilisé title comme l'un des arguments du constructeur et également utilisé Key comme autre argument. Le titre est utilisé pour afficher le titre et Key est utilisé pour identifier le widget dans l'environnement de construction.

Ici, la méthode de construction appelle la méthode de construction de Scaffold , qui à son tour appelle la méthode de construction d' AppBar et Center pour créer son interface utilisateur.

Enfin, la méthode de génération Center appelle la méthode de génération Text .

Pour une meilleure compréhension, la représentation visuelle de la même chose est donnée ci-dessous -

Visualisation de la construction du widget

Dans Flutter , les widgets peuvent être regroupés en plusieurs catégories en fonction de leurs fonctionnalités, comme indiqué ci-dessous -

  • Widgets spécifiques à la plateforme
  • Widgets de mise en page
  • Widgets de maintenance d'état
  • Widgets de base / indépendants de la plateforme

Parlons maintenant de chacun d'eux en détail.

Widgets spécifiques à la plateforme

Flutter a des widgets spécifiques à une plate-forme particulière - Android ou iOS.

Les widgets spécifiques à Android sont conçus conformément aux directives de conception matérielle d'Android OS. Les widgets spécifiques à Android sont appelés widgets Material .

Les widgets spécifiques à iOS sont conçus conformément aux directives de l'interface humaine d'Apple et sont appelés widgets Cupertino .

Certains des widgets matériels les plus utilisés sont les suivants:

  • Scaffold
  • AppBar
  • BottomNavigationBar
  • TabBar
  • TabBarView
  • ListTile
  • RaisedButton
  • FloatingActionButton
  • FlatButton
  • IconButton
  • DropdownButton
  • PopupMenuButton
  • ButtonBar
  • TextField
  • Checkbox
  • Radio
  • Switch
  • Slider
  • Sélecteurs de date et d'heure
  • SimpleDialog
  • AlertDialog

Certains des widgets Cupertino les plus utilisés sont les suivants -

  • CupertinoButton
  • CupertinoPicker
  • CupertinoDatePicker
  • CupertinoTimerPicker
  • CupertinoNavigationBar
  • CupertinoTabBar
  • CupertinoTabScaffold
  • CupertinoTabView
  • CupertinoTextField
  • CupertinoDialog
  • CupertinoDialogAction
  • CupertinoFullscreenDialogTransition
  • CupertinoPageScaffold
  • CupertinoPageTransition
  • CupertinoActionSheet
  • CupertinoActivityIndicator
  • CupertinoAlertDialog
  • CupertinoPopupSurface
  • CupertinoSlider

Widgets de mise en page

Dans Flutter, un widget peut être créé en composant un ou plusieurs widgets. Pour composer plusieurs widgets dans un seul widget, Flutter fournit un grand nombre de widgets avec une fonction de mise en page. Par exemple, le widget enfant peut être centré à l'aide du widget Centre .

Certains des widgets de mise en page populaires sont les suivants:

  • Container- Une boîte rectangulaire décorée à l'aide des widgets BoxDecoration avec fond, bordure et ombre.

  • Center - Centrez son widget enfant.

  • Row - Disposez ses enfants dans le sens horizontal.

  • Column - Disposez ses enfants dans le sens vertical.

  • Stack - Disposez les uns au-dessus des autres.

Nous vérifierons les widgets de mise en page en détail dans le prochain chapitre Introduction aux widgets de mise en page .

Widgets de maintenance d'état

Dans Flutter, tous les widgets sont dérivés de StatelessWidget ou StatefulWidget .

Le widget dérivé de StatelessWidget n'a aucune information d'état mais il peut contenir un widget dérivé de StatefulWidget . La nature dynamique de l'application est due au comportement interactif des widgets et aux changements d'état pendant l'interaction. Par exemple, appuyer sur un bouton de compteur augmentera / diminuera l'état interne du compteur de un et la nature réactive du widget Flutter rendra automatiquement le widget en utilisant de nouvelles informations d'état.

Nous apprendrons en détail le concept des widgets StatefulWidget dans le prochain chapitre sur la gestion des états .

Widgets de base / indépendants de la plateforme

Flutter fournit un grand nombre de widgets de base pour créer une interface utilisateur simple et complexe d'une manière indépendante de la plate-forme. Voyons quelques widgets de base dans ce chapitre.

Text

Le widget de texte est utilisé pour afficher un morceau de chaîne. Le style de la chaîne peut être défini à l'aide de la propriété style et de la classe TextStyle . L'exemple de code à cet effet est le suivant -

Text('Hello World!', style: TextStyle(fontWeight: FontWeight.bold))

Le widget de texte a un constructeur spécial, Text.rich , qui accepte l'enfant de type TextSpan pour spécifier la chaîne avec un style différent. Le widget TextSpan est de nature récursive et accepte TextSpan comme ses enfants. L'exemple de code à cet effet est le suivant -

Text.rich( 
   TextSpan( 
      children: <TextSpan>[ 
         TextSpan(text: "Hello ", style:  
         TextStyle(fontStyle: FontStyle.italic)),  
         TextSpan(text: "World", style: 
         TextStyle(fontWeight: FontWeight.bold)),  
      ], 
   ), 
)

Les propriétés les plus importantes du widget Texte sont les suivantes:

  • maxLines, int - Nombre maximum de lignes à afficher

  • overflow, TextOverFlow- Spécifiez comment le débordement visuel est géré à l'aide de la classe TextOverFlow

  • style, TextStyle- Spécifiez le style de la chaîne à l'aide de la classe TextStyle

  • textAlign, TextAlign- Alignement du texte comme à droite, à gauche, justifier, etc., en utilisant la classe TextAlign

  • textDirection, TextDirection - Direction du texte à circuler, de gauche à droite ou de droite à gauche

Image

Le widget Image est utilisé pour afficher une image dans l'application. Le widget Image fournit différents constructeurs pour charger des images à partir de plusieurs sources et ils sont les suivants -

  • Image- Chargeur d'image générique utilisant ImageProvider

  • Image.asset - Charger l'image à partir des actifs du projet Flutter

  • Image.file - Charger l'image à partir du dossier système

  • Image.memory - Charger l'image de la mémoire

  • Image.Network - Charger l'image du réseau

L'option la plus simple pour charger et afficher une image dans Flutter consiste à inclure l'image en tant qu'actif de l'application et à la charger dans le widget à la demande.

  • Créez un dossier, des actifs dans le dossier du projet et placez les images nécessaires.

  • Spécifiez les actifs dans pubspec.yaml comme indiqué ci-dessous -

flutter: 
   assets: 
      - assets/smiley.png
  • Maintenant, chargez et affichez l'image dans l'application.

Image.asset('assets/smiley.png')
  • Le code source complet du widget MyHomePage de l'application hello world et le résultat est comme indiqué ci-dessous -.

class MyHomePage extends StatelessWidget {
   MyHomePage({Key key, this.title}) : super(key: key); 
   final String title; 

   @override 
   Widget build(BuildContext context) {
      return Scaffold( 
         appBar: AppBar( title: Text(this.title), ), 
         body: Center( child: Image.asset("assets/smiley.png")),
      ); 
   }
}

L'image chargée est comme indiqué ci-dessous -

Les propriétés les plus importantes du widget Image sont les suivantes -

  • image, ImageProvider - Image réelle à charger

  • width, double - Largeur de l'image

  • height, double - Hauteur de l'image

  • alignment, AlignmentGeometry - Comment aligner l'image dans ses limites

Icon

Le widget Icon est utilisé pour afficher un glyphe d'une police décrite dans la classe IconData . Le code pour charger une icône de courrier électronique simple est le suivant -

Icon(Icons.email)

Le code source complet pour l'appliquer dans l'application Hello World est le suivant -

class MyHomePage extends StatelessWidget { 
   MyHomePage({Key key, this.title}) : super(key: key); 
   final String title; 

   @override 
   Widget build(BuildContext context) {
      return Scaffold(
         appBar: AppBar(title: Text(this.title),),
         body: Center( child: Icon(Icons.email)),
      );
   }
}

L'icône chargée est comme indiqué ci-dessous -