formation flutter

https://docs.flutter.dev/get-started/install/windows

1) c'est quoi flutter?

Flutter est un kit de développement logiciel d'interface utilisateur open-source
créé par Google. Il est utilisé pour développer des applications pour Android, iOS,
Linux, Mac, Windows, Google Fuchsia et le web à partir d'une seule base de code.

2) quel est la version stable de flutter?

Selon le site Web de Flutter, la version stable de Flutter est actuellement la
version 3.16.0, publiée le 15 novembre 2023.
Cette version comprend un certain nombre de nouvelles fonctionnalités et
améliorations, notamment :
* Un nouveau système de polices unifié pour les applications Flutter sur toutes les
plateformes.
* Une nouvelle API pour la gestion des notifications push.
* De nouvelles fonctionnalités pour le développement d'applications pour les
appareils Wear OS.
* Une variété de corrections de bogues et d'améliorations des performances.

3) Comment installer & configurer Flutter?

Pour installer la version stable de Flutter, vous pouvez suivre les instructions
sur le site Web de Flutter : https://flutter.dev/.
2. Configurer votre environnement Flutter
Éditeur
Pour que cet atelier de programmation soit le plus facile possible, nous avons
présumé que vous alliez utiliser Visual Studio Code (VS Code) comme environnement
de développement. Il est gratuit et fonctionne sur la plupart des plates-formes.

file_downloadTélécharger Visual Studio Code

Vous pouvez bien sûr utiliser l'éditeur de votre choix, comme Android Studio, les
IDE IntelliJ, Emacs, Vim ou Notepad++. Tous fonctionnent avec Flutter.

Nous recommandons d'utiliser VS Code pour cet atelier de programmation, car les
instructions renvoient par défaut aux raccourcis de VS Code. Il est plus simple
d'indiquer "cliquez ici" ou "appuyez sur cette touche" (plutôt que : "effectuez
l'action correspondante dans votre éditeur pour X".

15961a28a4500ac1.png

Choisir une cible de développement

Flutter est un kit multiplate-forme. Votre application peut s'exécuter sur l'un des
systèmes d'exploitation suivants :

iOS
Android
Windows
macOS
Linux
Web
Il est cependant courant de choisir un système d'exploitation sur lequel vous allez
principalement fonder votre développement. Il s'agit de la "cible de
développement", à savoir le système d'exploitation sur lequel l'application
s'exécute pendant le développement.

d105428cb3aae7d5.png

Par exemple, supposons que vous utilisiez un ordinateur portable Windows pour
développer une application Flutter. Si vous choisissez Android comme cible de
développement, vous allez associer un appareil Android à l'ordinateur portable
Windows par câble USB. Ainsi, l'application en cours de développement va s'exécuter
sur cet appareil Android. Vous pouvez aussi choisir Windows comme cible de
développement : l'application en cours de développement s'exécute comme une
application Windows, en parallèle de l'éditeur.

Conseil : Nous vous encourageons fortement à choisir le système d'exploitation de

l'appareil utilisé pour le développement comme cible de développement. Ainsi, si
votre ordinateur exécute Windows, choisissez ce système comme cible de
développement.

6bfd4ef44ca74791.png

Vous pourriez avoir envie de choisir le Web comme cible de développement. Mais dans
ce cas, vous perdez l'une des fonctionnalités de développement les plus utiles de
Flutter, le hot reload avec état. Flutter ne peut pas procéder au hot reload des
applications Web.

Vous devez faire votre choix dès maintenant. Sachez que vous pourrez toujours
exécuter votre application sur d'autres systèmes d'exploitation par la suite. Mais
définir clairement sa cible de développement permet de simplifier la prochaine
étape.

Installer Flutter
Les dernières instructions pour installer le SDK Flutter sont toujours disponibles
sur docs.flutter.dev.

Installer le SDK Flutter

Les instructions du site Web Flutter couvrent non seulement l'installation du SDK,
mais aussi les outils associés à la cible de développement et les plug-ins de
l'éditeur. Sachez que pour cet atelier de programmation, il vous suffit d'installer
les éléments suivants :

SDK Flutter
Visual Studio Code avec plug-in Flutter
Le logiciel requis par la cible de développement retenue (par exemple, Visual
Studio pour Windows ou Xcode pour macOS)
Dans la section suivante, vous allez créer votre premier projet Flutter.
3. Créer un projet
Créer votre premier projet Flutter
Lancez Visual Studio Code et ouvrez la palette de commandes (avec F1, Ctrl+Shift+P
ou Shift+Cmd+P). Saisissez "flutter new". Sélectionnez la commande Flutter: New
Project (Flutter : nouveau projet).
Sélectionnez ensuite Application et indiquez le dossier dans lequel créer votre
projet. Il peut s'agir de votre répertoire d'accueil ou d'un élément comme C:\src\.

Enfin, attribuez un nom à votre projet, comme namer_app ou my_awesome_namer.

Flutter crée le dossier de votre projet et VS Code l'ouvre.
Remarque : VS Code affiche une fenêtre modale qui vous demande si vous souhaitez
faire confiance aux contenus du dossier.

756a9586aacb2bda.png

Sélectionnez Yes (Oui). L'autre option désactive les fonctionnalités importantes de

