Flutter

# 1. Télécharger Flutter SDK
# https://docs.flutter.dev/get-started/install/windows
# Extraire dans C:\flutter (pas dans Program Files)

# 2. Ajouter au PATH : C:\flutter\bin

# 3. Vérifier l'installation
flutter doctor

# 4. Installer Android Studio + Android SDK
# https://developer.android.com/studio
# Puis dans Android Studio : SDK Manager → install SDK 34+
# Virtual Device Manager → créer un émulateur Pixel

# 5. Accepter les licences Android
flutter doctor --android-licenses

# Résultat attendu de flutter doctor :
# [✓] Flutter (Channel stable)
# [✓] Android toolchain
# [✓] Android Studio
# [✓] VS Code (extension Flutter installée)

# Créer un nouveau projet
flutter create mon_app
cd mon_app

# Structure du projet
# mon_app/
# ├── lib/
# │   └── main.dart       ← TON CODE ici
# ├── android/            ← config Android
# ├── ios/                ← config iOS
# ├── web/                ← config Web
# ├── pubspec.yaml        ← dépendances (= requirements.txt)
# └── test/               ← tests

# Lancer sur émulateur Android
flutter run

# Lancer dans le navigateur
flutter run -d chrome

# Lancer sur tous les appareils connectés
flutter run -d all

# Hot reload : appuyer sur r dans le terminal
# Hot restart : appuyer sur R (perd l'état)

// Fonction typée
int additionner(int a, int b) {
  return a + b;
}
// Fonction flèche (corps unique)
int doubler(int x) => x * 2;

// Paramètres nommés (très courant en Flutter !)
Widget monWidget({required String titre, int taille = 16}) {
  return Text(titre);
}
// Appel : monWidget(titre: 'Bonjour', taille: 20)

// List (= liste Python)
List<String> fruits = ['pomme', 'banane', 'cerise'];
fruits.add('kiwi');
fruits.where((f) => f.length > 5).toList();  // filter
fruits.map((f) => f.toUpperCase()).toList();    // map

// Map (= dict Python)
Map<String, dynamic> user = {
  'nom': 'Alice',
  'age': 20,
};
print(user['nom']);         // Alice
print(user['email'] ?? '?'); // ?? = valeur si null

// Classe Dart
class Etudiant {
  final String nom;
  int age;
  String? email;  // nullable — peut être null

  // Constructeur court
  Etudiant({required this.nom, required this.age, this.email});

  String toString() => 'Etudiant($nom, $age)';
}

var e = Etudiant(nom: 'Alice', age: 20);
print(e.email?.toUpperCase()); // ?. = appel si non-null

// Async / await (équivalent JS)
Future<String> chargerDonnees() async {
  await Future.delayed(Duration(seconds: 1));
  return 'données chargées';
}

// Utilisation
void main() async {
  var result = await chargerDonnees();
  print(result);
}

// String interpolation (comme Python f-strings)
var msg = 'Bonjour ${e.nom}, tu as ${e.age} ans';

// Utiliser quand : l'affichage ne change jamais
// ou dépend uniquement de paramètres reçus de l'extérieur

class CarteEtudiant extends StatelessWidget {
  final String nom;
  final int age;

  const CarteEtudiant({
    super.key,
    required this.nom,
    required this.age,
  });

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            Text(nom, style: const TextStyle(
              fontSize: 18, fontWeight: FontWeight.bold,
            )),
            Text('$age ans'),
          ],
        ),
      ),
    );
  }
}

// Utilisation : CarteEtudiant(nom: 'Alice', age: 20)

// Utiliser quand : l'affichage change en réponse à
// des interactions (clic, saisie, chargement...)

class Compteur extends StatefulWidget {
  const Compteur({super.key});

  @override
  State<Compteur> createState() => _CompteurState();
}

class _CompteurState extends State<Compteur> {
  int _valeur = 0;  // _ = privé par convention

  void _incrementer() {
    setState(() {      // ← OBLIGATOIRE pour déclencher rebuild
      _valeur++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Valeur : $_valeur', fontSize: 24),
        ElevatedButton(
          onPressed: _incrementer,
          child: const Text('+'),
        ),
      ],
    );
  }
}

// Column = arrangement vertical (flexbox column)
Column(
  mainAxisAlignment: MainAxisAlignment.center,   // axe principal = vertical
  crossAxisAlignment: CrossAxisAlignment.start,  // axe transversal = horizontal
  children: [
    const Text('Titre'),
    const SizedBox(height: 8),   // espacement fixe
    const Text('Sous-titre'),
    const Spacer(),               // espace flexible (pousse vers le bas)
    ElevatedButton(onPressed: (){}, child: const Text('OK')),
  ],
)

