Créer une liste avec un fichier local Json – Flutter

Si vous êtes débutant avec Flutter, vous avez certainement déjà appris à créer des listes statiques avec les class ListView et ListTile. Mais certainement pas avec un fichier local json.

Maintenant pour complexifier, on peut en créer en écrivant moins de code à partir d’un fichier qui va résumer les titres de nos tiles. On va pour ce faire utiliser un fichier local Json.

Vous pouvez vous rendre sur un éditeur de fichier Json en ligne pour en écrire un; voici celui que nous allons utiliser ici:

["Top hashtags","Food","Likes and followers"]

On va ensuite l’ajouter dans le fichier pubspec.yaml de notre projet.

Le chargement de notre fichier local json

Pour charger le fichier json de manière locale on va créer une fonction Future<List> puisque nous voulons que notre application nous renvoie une liste quand elle sera disponible. Le chargement sera donc asynchrone. On va donc importer deux packages:

import 'package:flutter/services.dart';
import 'dart:async';

Puis on va récupérer notre liste sous la forme d’un String avec un asset Bundle qui va chercher notre fichier json à la racine de notre projet:

rootBundle.loadString('assets/json/jsonV5.json');

Ensuite on va décoder ce string de manière à obtenir une liste. Oui je sais c’est étrange d’avoir transformé notre fichier en String puis de le retransformer en liste mais c’est la manière la plus simple actuellement. On va donc utiliser la fonction jsonDecode() qui va nous retourner une liste utilisable. On obtient ceci:

Future<List> loadAssets() async {
    var loadedAssets = await rootBundle.loadString('assets/json/jsonV5.json');
    List parsedJson = jsonDecode(loadedAssets);
    return parsedJson;
  }

Future builder et ListView builder

Comme nos données vont êtres asynchrones, on va utiliser un future builder de liste donc Future.builder<List> et aussi la class AsyncSnapshot<List> qui va nous permettre de réutiliser le résultat de notre future par la suite dans notre ListView.builder.

FutureBuilder<List>(
          future: loadAssets(),
          builder: (BuildContext context, AsyncSnapshot<List> snapshot)

Ensuite on va utiliser le Switch case statement pour prévoir les différents cas comme: l’erreur, la connexion en cours et la connexion réussie.

switch (snapshot.connectionState) {
              case ConnectionState.waiting:
                return Center(child: CircularProgressIndicator());
              default:
                if (snapshot.hasError) {
                  return Text('Error');

Enfin, on va retourner notre ListView.builder qui requiert deux arguments: itemCount et itemBuilder. On va donc réutiliser notre valeur snapshot et von utiliser integer .length pour obtenir la longueur de notre liste.

 itemCount: snapshot.data.length,

On va faire de même avec notre tile qui sera ici plutôt une Card() qui relativement proche et dans lequel on va insérer notre snapshot qui va varier selon les 3 éléments de notre liste: Top hashtags, Food, Likes and followers. On va donc dans notre builder renseigner selon sous la forme d’un int index.

ListView.builder(
                      itemCount: snapshot.data.length,
                      itemBuilder: (BuildContext context, int index) {
                        return Card(child: Text(snapshot.data[index]));
                      })

Et voilà, vous êtes parvenu à charger votre fichier Json local dans votre application Flutter! Vous devez obtenir ce résultat:

Gérer une Liste Json locale avec Futter

Pour apprendre comment retourner une données en particulier d’une map json, c’est par ici!

Laisser un commentaire