[🧑‍💻] Étude - Bases du développement d’apps Flutter 14/44 : configuration de l’environnement Flutter, widgets essentiels, syntaxe de base de Dart

✨ Résumé de Gemini 2.5 Pro 　

Cours de base sur le développement d’apps Flutter

DevStory - Inflearn DevStory

Ce n’est pas grave si vous n’avez aucune connaissance en développement ! Les bases du développement d’apps Flutter accessibles aux débutants 🏃‍♂️Les bases du développement d’apps Flutter que même les grands débutants peuvent apprendre[photo]En apprenant le développement d’apps, vous pourrez publier dans le monde entier votre propre service d’app, que vous n’aviez jusque-là fait qu’imaginer. En fait

• Original : http://blog.naver.com/hyeogikarp/223882864462
• Heure de publication Naver : 2025/05/30 11:30 KST
• Catégorie originale : Étude du développement

Original

Cours de base sur le développement d’apps Flutter

DevStory - Inflearn

DevStory

Ce n’est pas grave si vous n’avez aucune connaissance en développement ! Les bases du développement d’apps Flutter accessibles aux débutants 🏃‍♂️Les bases du développement d’apps Flutter que même les grands débutants peuvent apprendre[photo]En apprenant le développement d’apps, vous pourrez publier dans le monde entier votre propre service d’app, que vous n’aviez jusque-là fait qu’imaginer. En fait, créer une app

www.inflearn.com

1. Qu’est-ce que Flutter ?

• Framework multiplateforme : développé par Google, il permet de développer des applications Android, iOS, Web et Desktop avec une seule base de code.

• Utilise le langage Dart : l’UI s’écrit en code.

1. Concept central : tout est widget (Widget)

• Unité de composition de l’UI : on compose l’écran en assemblant des widgets.

• Arbre de widgets (Widget Tree) : structure hiérarchique de widgets, composée de relations parent-enfant.

• Key ? key et super(key: key) : dans le constructeur d’un widget, Key sert à préserver l’état du widget et à le mettre à jour efficacement lorsque l’arbre de widgets est reconstruit. À ce stade, il suffit de comprendre que ce concept existe.

• BuildContext context : objet important qui indique la position du widget actuel dans l’arbre de widgets et permet d’accéder aux données ou au thème des widgets supérieurs. Il est utilisé à de nombreux endroits, comme Navigator.pop(context).

• Principales catégories de widgets :

• StatelessWidget : widget statique sans état.

• StatefulWidget : widget dynamique qui peut être redessiné selon les changements d’état. (exemple de code omis)

• StatefulWidget : widget dynamique qui peut être redessiné selon les changements d’état. (exemple de code omis)

1. Structure de base d’une app et principaux widgets

• fonction main() & runApp() & MaterialApp & Scaffold :

• home de MaterialApp : indique le premier écran de l’application. (ex. : home: HomePage())

• home de MaterialApp : indique le premier écran de l’application. (ex. : home: HomePage())

• Propriétés détaillées de l’AppBar :

• Widgets de mise en page :

• Column & Row :

• Padding : ajoute de l’espace autour du widget enfant.

• Padding : ajoute de l’espace autour du widget enfant.

• Container : widget rectangulaire qui permet divers styles (taille, couleur, marge, bordure, etc.).

• Container : widget rectangulaire qui permet divers styles (taille, couleur, marge, bordure, etc.).

• Expanded : agrandit un widget enfant de Row ou Column pour remplir l’espace restant.

• Expanded : agrandit un widget enfant de Row ou Column pour remplir l’espace restant.

• SingleChildScrollView : permet le défilement lorsque le contenu du widget enfant dépasse l’écran.

• SingleChildScrollView : permet le défilement lorsque le contenu du widget enfant dépasse l’écran.

• ListView.builder : crée une liste défilante qui affiche efficacement un grand nombre d’éléments. Seuls les éléments visibles à l’écran sont créés.

• ListView.builder : crée une liste défilante qui affiche efficacement un grand nombre d’éléments. Seuls les éléments visibles à l’écran sont créés.

