Tutoriel Flutter : dé­ve­lop­per des ap­pli­ca­tions avec le SDK de Google

De nom­breuses options s’offrent aux personnes sou­hai­tant pro­gram­mer leur propre ap­pli­ca­tion. Les kits de cons­truc­tion avec des com­po­sants d’ap­pli­ca­tion prêts à l’emploi sont par­ti­cu­liè­re­ment appréciés en raison de leur facilité d’uti­li­sa­tion, cependant les fra­me­works se dé­mar­quent de plus en plus dans leur manière d’organiser le processus de dé­ve­lop­pe­ment de façon aussi simple que possible pour l’uti­li­sa­teur. L’un des fra­me­works les plus modernes est le Software De­ve­lop­ment Kit (SDK) (kit de dé­ve­lop­pe­ment logiciel) Flutter développé par Google. Ce framework ouvert permet de dé­ve­lop­per des ap­pli­ca­tions mobiles hautement per­for­mantes (pour iOS et Android) ainsi que des ap­pli­ca­tions Web et PC dans le langage Google Dart.

Dans notre tutoriel Flutter, nous vous pré­sen­tons les prin­ci­pales étapes pour débuter avec le SDK de Google.

Pour finir, cliquez sur « Terminer » afin de créer la nouvelle ap­pli­ca­tion Flutter. Dans le fichier main.dart – le fichier de travail de base pour vos projets ainsi que pour ce tutoriel Flutter –, ajoutez le code suivant pour que l’ap­pli­ca­tion affiche le message simple « Hello World » (vous pouvez supprimer le code déjà présent dans le fichier main.dart) :

Après avoir lancé notre première ap­pli­ca­tion simple dans la première étape de notre tutoriel Flutter, nous allons main­te­nant la compléter avec un pack externe. Plus pré­ci­sé­ment, nous sou­hai­tons à présent intégrer le pack de mots né­ces­saire pour atteindre l’objectif de notre projet, à savoir créer une ap­pli­ca­tion associant des mots selon un modèle aléatoire. Ici, nous utilisons le pack open source « english_words » (licence MIT), dis­po­nible en open source sur la plate-forme pub.dev à l’instar de beaucoup d’autres packs. Le module comporte plus de 5 000 mots anglais parmi les plus courants et est donc idéal pour atteindre l’objectif de ce tutoriel Flutter.

Pour la gestion des packs et des in­ter­dé­pen­dances, les ap­pli­ca­tions Flutter utilisent le fichier pubspec.yaml. Ouvrez ce fichier et ajoutez à la liste des in­ter­dé­pen­dances une entrée pour le pack lin­guis­tique (faites attention à la version actuelle ; ici : 3.1.5) :

Revenez au fichier de travail principal main.dart et importez le pack lin­guis­tique :

Ajoutez par ailleurs les lignes suivantes dans le code de l’ap­pli­ca­tion :

Pour finir, remplacez l’entrée child res­pon­sable de l’affichage du texte « Hello World » par l’entrée suivante :

Les widgets sans état (Stateless Widgets), utilisés jusqu’à présent dans ce tutoriel Google Flutter, sont in­va­riables. Pendant la durée de vie d’une ap­pli­ca­tion, ces widgets ne peuvent pas changer de statut car ce type de widgets ne peut pas être réécrit pendant l’exécution de l’ap­pli­ca­tion. À l’inverse, les widgets avec état (Stateful Widgets) peuvent modifier leur statut même pendant l’exécution de l’ap­pli­ca­tion, de sorte qu’il n’est pas né­ces­saire de le définir dès l’exécution. Si vous souhaitez attribuer des éléments par­ti­cu­liers, c’est-à-dire de l’in­te­rac­ti­vité, à votre ap­pli­ca­tion Flutter, vous aurez besoin de widgets avec état.

