Débutant: Retrouver les données d’un fichier Json simple avec Flutter

Comment retrouver les données d’une liste json dans Flutter?

Le backend

Pour retrouver les données, nous allons définir une liste json dans notre fichier dart. Nous utiliserons les données suivantes :

Prénom: Lucie ; Nom: Dupont. On va placer ces données sous le format json comme ceci: {“prénom”: “Lucie”, “nom” : “Dupont”}

Pourquoi utiliser des accolades? 

C’est comme cela que la déclaration d’une liste json fonctionne. Nous y sommes contraint.

Pour obtenir les données de cette liste, on va utiliser la fonction Future.

Future sert à retourner une valeur potentielle future dont on ne connait pas encore le résultat notamment parce qu’elle peut prendre du temps à être obtenue s’y l’on utilise de larges listes. On va aussi écrire async et donc importer le package dart async.

import'dart:async';

On va aussi qualifier quel type de donnée on va retourner, ici ce sont des String donc on va écrire la fonction suivante:

Future<String> loadName() async {
var content = '{"prénom": "Lucie", "nom" : "Dupont"}';

var data = jsonDecode(content); jsonDecode signifie que l’on va analyser la variable content et la décoder donc la faire passer d’un format json à un format employable pour requérir certaines données.

String name = data[‘prénom’]; ici nous inscrivons une nouvelle variable dont nous voulons qu’elle requiert la donnée qui correspond au prénom

return name; Puis nous demondons que la fonction retourne la fonction en question. Nous obtenons donc un code comme ceci à la fin:

Future<String> loadName() async {  
var content = '{"prénom": "Lucie", "nom" : "Dupont"}';  
var data = jsonDecode(content);  
String name = data['prénom'];  
return name;}

L’UI

Pour l’UI nous allons utiliser la fonction FutureBuilder et nous allons spécifier que nous allons retourner des strings donc FutureBuilder<String>

On spécifie ensuite le future que nous allons retourner ici c’est loadName()

Le FutureBuilder nous impose d’entrer un builder. Nous allons donc utiliser BuildContext comme à l’accoutumée. Puis nous incorporons AsyncSnapshot qui est une « représentation immuable » selon les docs de flutter.

Pour résumer, c’est une indicateur de l’état de connexion de notre Future. On va donc pour faire plus simple appeler cette connexion snapshot. Et on utilise le widget du package async .connectionState et .has error pour signifier ce qu’il faut faire en cas d’erreur et de connexion.

On va utiliser les « Switch Case Statement » pour réguler ces expressions. Vous pouvez obtenir d’autres informations sur le site de tutorialspoint.

Et voilà le résultat final:

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

class TestPage extends StatelessWidget { 
@override 
Widget build(BuildContext context) { 
return Material( 
child: Center( 
child: FutureBuilder<String>( 
future: loadName(), 
builder: (BuildContext context, AsyncSnapshot<String> snapshot) { switch (snapshot.connectionState) { 
case ConnectionState.waiting: return Text('data'); 
default: if (snapshot.hasError) {
return Text('Error');} 
else {return Text('${snapshot.data}');} } }), )); }}

Future<String> loadName() async { 
var content = '{"prénom": "Lucie", "nom" : "Dupont"}'; 
var data = jsonDecode(content); String name = data['prénom']; 
return name;}

Le résultat:

Voilà, maintenant vous savez comment retrouver les données d’une liste json avec flutter.

Laisser un commentaire