// Row = arrangement horizontal
Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    const Icon(Icons.person),
    Expanded(child: const Text('Alice')), // prend l'espace restant
    const Text('20 ans'),
  ],
)

// Padding et Container
Container(
  padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
  margin: const EdgeInsets.all(8),
  decoration: BoxDecoration(
    color: Colors.blue.shade100,
    borderRadius: BorderRadius.circular(12),
  ),
  child: const Text('Contenu'),
)

// Stack = superposition (comme position: absolute en CSS)
Stack(
  children: [
    Image.network('https://example.com/fond.jpg'),
    Positioned(          // positionné dans le Stack
      bottom: 16,
      left: 16,
      child: const Text('Sur l\'image',
        style: TextStyle(color: Colors.white, fontSize: 20)),
    ),
  ],
)

// ListView — liste scrollable (remplace Column pour les longues listes)
ListView(
  children: [
    ListTile(leading: Icon(Icons.person), title: Text('Alice')),
    ListTile(leading: Icon(Icons.person), title: Text('Bob')),
  ],
)

// ListView.builder — efficace pour les listes dynamiques longues
ListView.builder(
  itemCount: etudiants.length,
  itemBuilder: (context, index) {
    final e = etudiants[index];
    return ListTile(
      title: Text(e.nom),
      subtitle: Text('${e.age} ans'),
      trailing: const Icon(Icons.arrow_forward),
      onTap: () => voirDetails(e),
    );
  },
)

// Aller vers un nouvel écran
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => DetailPage(id: 42),
  ),
);

// Revenir à l'écran précédent
Navigator.pop(context);

// Revenir avec une valeur de retour
Navigator.pop(context, 'résultat');

// Attendre le retour (comme un await)
final resultat = await Navigator.push(
  context,
  MaterialPageRoute(builder: (_) => const FormulaireScreen()),
);
print(resultat); // valeur retournée par pop()

// Remplacer l'écran courant (pas de retour possible)
Navigator.pushReplacement(
  context,
  MaterialPageRoute(builder: (_) => const AccueilScreen()),
);

// Dans MaterialApp — définir les routes
MaterialApp(
  initialRoute: '/',
  routes: {
    '/':        (ctx) => const AccueilScreen(),
    '/details': (ctx) => const DetailScreen(),
    '/profil':  (ctx) => const ProfilScreen(),
  },
)

// Naviguer par nom
Navigator.pushNamed(context, '/details');

// Passer des arguments
Navigator.pushNamed(
  context, '/details',
  arguments: {'id': 42, 'titre': 'Article'},
);

// Récupérer les arguments dans DetailScreen
final args = ModalRoute.of(context)!.settings.arguments
    as Map<String, dynamic>;
print(args['id']); // 42

// BottomNavigationBar — onglets
int _currentIndex = 0;
final _screens = [AccueilScreen(), RechercheScreen(), ProfilScreen()];

Scaffold(
  body: _screens[_currentIndex],
  bottomNavigationBar: BottomNavigationBar(
    currentIndex: _currentIndex,
    onTap: (i) => setState(() => _currentIndex = i),
    items: const [
      BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Accueil'),
      BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Chercher'),
      BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profil'),
    ],
  ),
)

// pubspec.yaml
# dependencies:
#   provider: ^6.1.0

// 1. Le modèle — étend ChangeNotifier
class PanierModel extends ChangeNotifier {
  final List<String> _articles = [];

  List<String> get articles => _articles;
  int get total => _articles.length;

  void ajouter(String article) {
    _articles.add(article);
    notifyListeners();  // ← déclenche la mise à jour UI
  }

  void supprimer(String article) {
    _articles.remove(article);
    notifyListeners();
  }
}

// 2. Exposer le modèle à l'arbre de widgets
MultiProvider(
  providers: [
    ChangeNotifierProvider(create: (_) => PanierModel()),
  ],
  child: const MyApp(),
)

// 3. Lire l'état (rebuild quand ça change)
class BadgePanier extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final total = context.watch<PanierModel>().total;
    return Badge(
      label: Text('$total'),
      child: const Icon(Icons.shopping_cart),
    );
  }
}

