Générer automatiquement des container ou sized box avec flutter

Pour générer automatiquement des Container ou SizedBox en fonction de la taille d'un tableau JSON que tu reçois via une requête HTTP dans Flutter/Dart, tu peux utiliser un ListView.builder(). Ce widget permet de créer un nombre dynamique de widgets en fonction de la taille du tableau. Voici comment tu pourrais le faire :

Effectuer la requête HTTP : Assure-toi de recevoir et de décoder ton tableau JSON.

Utiliser un ListView.builder : Ce widget est parfait pour générer un nombre de widgets dynamiquement en fonction de la longueur de ton tableau.

Voici un exemple de code pour t'aider :

dart

import 'package:flutter/material.dart';
import 'dart:convert'; // pour la conversion JSON
import 'package:http/http.dart' as http;

class MyWidget extends StatefulWidget {
@override
_MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
List<dynamic> jsonData = []; // Tableau pour stocker les données JSON

// Fonction pour effectuer la requête HTTP
Future<void> fetchData() async {
final response = await http.get(Uri.parse('URL_DE_TA_REQUETE'));

if (response.statusCode == 200) {
  setState(() {
    jsonData = json.decode(response.body); // Décodage du JSON reçu
  });
} else {
  throw Exception('Erreur lors du chargement des données');
}

}

@override
void initState() {
super.initState();
fetchData(); // Charger les données au démarrage
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Données JSON')),
body: jsonData.isEmpty
? Center(child: CircularProgressIndicator()) // Afficher un indicateur de chargement
: ListView.builder(
itemCount: jsonData.length, // Générer autant de widgets qu'il y a d'éléments
itemBuilder: (context, index) {
return Container(
margin: EdgeInsets.all(8.0),
padding: EdgeInsets.all(16.0),
color: Colors.blueAccent,
child: Text(
jsonData[index].toString(), // Afficher le contenu de chaque élément
style: TextStyle(color: Colors.white),
),
);
},
),
);
}
}
Explications :
ListView.builder : Il génère automatiquement un nombre d'éléments en fonction de la longueur du tableau JSON (jsonData.length).
itemBuilder : Cette fonction permet de créer dynamiquement les Container pour chaque élément du tableau.
fetchData() : Cette fonction effectue la requête HTTP et stocke les données reçues dans le tableau jsonData.
Avec cette approche, tu pourras afficher dynamiquement le contenu de ton tableau JSON dans des Container ou SizedBox, selon la taille du tableau

Je suis Rodin un étudiant en informatique si vous avez encore besoin de l'aide n'hesitez pas a me contacter
linkedin: www.linkedin.com/in/rodin-randriamandranto-520642328

Je propose aussi des service sur comeup.com:
https://comeup.com/fr/@rodin-creation

Bonjour et merci pour ta réponse , alors j'ai suivi tes instructions et voici ci dessous le code que j'ai produit , mais les messages de ma requete ne s'affichent pas hélas: en fait je suis en train de faire le système de création de compte de mon application,j'ai une page php qui va traiter la requete en post de mon application et retourner des méssages en cas d'erreurs si jamais l'utilisateur a commis une faute lors de l'inscription(format de l'adresse mail incorrecte, mot de passe non valide etc...), et comme je ne sais pas d'avance l'erreur qui sera commise par l'utilisateur, d'ou la necessité de générer automatiquement des container ou des listview en fonction de la taille du tableau d'erreur retourner par ma page php, voilà tout mon problème :-)

Pour afficher dynamiquement le contenu d'un tableau JSON reçu via une requête HTTP dans Flutter, il est possible d'utiliser une ListView.builder

import 'package:flutter/material.dart';
import 'dart:convert'; // pour jsonDecode
import 'package:http/http.dart' as http; // pour les requêtes HTTP

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Affichage JSON',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: JsonListScreen(),
    );
  }
}

class JsonListScreen extends StatefulWidget {
  @override
  _JsonListScreenState createState() => _JsonListScreenState();
}

class _JsonListScreenState extends State<JsonListScreen> {
  List<dynamic> _data = []; // Stocker les données JSON

@override
void initState() {
  super.initState();
  fetchData(); // Appel à l'API dès l'initialisation du widget
}

Future<void> fetchData() async {
  final response = await http.get(Uri.parse('https://api.example.com/data')); // Remplacez par l'URL de votre API

  if (response.statusCode == 200) {
    setState(() {
      _data = jsonDecode(response.body); // Décodez la réponse JSON et mettez-la dans la liste _data
    });
  } else {
    throw Exception('Échec de chargement des données');
  }
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Affichage JSON dynamique'),
    ),
    body: _data.isEmpty
        ? Center(child: CircularProgressIndicator()) // Indicateur de chargement
        : ListView.builder(
            itemCount: _data.length, // Nombre d'éléments dans la liste
            itemBuilder: (context, index) {
              return SizedBox(
                height: 100, // Taille de la Box
                child: Card(
                  margin: EdgeInsets.all(8),
                  child: Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          'Titre: ${_data[index]['title']}', // Par exemple, un titre depuis le JSON
                          style: TextStyle(
                            fontSize: 18,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        Text('Description: ${_data[index]['description']}'), // Par exemple, une description
                      ],
                    ),
                  ),
                ),
              );
            },
          ),
  );
}

}