Résumé Flutter :

Architecture examen dév multiplateforme :

- QCM Canadien (4pts)
- Partie analyse (8pts)
- Partie problème (8pts)

I- Généralités :
Flutter est un framework Open Source de développement
d'applications multiplateforme, conçu par Google
1- Avantages:
 Un seul code pour iOS et Android
 Développement et Exécution Rapides
 Contrairement à React Native qui utilise JavaScript
pour créer des composants natifs, Flutter propose des
widgets personnalisés

2- Architecture
Une application Mobile Flutter est composé d'un ensemble de
widgets, ressources et fichiers de configuration
Un Widget est une classe Dart qui retourne un élément
graphique
Il existe deux types principaux de widgets dans Flutter :
- StatelessWidget (Widget sans état) : Ces widgets sont
statiques, ce qui signifie qu'ils ne changent pas d'état une
fois créés. Ils sont généralement utilisés pour des
éléments d'interface utilisateur qui ne changent pas en
réponse à une interaction de l'utilisateur ou à d'autres
événements. Par exemple, un texte statique, une icône ou
un bouton simple peuvent être des StatelessWidgets.

- StatefulWidget (Widget avec état) : Ces widgets peuvent

maintenir un état interne qui peut changer au fil du
temps, en réponse à des événements. Par exemple, un
bouton qui peut être activé ou désactivé en fonction
d'une condition ou un champ de texte dont le contenu
peut être modifié par l'utilisateur seraient implémentés
en utilisant StatefulWidget.

3- Installation

Voici les étapes pour installer Flutter :

1. Sélectionnez le SE sur lequel vous installez Flutter.

2. Téléchargez et extrayez le fichier zip (par exemple, C:\
flutter).
3. Ajoutez le plugin Flutter dans votre IDE (par exemple,
Android Studio).
 II- Commandes Flutter

- Création nouveau projet flutter :

flutter create my_app

- Lancement application flutter :

flutter run lib/main.dart

- Consulter version flutter :

flutter --version

- Récupérer les dépendances dans le fichier pubspec.yaml :

flutter pub get

- Ajouter des packages externes :

flutter pub add package_nom

- Mettre à jour les dépendences :

flutter pub update

- Verification de la santé de l'installation de flutter :

flutter doctor

NB: vous pouvez consulter autres commandes sur

https://docs.flutter.dev/reference/flutter-cli
 III- Packages Flutter
Les packages Flutter sont des éléments essentiels pour enrichir
les fonctionnalités des applications :
- Firebase Auth : pour l'authentification sécurisée et la
gestion des utilisateurs.

- Firebase Core : base pour l'intégration des services

Firebase, comme le stockage de données en temps réel.

- Google Maps Flutter : intégration de cartes interactives

pour la visualisation géographique.

- HTTP : communication simplifiée avec les services Web.

- Tflite : pour l'inférence de modèles TensorFlow Lite dans

les applications.

- Speech-to-Text et Text-to-Speech : pour la reconnaissance

vocale et la synthèse vocale.
 IV- Exemple Partie Analyse

Réponse : Programme Dart représentant un StatefulWidget

nommé MyApp2 permettant de retourner MaterialApp
contenant un Scaffold avec trois éléments : un AppBar, un
Body, et un FloatingActionButton.
L'AppBar affiche le texte TP compteur, le Body contient "Salam
tout le monde" avec un compteur qui est initialisé à zéro, et à
chaque fois qu’on clique sur le bouton flottant, le compteur
s'incrémente grâce à la fonction setState() appelée qui met à
jour l'état de l'application en ajoutant une nouvelle valeur au
compteur et ainsi affiche "OK Stateful" sur la console
 V- Exemple Partie Problème
Prenons exemple d'une Application mobile Cross-platform
fonctionnelle avec Flutter utilisant FireBase et la
Géolocalisation Google Maps nommée CovidTracker
1. Faut être capable de concevoir un diagramme de classe
ou un Use Case selon la question (si jamais un Use Case
est demandé, 2 acteurs seront le minimum requis)

2. Faut être capable aussi de concevoir un diagramme de

navigation (Screenshots de l'App avec ordre et une toute
petite description pour chacune afin de clarifier leurs
utilités)

3. Expliquer le choix de la technologie choisie pour la

création de l'application (dans notre cas, c'est Flutter)

4. Rédaction du code (on ne sera pas demandé d'écrire le

tout mais seulement une partie)
- Ajout des dépendances
 - Ajout de la classe main et la classe de l'application
CovidTracker.dart par exemple

______________________________________________________________
______

//main.dart
import 'package:flutter/material.dart';

import 'MyApp.dart';

void main() {
runApp(const MyApp());
}
______________________________________________________________
______

//MyApp.dart
import 'package:flutter/material.dart';

import 'screens/Login.dart';

class MyApp extends StatelessWidget {

const MyApp({Key? key}) : super(key: key);

// This widget is the root of your application.

@override
Widget build(BuildContext context) {
return MaterialApp(
title: ‘CovidApp',
theme: ThemeData(
primarySwatch: Colors.pink,
),
home: const Login(),
debugShowCheckedModeBanner: false,
);
}
}
______________________________________________________________
______
- Ajout d'une seule partie de l'application prenons par
exemple le Login.dart

- //screens/Login.dart
-
- import 'Register.dart';
- import 'package:flutter/material.dart';
- class Login extends StatefulWidget {
- const Login({Key? key}) : super(key: key);
-
- @override
- State<Login> createState() =>_LoginState();
- }
-
- class _LoginState extends State<Login> {
- String email = '';
- String password = '';
- final _formKey = GlobalKey<FormState>();
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- backgroundColor: Colors.pink[50],
- appBar: AppBar(
- title: Text('Covid Tracker'),
- actions: [
- FlatButton.icon(
- onPressed: (){
- Navigator.push(context, MaterialPageRoute(builder:
(context)=>Register()));
- },
- icon: Icon(Icons.person),
- label: Text('Register'))
- ],
- ),
- body: Container(
- padding: EdgeInsets.symmetric(vertical: 20, horizontal: 50),
- child: Form(
- key: _formKey,
- child: ListView(
- children: [
- Image.asset('assets/images/covid.png'),
- SizedBox(height: 50.0,),
- TextFormField(
- decoration: InputDecoration(
- hintText: 'email',
- prefixIcon: Icon(Icons.person),
- fillColor: Colors.white,
- filled: true
- ),
- onChanged: (val) {
- setState(() {
- email = val;
- });
- },
- validator: (val) => val!.isEmpty ? 'Enter a valid
email':null,
- ),
- SizedBox(height: 20.0,),
- TextFormField(
- decoration: InputDecoration(
- hintText: 'password',
- prefixIcon: Icon(Icons.lock),
- fillColor: Colors.white,
- filled: true
- ),
- onChanged: (val) {
- setState(() {
- password = val;
- });
- },
- validator: (val) => val!.length < 6 ?
- 'Enter a valid password 6+ Chars':null,
- obscureText: true,
- ),
- SizedBox(height: 20.0,),
- RaisedButton(
- color: Colors.pink,
- child: Text('Sign In',style: TextStyle(color:
Colors.white),),
- onPressed: () {
- if(_formKey.currentState!.validate()){
- print('ok !!!');
- }
-
- },
-
- )
-
- ],
- ),
- ),
- ),
- );
- }
- }