// 4. Modifier l'état (pas de rebuild)
class BoutonAjout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        // read() = pas de rebuild sur ce widget
        context.read<PanierModel>().ajouter('Produit');
      },
      child: const Text('Ajouter au panier'),
    );
  }
}

// Résumé :
// context.watch<T>() = lire + se réabonner aux mises à jour
// context.read<T>()  = lire sans s'abonner (dans onPressed...)
// context.select<T,R>((m) => m.prop) = watch partiel

class FormulaireScreen extends StatefulWidget {
  const FormulaireScreen({super.key});
  @override
  State<FormulaireScreen> createState() => _FormulaireState();
}

class _FormulaireState extends State<FormulaireScreen> {
  final _formKey = GlobalKey<FormState>();  // ← clé du formulaire
  final _nomCtrl  = TextEditingController();
  final _emailCtrl = TextEditingController();
  bool _conditions = false;

  @override
  void dispose() {
    _nomCtrl.dispose();    // IMPORTANT : libérer la mémoire
    _emailCtrl.dispose();
    super.dispose();
  }

  void _soumettre() {
    if (_formKey.currentState!.validate() && _conditions) {
      print('Nom: ${_nomCtrl.text}, Email: ${_emailCtrl.text}');
      Navigator.pop(context);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Inscription')),
      body: Form(
        key: _formKey,
        child: ListView(
          padding: const EdgeInsets.all(16),
          children: [

            TextFormField(
              controller: _nomCtrl,
              decoration: const InputDecoration(
                labelText: 'Nom complet',
                prefixIcon: Icon(Icons.person),
                border: OutlineInputBorder(),
              ),
              validator: (val) {
                if (val == null || val.isEmpty) return 'Nom requis';
                if (val.length < 2) return 'Trop court';
                return null;  // null = valide
              },
            ),

            const SizedBox(height: 16),

            TextFormField(
              controller: _emailCtrl,
              keyboardType: TextInputType.emailAddress,
              decoration: const InputDecoration(
                labelText: 'Email',
                prefixIcon: Icon(Icons.email),
                border: OutlineInputBorder(),
              ),
              validator: (val) {
                if (val == null || !val.contains('@'))
                  return 'Email invalide';
                return null;
              },
            ),

            CheckboxListTile(
              title: const Text("J'accepte les conditions"),
              value: _conditions,
              onChanged: (v) => setState(() => _conditions = v!),
            ),

            ElevatedButton(
              onPressed: _soumettre,
              child: const Text("S'inscrire"),
            ),
          ],
        ),
      ),
    );
  }
}

// DropdownButtonFormField
String? _ville;
DropdownButtonFormField<String>(
  value: _ville,
  decoration: const InputDecoration(labelText: 'Ville'),
  items: ['Mons', 'Bruxelles', 'Liège']
      .map((v) => DropdownMenuItem(value: v, child: Text(v)))
      .toList(),
  onChanged: (v) => setState(() => _ville = v),
  validator: (v) => v == null ? 'Choisir une ville' : null,
)

// Mot de passe avec bouton œil
bool _cacheMotDePasse = true;
TextFormField(
  obscureText: _cacheMotDePasse,
  decoration: InputDecoration(
    labelText: 'Mot de passe',
    suffixIcon: IconButton(
      icon: Icon(_cacheMotDePasse ? Icons.visibility : Icons.visibility_off),
      onPressed: () => setState(() => _cacheMotDePasse = !_cacheMotDePasse),
    ),
  ),
)

# pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  http: ^1.2.0        # requêtes HTTP
  dio: ^5.4.0         # alternatif plus puissant

# Installer les dépendances
flutter pub get

import 'package:http/http.dart' as http;
import 'dart:convert';

// Modèle de données
class Meteo {
  final String ville;
  final double temperature;
  final String description;

  Meteo({required this.ville, required this.temperature, required this.description});

  // Désérialisation depuis JSON
  factory Meteo.fromJson(Map<String, dynamic> json) {
    return Meteo(
      ville:       json['name'],
      temperature: json['main']['temp'].toDouble(),
      description: json['weather'][0]['description'],
    );
  }
}

// Appel API
Future<Meteo> fetchMeteo(String ville) async {
  final url = Uri.parse(
    'https://api.openweathermap.org/data/2.5/weather'
    '?q=$ville&appid=CLE&units=metric&lang=fr'
  );

  final response = await http.get(url);

  if (response.statusCode == 200) {
    final data = jsonDecode(response.body);
    return Meteo.fromJson(data);
  } else {
    throw Exception('Erreur ${response.statusCode}');
  }
}

