TP14.2 JSON et Flutter Comment Gérer les Données Locales Facilement

JSON et Flutter Comment Gérer les Données Locales Facilement

1. Objectifs

   • Comprendre l'utilisation du format JSON.
   • Manipuler des fichiers JSON en Flutter.
   • Créer une petite application Flutter permettant de gérer localement des données.

2. Enoncé

3. Solution

   1. Fichier main.dart

      Code

      import 'package:flutter/material.dart';
      import 'UserListScreen.dart'; // Import de l'écran principal
      
      void main() {
        runApp(MyApp());
      }
      
      class MyApp extends StatelessWidget {
        @override
        Widget build(BuildContext context) {
          return MaterialApp(
            title: 'Gestion JSON',
            theme: ThemeData(primarySwatch: Colors.blue),
            home: UserListScreen(),
          );
        }
      }
      

   2. Fichier user.dart

      Code

      class User {
        final int id;
        String name;
        int age;
      
        User({required this.id, required this.name, required this.age});
      
        // Convertir un objet JSON en instance de User
        factory User.fromJson(Map json) {
          return User(
            id: json['id'],
            name: json['name'],
            age: json['age'],
          );
        }
      
        // Convertir une instance de User en JSON
        Map toJson() {
          return {
            'id': id,
            'name': name,
            'age': age,
          };
        }
      }
      

   3. Fichier UserListScreen.dart

      Code

      import 'package:flutter/material.dart';
      import 'user.dart';
      import 'AddUserScreen.dart';
      import 'dart:convert';//Ce package permet de convertir des objets Dart en JSON et inversement
      import 'dart:io';//Fournit des outils pour interagir avec le système de fichiers de l'appareil.
      import 'package:path_provider/path_provider.dart';// Ce package permet de localiser des répertoires spécifiques sur l'appareil 
      
      class UserListScreen extends StatefulWidget {
        @override
        _UserListScreenState createState() => _UserListScreenState();
      }
      
      class _UserListScreenState extends State {
        List users = [];
      
        @override
        void initState() {
          super.initState();
          _loadJson();
        }
      
        Future<void> _loadJson() async {
          try {
            final directory = await getApplicationDocumentsDirectory();
            final file = File('${directory.path}/data.json');
      
            if (await file.exists()) {
              final String response = await file.readAsString();
              final List data = jsonDecode(response);
              setState(() {
                users = data.map((json) => User.fromJson(json)).toList();
              });
            } else {
              users = [];
            }
          } catch (e) {
            print('Erreur lors du chargement du JSON : $e');
          }
        }
      
        Future<void> _saveJson() async {
          try {
            final directory = await getApplicationDocumentsDirectory();
            final file = File('${directory.path}/data.json');
      
            final List

   4. Fichier AddUserScreen.dart

      Code

      import 'package:flutter/material.dart';
      import 'user.dart';
      
      class AddUserScreen extends StatelessWidget {
        final Function(User) onAddUser;
      
        AddUserScreen({required this.onAddUser});
      
        final TextEditingController nameController = TextEditingController();
        final TextEditingController ageController = TextEditingController();
      
        @override
        Widget build(BuildContext context) {
          return Scaffold(
            appBar: AppBar(
              title: Text('Ajouter un Utilisateur'),
            ),
            body: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Column(
                children: [
                  TextField(
                    controller: nameController,
                    decoration: InputDecoration(labelText: 'Nom'),
                  ),
                  TextField(
                    controller: ageController,
                    decoration: InputDecoration(labelText: 'Âge'),
                    keyboardType: TextInputType.number,
                  ),
                  SizedBox(height: 20),
                  ElevatedButton(
                    onPressed: () {
                      final String name = nameController.text;
                      final int? age = int.tryParse(ageController.text);
      
                      if (name.isNotEmpty && age != null) {
                        final newUser = User(
                          id: DateTime.now().millisecondsSinceEpoch,
                          name: name,
                          age: age,
                        );
                        onAddUser(newUser);
                        Navigator.pop(context);
                      } else {
                        ScaffoldMessenger.of(context).showSnackBar(
                          SnackBar(content: Text('Veuillez remplir tous les champs.')),
                        );
                      }
                    },
                    child: Text('Ajouter'),
                  ),
                ],
              ),
            ),
          );
        }
      }
      

   ---

   Cours Flutter