TP14.2 JSON et Flutter Comment Gérer les Données Locales Facilement
- Posted by Riadh HAJJI
- Categories Flutter
- Date 3 janvier 2025
- La classe path_provider dans Flutter
- Travailler avec des fichiers dans Flutter
- Lire et écrire à partir du disque dans Flutter
- Lire et Écrire du JSON dans Flutter
- TP14 Gestion des répertoires avec path_provider
- TP14.1 Gestion des fichiers avec path_provider
- TP14.2 JSON et Flutter Comment Gérer les Données Locales Facilement
JSON et Flutter Comment Gérer les Données Locales Facilement
-
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.
-
Enoncé
-
Solution
-
Fichier
main.dart
-
Fichier
user.dart
-
Fichier
UserListScreen.dart
-
Fichier
AddUserScreen.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(),
);
}
}
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,
};
}
}
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,
),
),
);
},
),
);
}
}
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'),
),
],
),
),
);
}
}
Riadh HAJJI
You may also like
Examen Dart
23 mai, 2025
Programmation asynchrone en Dart Examen Dart Objectis Cours Dart
Se connecter à Flutter avec Node js MySQL
20 mai, 2025
Se connecter à Flutter avec PHP MySQL Se connecter à Flutter avec Node js MySQL Objectif À la fin de ce tutoriel, vous serez capable de : Créer une base de données MySQL simple pour l’authentification. Écrire un backend …
Se connecter à Flutter avec PHP MySQL
11 mai, 2025
Se connecter à Flutter avec PHP MySQL Lire et écrire dans Firestore avec Flutter Objectif À la fin de ce tutoriel, vous serez capable de : Créer une base de données MySQL simple pour l’authentification. Écrire un backend PHP …