Flutter: installation et bases.

Par mfatene, 24 février, 2024

Bienvenue à tous et à toutes sur cet article qui servira comme une introduction à Flutter.

Installation de Flutter:

Flutter supporte plusieurs plateformes de développement : Windows - MacOS - Linux - ChromeOS.

Dépendamment de votre environnement, le site web de Flutter va vous guider pour l'installation partie références.

N.B:
Tant que les dépendances, le SDK et l'émulateur sont installés correctement et que la commande `flutter doctor` ne fait pas d'erreur, sachez que votre environnement fonctionne très bien ! Vous pouvez donc commencer le développement dans votre IDE préféré comme Emacs, Vscode (installez l'extension Flutter pour plus de fonctionnalités) ou Android Studio.
Je laisse quelques ressources qui pourront vous aider à l'installer dans la partie références:

Votre première application Flutter:

Maintenant que tout est bien configuré (je l'espère :)), vous pouvez :
- Sur Android Studio: Sur l'interface graphique, vous aurez l'option de créer un projet Flutter.
- Sur VsCode: Quand vous créez un nouveau projet, vous pourrez simplement écrire dans la boîte de dialogue new flutter , et cela créera le projet pour vous.
- Sur la ligne de commande: utilisez la commande `flutter create nom_du_projet.
Fichiers dans les applications Flutter:

Lors du développement des applications Flutter, il faut particulièrement faire attention à 2 dossiers :
- assets: ce dossier regroupe les paramètres d'internationalisation et les images.
- lib: contient le code source de l'application.

Les widgets:

Les widgets sont les éléments de base utilisés pour construire des interfaces utilisateurs sur Flutter. Il y a deux types de widgets :
- Stateful Widgets: widgets immuables, une fois créés ils ne peuvent pas être modifiés. Ils sont utilisés pour les composants statiques de l'interface utilisateur qui ne changent pas.
- Stateless Widgets: widgets mutables qui changent selon les interactions avec l'utilisateur.

Exemple:

void main() {
runApp(
const Center(
child: Text(
'Hello, world!',
textDirection: TextDirection.ltr,
),
),
);
}

Dans l'exemple ci-dessus, on a deux widgets : le widget Center() qui prend comme enfant un widget Text(), ce qui nous donne lors de l'exécution le texte "Hello, World!" centré.

Maintenant qu'on sait comment installer Flutter et les bases des widgets sur Flutter, rendez-vous la semaine prochaine pour en apprendre davantage sur les widgets.