• Stack : permet de superposer des widgets (axe Z).

• Stack : permet de superposer des widgets (axe Z).

• AspectRatio : fixe le ratio largeur-hauteur d’un widget enfant.

• AspectRatio : fixe le ratio largeur-hauteur d’un widget enfant.

• double.infinity : utilisé pour les propriétés width ou height d’un Container, etc., afin de remplir la taille maximale autorisée par le widget parent.

• double.infinity : utilisé pour les propriétés width ou height d’un Container, etc., afin de remplir la taille maximale autorisée par le widget parent.

• SizedBox : utilisé pour créer un espace vide d’une taille précise ou pour définir explicitement la taille d’un widget enfant.

• SizedBox : utilisé pour créer un espace vide d’une taille précise ou pour définir explicitement la taille d’un widget enfant.

• Widgets UI de base :

• Text & TextStyle : affiche du texte et définit son style.

• Image.network : charge et affiche une image depuis une URL réseau.

• Image.network : charge et affiche une image depuis une URL réseau.

• fit: BoxFit.cover : fait remplir à l’image l’espace indiqué tout en conservant ses proportions. (Si l’image est plus grande que l’espace, elle peut être rognée)Icon : affiche une icône Material Design.

• fit: BoxFit.cover : fait remplir à l’image l’espace indiqué tout en conservant ses proportions. (Si l’image est plus grande que l’espace, elle peut être rognée)

• fit: BoxFit.cover : fait remplir à l’image l’espace indiqué tout en conservant ses proportions. (Si l’image est plus grande que l’espace, elle peut être rognée)

• Icon : affiche une icône Material Design.

• Détails de TextField & InputDecoration : reçoit une saisie de texte de la part de l’utilisateur.

• Détails de TextField & InputDecoration : reçoit une saisie de texte de la part de l’utilisateur.

• ElevatedButton, TextButton, IconButton : différents types de widgets bouton.

• ElevatedButton, TextButton, IconButton : différents types de widgets bouton.

• Card : crée une UI en forme de carte Material Design. Elle possède une légère ombre et des coins arrondis.

• Card : crée une UI en forme de carte Material Design. Elle possède une légère ombre et des coins arrondis.

• Divider : crée une ligne de séparation visuelle.

• Divider : crée une ligne de séparation visuelle.

• CircleAvatar : principalement utilisé pour afficher des images circulaires, comme une image de profil utilisateur.

• CircleAvatar : principalement utilisé pour afficher des images circulaires, comme une image de profil utilisateur.

• Colors.black.withOpacity(0.5) : applique une opacité à une couleur. 0.0 (complètement transparent) ~ 1.0 (complètement opaque).

• Colors.black.withOpacity(0.5) : applique une opacité à une couleur. 0.0 (complètement transparent) ~ 1.0 (complètement opaque).

• Drawer et widgets associés :

• Drawer : défini dans la propriété drawer de Scaffold, c’est un panneau qui glisse depuis un côté de l’écran.

• DrawerHeader : widget utilisé pour décorer la zone supérieure d’un Drawer.

• ListTile : souvent utilisé pour composer chaque élément à l’intérieur d’un Drawer. Il possède des propriétés comme leading, title, trailing et onTap.

• ListTile : souvent utilisé pour composer chaque élément à l’intérieur d’un Drawer. Il possède des propriétés comme leading, title, trailing et onTap.

• PageView : widget qui permet de consulter plusieurs pages (écrans) en les faisant défiler à gauche et à droite. (ex. : bannière d’événement)

1. Bases de la navigation

• Navigator.pop(context) : utilisé pour retirer l’écran actuel (route) de la pile et revenir à l’écran précédent. Utile pour fermer un Drawer ou une boîte de dialogue.

1. Manipuler les données (exemple simple)

• List<Map<String, dynamic» : composer les données utilisées dans ListView.builder, etc., avec des listes et des maps Dart est une méthode courante. Chaque Map contient les informations d’un élément, et on accède aux valeurs avec des clés String.