Flutter.

Vous allez maintenant remplacer le contenu des trois fichiers et créer la structure
de base de l'application.
Copier et coller l'application d'origine
Dans le volet de gauche de VS Code, vérifiez qu'Explorer (Explorateur) est
sélectionné et ouvrez le fichier pubspec.yaml.
Remplacez le contenu de ce fichier par le code ci-dessous :

pubspec.yaml.

name: namer_app
description: A new Flutter project.

publish_to: 'none' # Remove this line if you wish to publish to pub.dev

version: 0.0.1+1

environment:
sdk: '>=2.19.4 <4.0.0'

dependencies:
flutter:
sdk: flutter

english_words: ^4.0.0
provider: ^6.0.0

dev_dependencies:
flutter_test:
sdk: flutter

flutter_lints: ^2.0.0

flutter:
uses-material-design: true

Le fichier pubspec.yaml définit les informations de base de votre application,

comme sa version actuelle, ses dépendances et les éléments utilisés pour son
implémentation.

Remarque : Si le nom que vous attribuez à l'application est différent de namer_app,

vous devez modifier la première ligne en conséquence.

Ouvrez ensuite un autre fichier de configuration dans le projet,

analysis_options.yaml.

Remplacez le contenu par ceci :

analysis_options.yaml

include: package:flutter_lints/flutter.yaml

linter:
rules:
prefer_const_constructors: false
prefer_final_fields: false
use_key_in_widget_constructors: false
prefer_const_literals_to_create_immutables: false
prefer_const_constructors_in_immutables: false
avoid_print: false
Le fichier détermine la rigueur de Flutter lorsqu'il analyse votre code. Puisqu'il
s'agit d'une entrée en matière à Flutter, vous allez indiquer à l'analyseur d'y
aller doucement. Vous pourrez toujours personnaliser cela par la suite. En réalité,
vous aurez certainement envie d'augmenter la rigueur de l'analyseur à mesure que
vous approcherez de la publication de la véritable application de production.

Enfin, ouvrez le fichier main.dart dans le répertoire lib/.

Remplacez le contenu de ce fichier par le code ci-dessous :

lib/main.dart

import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

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

class MyApp extends StatelessWidget {

const MyApp({super.key});

@override
Widget build(BuildContext context) {
return ChangeNotifierProvider(
create: (context) => MyAppState(),
child: MaterialApp(
title: 'Namer App',
theme: ThemeData(
useMaterial3: true,
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrange),
),
home: MyHomePage(),
),
);
}
}

class MyAppState extends ChangeNotifier {

var current = WordPair.random();
}

class MyHomePage extends StatelessWidget {

@override
Widget build(BuildContext context) {
var appState = context.watch<MyAppState>();

return Scaffold(
body: Column(
children: [
Text('A random idea:'),
Text(appState.current.asLowerCase),
],
),
);
}
}
Jusqu'ici, ces 50 lignes de code constituent l'intégralité de l'application.
Remarque : Cet atelier de programmation avance rapidement jusqu'à ce que vous
puissiez modifier de l'application de façon interactive (c'est le meilleur moyen de
découvrir Flutter). Si vous avez besoin de plus d'explications sur le code ci-
dessus, soyez patients : vous les aurez bientôt.
Dans la section suivante, vous allez exécuter l'application en mode débogage et
commencez le développement.
4. Ajouter un bouton
Cette étape vise à ajouter un bouton Next (Suivant) pour générer une paire de mots.

Lancer l'application
Tout d'abord, ouvrez lib/main.dart et assurez-vous que l'appareil cible est
sélectionné. Un bouton en bas à droite de VS Code indique quel est l'appareil cible
actuel. Cliquez dessus pour le modifier.
Avec lib/main.dart ouvert, recherchez le bouton de lecture b0a5d0200af5985d.png en
haut à droite de la fenêtre de VS Code et cliquez dessus.
Après une minute environ, l'application se lance en mode débogage. Pour le moment,
elle ne ressemble pas à grand-chose :
Remarque : Si la cible de développement est un appareil mobile, le texte peut être
en partie masqué par une encoche ou une barre d'état. Vous allez très vite savoir
comment résoudre ce problème.
Premier hot reload
En bas de lib/main.dart, ajouter un élément à la chaîne du premier objet Text et
enregistrez le fichier (avec Ctrl+S ou Cmd+S). Par exemple :

lib/main.dart

// ...

return Scaffold(
body: Column(
children: [
Text('A random AWESOME idea:'), // ← Example change.
Text(appState.current.asLowerCase),
],
),
);

// ...
Notez que l'application change instantanément, mais que le mot aléatoire reste le
même. C'est le fameux hot reload avec état de Flutter. Le hot reload se déclenche
lorsque vous enregistrez des modifications dans un fichier source.
5. Embellir l'application
Voici à quoi ressemble l'application pour le moment.
Ce n'est pas l'idéal. La pièce maîtresse de l'application (la paire de mots générée
de façon aléatoire) doit être plus visible. Après tout, elle est ce qui incite les
utilisateurs à exécuter l'application. Par ailleurs, le contenu est bizarrement
décentré et l'application est globalement ennuyeuse, tout en noir et blanc.