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> jsonData =
          users.map((user) => user.toJson()).toList();

      await file.writeAsString(jsonEncode(jsonData));

      ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('Données sauvegardées avec succès !')));
    } catch (e) {
      print('Erreur lors de la sauvegarde du JSON : $e');
    }
  }

  void _editUser(User user) {
    TextEditingController nameController = TextEditingController(text: user.name);
    TextEditingController ageController = TextEditingController(text: user.age.toString());

    showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: Text('Modifier Utilisateur'),
          content: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              TextField(
                controller: nameController,
                decoration: InputDecoration(labelText: 'Nom'),
              ),
              TextField(
                controller: ageController,
                decoration: InputDecoration(labelText: 'Âge'),
                keyboardType: TextInputType.number,
              ),
            ],
          ),
          actions: [
            TextButton(
              onPressed: () {
                setState(() {
                  user.name = nameController.text;
                  user.age = int.tryParse(ageController.text) ?? user.age;
                });
                Navigator.of(context).pop();
                _saveJson();
              },
              child: Text('Enregistrer'),
            ),
            TextButton(
              onPressed: () => Navigator.of(context).pop(),
              child: Text('Annuler'),
            ),
          ],
        );
      },
    );
  }

  void _addUser(User user) {
    setState(() {
      users.add(user);
    });
    _saveJson();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Liste des Utilisateurs'),
        actions: [
          IconButton(
            icon: Icon(Icons.save),
            onPressed: _saveJson,
          ),
        ],
      ),
      body: ListView.builder(
        itemCount: users.length,
        itemBuilder: (context, index) {
          final user = users[index];
          return ListTile(
            title: Text(user.name),
            subtitle: Text('Âge: ${user.age}'),
            trailing: IconButton(
              icon: Icon(Icons.edit),
              onPressed: () => _editUser(user),
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => AddUserScreen(
                onAddUser: _addUser,
              ),
            ),
          );
        },
      ),
    );
  }
}

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