L’ap­pli­ca­tion de notre exemple doit également recevoir un widget in­te­rac­tif à cet endroit. Deux ca­té­go­ries sont requises au minimum pour l’im­plé­men­ta­tion : une catégorie de widget avec état, qui génère de son côté une instance de catégorie d’état.

Pour commencer, nous allons créer une catégorie d’état mi­ni­ma­liste intitulée « Ran­dom­Word­sS­tate » en ajoutant le code suivant à la fin du fichier main.dart :

Dans ce cas, la catégorie d’état générique est attribuée ex­pli­ci­te­ment à l’uti­li­sa­tion du widget « Ran­dom­Words ». Le widget avec état à pro­pre­ment parler est écrit à l’étape suivante en ajoutant l’entrée ci-dessous dans le fichier main.dart (dans le code : avant la catégorie « Ran­dom­Word­sS­tate ») :

Le com­men­taire de texte de subs­ti­tu­tion « //TODO Add build() method » se trouve à l’em­pla­ce­ment décidé dans l’extrait de catégorie d’état ajouté et est à présent remplacé par le code pour la fonction build() :

Afin de donner un premier exemple de widget Flutter in­te­rac­tif, nous allons encore étendre notre ap­pli­ca­tion dans la dernière partie de ce tutoriel Google Flutter : plus pré­ci­sé­ment, nous allons adapter la catégorie « Ran­dom­Word­sS­tate », afin qu’elle ne présente plus seulement des paires de mots in­di­vi­duelles, mais une liste infinie de paires de mots que l’uti­li­sa­teur peut faire défiler. En outre, les paires de mots déjà proposées doivent être en­re­gis­trées (pour éviter les doublons) et la taille de la police des résultats doit être augmentée.

Com­men­çons par les deux points men­tion­nés en dernier (en­re­gis­tre­ment des résultats présentés et ajus­te­ment de la police), en intégrant une liste _sug­ges­tions et une variable _big­ger­Font :

Ajoutez ensuite la fonction _build­Sug­ges­tions() adéquate dans la catégorie « Ran­dom­Word­sS­tate ») :

La fonction présentée complète l’ap­pli­ca­tion avec plusieurs pro­prié­tés : la liste de paires de mots (List.View) est notamment intégrée et gagne en vi­si­bi­lité grâce à une ligne de sé­pa­ra­tion d’un pixel (divider). En outre, cette fonction impose de fournir dix autres pro­po­si­tions (ligne : _sug­ges­tions.addAll) dès que l’uti­li­sa­teur est parvenu à la fin de liste ac­tuel­le­ment affichée.

Le widget étendu comporte une autre com­po­sante de base : la fonction _buildRow(), qui est appelée une fois par paire de mots et présente la paire sous forme de ListTitle. Cette fonction est donc im­plé­men­tée dès l’étape suivante :

La méthode build(), que nous avons im­plé­men­tée lorsque le widget avec état a été généré (étape 3), doit encore recevoir l’ordre d’utiliser la fonction build­Sug­ges­tions(). L’ancien contenu de la méthode doit donc être remplacé par le code suivant :

Pour finir, ac­tua­li­sez également la méthode build() dans la catégorie MyApp en modifiant le titre et en dé­fi­nis­sant qu’il s’agit d’un widget Ran­dom­Words dans l’entrée accueil :

Dans le cadre du tutoriel Google Flutter précédent, vous avez appris les bases es­sen­tielles pour tra­vail­ler avec Flutter et avez pu les mettre en pratique dans un exemple d’ap­pli­ca­tion simple. Na­tu­rel­le­ment, vous pouvez dé­ve­lop­per vos propres ap­pli­ca­tions Flutter de manière nettement plus détaillée et complète. Une fois que vous vous serez davantage fa­mi­lia­risé avec ce framework, vous pourrez notamment per­son­na­li­ser le design de votre ap­pli­ca­tion.

Pour conclure, nous vous pré­sen­tons une nouvelle fois le code complet de l’ap­pli­ca­tion de notre exemple dé­ve­lop­pée pour Android dans le fichier main.dart :