1. Structure de projet et environnement de développement

• Dossier lib : endroit où l’on écrit principalement le code Dart. main.dart est le fichier de démarrage par défaut.

• Fichier pubspec.yaml : fichier qui configure les métadonnées du projet, la gestion des dépendances (bibliothèques/packages), la version du SDK, etc.

• VSCode : utilisé comme principal outil de développement.

• Command Palette (Ctrl+Shift+P / Cmd+Shift+P) : exécute diverses commandes Flutter comme Flutter: New Project, Flutter: Launch Emulator, etc.

• Raccourcis utiles : il est indispensable d’apprendre des raccourcis utiles comme l’autocomplétion (Ctrl+Space/Option+Esc), le refactoring (Ctrl+Shift+R), l’affichage des paramètres (Ctrl+Option), etc. ! (pour améliorer la productivité)

• Plus tard, je prévois de faire beaucoup de courts articles centrés sur les raccourcis VSCode.

• ex) Comment activer le Presentation Mode dans VSCode

• Emulator : appareil mobile virtuel, utilisé pour tester une app sans appareil réel.

• Hot Reload : reflète rapidement les changements de code à l’écran tout en conservant en grande partie l’état de l’app. (icône en forme d’éclair)

• Hot Restart : réinitialise l’état de l’app et redémarre l’app. (icône en forme de cercle)

• analysis_options.yaml : fichier qui définit les règles d’analyse du code Dart. (ex. : activation/désactivation de certaines règles de lint)

• Par exemple, si vous essayez d’utiliser la fonction print pour afficher du texte dans la Debug Console, il fait tout un scandale en disant qu’il ne faut pas l’utiliser en production.

• Comme il suffira de l’enlever en production, essayons de retirer ‘avoid_print’ des règles de lint. Solution 1. Écrire un commentaire ignore_for_file en haut du fichier dart concerné.

• Comme il suffira de l’enlever en production, essayons de retirer ‘avoid_print’ des règles de lint.

• Solution 1. Écrire un commentaire ignore_for_file en haut du fichier dart concerné.

• Solution 2. Le traiter comme ignoré dans analysis_options.yaml à la racine du projet.

• Solution 2. Le traiter comme ignoré dans analysis_options.yaml à la racine du projet.

• Solution 2. Le traiter comme ignoré dans analysis_options.yaml à la racine du projet.

1. Méthode d’apprentissage de Flutter

• Widget Catalog & Widget of the week : apprendre divers widgets avec le catalogue de widgets de la documentation officielle Flutter et la série ‘Widget of the week’.

• Utiliser les communautés : poser des questions, répondre et progresser ensemble dans les communautés liées à Flutter (forums en ligne, chats ouverts, etc.).

• Bien connaître la syntaxe Dart : comme Flutter utilise le langage Dart, il est important de bien comprendre la syntaxe Dart.

💭 Journal

J’avais déjà manipulé C, C++, Java, Javascript, Python, … d’innombrables langages, et aussi divers frameworks/outils comme Spring, Vue.js, Django et FlutterFlow. Malgré cela, je me suis demandé s’il n’y avait pas des concepts de base que j’avais laissés passer, alors j’ai commencé par un cours sur les bases de Flutter.

Je pensais que c’étaient des concepts que je connaissais déjà et j’ai essayé de passer rapidement dessus, mais waouh, j’avais peut-être vraiment lâché le développement depuis trop longtemps. Peut-être que mes muscles cérébraux s’étaient raidis ; je n’arrivais pas à imaginer rapidement dans ma tête comment écrire le code.

Maintenant, nous sommes à une époque où, dans VSCode, on peut coder efficacement avec l’aide d’IA comme Inline Chat(Gemini 2.5 Pro) ou Code Recommendation(GitHub Copilot), poser rapidement ses questions, trouver des réponses et utiliser l’autocomplétion. J’espère donc pouvoir restaurer plus vite mes muscles de cerveau de codeur.

Il y a encore beaucoup de chemin ! C’est parti !