class MeteoWidget extends StatefulWidget {
  @override
  State<MeteoWidget> createState() => _MeteoState();
}

class _MeteoState extends State<MeteoWidget> {
  late Future<Meteo> _meteoFuture;

  @override
  void initState() {
    super.initState();
    _meteoFuture = fetchMeteo('Mons');  // lancer une seule fois
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<Meteo>(
      future: _meteoFuture,
      builder: (context, snapshot) {
        // En cours de chargement
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const CircularProgressIndicator();
        }
        // Erreur
        if (snapshot.hasError) {
          return Text('Erreur : ${snapshot.error}');
        }
        // Données disponibles
        final meteo = snapshot.data!;
        return Column(children: [
          Text(meteo.ville, style: const TextStyle(fontSize: 24)),
          Text('${meteo.temperature}°C'),
          Text(meteo.description),
        ]);
      },
    );
  }
}

// POST — envoyer des données
final response = await http.post(
  Uri.parse('https://api.example.com/users'),
  headers: {'Content-Type': 'application/json'},
  body: jsonEncode({'nom': 'Alice', 'email': 'alice@heh.be'}),
);

# pubspec.yaml
# shared_preferences: ^2.2.2

import 'package:shared_preferences/shared_preferences.dart';

// Sauvegarder
Future<void> sauvegarderPrenom(String prenom) async {
  final prefs = await SharedPreferences.getInstance();
  await prefs.setString('prenom', prenom);
}

// Lire
Future<String?> lirePrenom() async {
  final prefs = await SharedPreferences.getInstance();
  return prefs.getString('prenom');  // null si absent
}

// Supprimer
Future<void> effacerPrenom() async {
  final prefs = await SharedPreferences.getInstance();
  await prefs.remove('prenom');
}

// Types supportés : String, int, double, bool, List<String>
// Cas d'usage : thème clair/sombre, token d'auth, onboarding vu

# pubspec.yaml
# sqflite: ^2.3.2
# path: ^1.9.0

import 'package:sqflite/sqflite.dart';
import 'package:path/path.dart';

class DatabaseHelper {
  static Database? _db;

  static Future<Database> getDatabase() async {
    if (_db != null) return _db!;

    final path = join(await getDatabasesPath(), 'app.db');
    _db = await openDatabase(
      path,
      version: 1,
      onCreate: (db, version) async {
        await db.execute('''
          CREATE TABLE notes(
            id      INTEGER PRIMARY KEY AUTOINCREMENT,
            titre   TEXT NOT NULL,
            contenu TEXT,
            date    TEXT
          )
        ''');
      },
    );
    return _db!;
  }

  // INSERT
  static Future<int> insererNote(Map<String, dynamic> note) async {
    final db = await getDatabase();
    return await db.insert('notes', note);
  }

  // SELECT
  static Future<List<Map>> lireToutesNotes() async {
    final db = await getDatabase();
    return await db.query('notes', orderBy: 'date DESC');
  }

  // DELETE
  static Future<void> supprimerNote(int id) async {
    final db = await getDatabase();
    await db.delete('notes', where: 'id = ?', whereArgs: [id]);
  }
}

meteo_app/
├── lib/
│   ├── main.dart               ← MyApp + routes
│   ├── models/
│   │   └── meteo.dart          ← classe Meteo + fromJson
│   ├── services/
│   │   └── meteo_service.dart  ← fetchMeteo()
│   ├── providers/
│   │   └── favoris_provider.dart ← ChangeNotifier
│   ├── screens/
│   │   ├── accueil_screen.dart ← recherche + météo
│   │   ├── favoris_screen.dart ← liste des favoris
│   │   └── detail_screen.dart  ← prévisions 5j
│   └── widgets/
│       ├── meteo_card.dart     ← carte réutilisable
│       └── loading_widget.dart ← spinner centralisé
├── pubspec.yaml
└── test/
    └── meteo_service_test.dart

name: meteo_app
description: Application météo Flutter

environment:
  sdk: '>=3.0.0 <4.0.0'

dependencies:
  flutter:
    sdk: flutter
  # HTTP
  http: ^1.2.0
  # État global
  provider: ^6.1.0
  # Stockage local
  shared_preferences: ^2.2.2
  # Icônes météo
  flutter_svg: ^2.0.9
  # Formatage des dates
  intl: ^0.19.0

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^3.0.0