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

le_big_dee
PHP

Bonjour à tous, alors je fais une requête http via flutter/dart je reçois un tableau json et je souhaite afficher son contenu dans une sized box ou bien un container , mais vu que j'ignore a l'avance la quantité d'éléments du tableau que j'aurai je souhaiterais générer automatiquement les box en fonction de la taille du tableau mais je sais pas comment faire,est ce que quelqu'un a un début de piste pour moi?merci:

Entourez votre code en utilisant "```" pour bien le mettre en forme. (ne copiez pas trop de code)

Ce que je veux

générer automatiquement des box pour afficher du contenu en fonction de la taille du tableau que je reçcois

Ce que j'obtiens

Décrivez vos éventuelles erreurs ou ce que vous obtenez à la place de ce que vous attendez :(

3 réponses

Ndranto

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

le_big_dee
Auteur

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 :-)

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class StfNouveauCompte extends StatefulWidget {
  const StfNouveauCompte({super.key});

  @override
  State<StfNouveauCompte> createState() => _StfNouveauCompteState();
}

class _StfNouveauCompteState extends State<StfNouveauCompte> {
  String msg="";
  List<dynamic> jsonData = []; 
  final _formKey=GlobalKey<FormState> ();
  final controllernom=TextEditingController();
  final controllerprenoms=TextEditingController();
  final controlleradressemail=TextEditingController();
  final controllerpseudo=TextEditingController();

  @override
  void dispose() {
    super.dispose();
    controllernom.dispose();
    controllerprenoms.dispose();
    controlleradressemail.dispose();
    controllerpseudo.dispose();

  }

Future<void> register(String nom,String prenoms,String mail, telephone,naissance, pseudo, passe1, 
     passe2
    ) async {

    try {

      var url = Uri.parse('https://konamicash.com/register_app');
      final response = await http.post(url, headers: {
        "Accept": "application/json",
        "Access-Control-Allow-Origin": "*"
      },body: {
        "nom_utilisateur":nom,
        "prenoms":prenoms,
        "adresse_mail":mail,
        "numero_de_telephone":telephone,
      });var codes= response.statusCode;
      print('le status code est $codes');

       if(response.statusCode == 200) {
      setState(() {
      var data= jsonDecode(response.body);
      });

      } else {
        print('Error: ${response.statusCode}');
      }
    } catch (e) {
      print('An error occurred: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(

      appBar: AppBar(
        title: Text('Namis.com'),
        backgroundColor: Colors.pink,
      ),
      body:Center(
        child: SingleChildScrollView(
          child: Form(
            key: _formKey,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Container(
                  margin: EdgeInsets.only(bottom: 15),
                  child: Text(
                    'Créer un nouveau compte',
                    style: TextStyle(
                        fontSize: 35,
                        fontWeight: FontWeight.bold,
                        color: Colors.grey.shade400),
                    textAlign: TextAlign.center,
                  ),
                ),
                Container(
                  padding: EdgeInsets.all(20),
                  margin: EdgeInsets.only(bottom: 10),
                  child: TextFormField(
                    keyboardType: TextInputType.text,
                    decoration: InputDecoration(
                      labelText: 'Nom',
                      border: OutlineInputBorder(),
                      suffixIcon: Align(
                        widthFactor: 1.0,
                        heightFactor: 1.0,
                        child: Icon(
                          Icons.person,
                        ),
                      ),
                    ),

                    controller: controllernom,
                  ),
                ),
                Container(
                  padding: EdgeInsets.all(20),
                  margin: EdgeInsets.only(bottom: 10),
                  child: TextFormField(
                    keyboardType: TextInputType.text,
                    decoration: InputDecoration(
                      labelText: 'prénoms',
                      border: OutlineInputBorder(),
                    ),

                    controller: controllerprenoms,
                  ),
                ),

                Container(
                  padding: EdgeInsets.all(20),
                  margin: EdgeInsets.only(bottom: 10),
                  child: TextFormField(
                    keyboardType: TextInputType.emailAddress,
                    decoration: InputDecoration(
                      labelText: 'Adresse mail',
                      border: OutlineInputBorder(),
                      suffixIcon: Align(
                        widthFactor: 1.0,
                        heightFactor: 1.0,
                        child: Icon(
                          Icons.mail,
                        ),
                      ),
                    ),

                    controller: controlleradressemail,
                  ),

                Container(
                  padding: EdgeInsets.all(20),
                  margin: EdgeInsets.only(bottom: 10),
                  child: TextFormField(
                    keyboardType: TextInputType.text,
                    decoration: InputDecoration(
                      labelText: "Pseudo (ce nom apparaîtra sur l'application)",
                      border: OutlineInputBorder(),
                      suffixIcon: Align(
                        widthFactor: 1.0,
                        heightFactor: 1.0,
                        child: Icon(
                          Icons.emoji_emotions,
                        ),
                      ),
                    ),

                    controller: controllerpseudo,
                  ),
                ),
                SizedBox(
                  width: double.infinity,
                  height: 50,
                  child: ElevatedButton(
                    onPressed: () {
                     if (_formKey.currentState!.validate()) {
                        final nom = controllernom.text;
                        final prenoms = controllerprenoms.text;
                        final datedenaissance = controllerdatedenaissance.text;
                        final adressemail = controlleradressemail.text;
                        final telephone = controllertelephone.text;
                        final pseudo = controllerpseudo.text;
                        final motdepasse = controllermotdepasse.text;
                        final confirmationmotdepasse =controllernconfirmationmotdepasse.text;

                        FocusScope.of(context).requestFocus(FocusNode());

                        ScaffoldMessenger.of(context).showSnackBar(
                            const SnackBar(content: Text('Envoi en cours')));

                            register(nom,prenoms,adressemail,telephone,datedenaissance,pseudo,motdepasse,confirmationmotdepasse);
                            ListView.builder(itemCount:jsonData.length,
                             itemBuilder:(context,index){
                              return Container(margin:EdgeInsets.all(8.0),
                              padding: EdgeInsets.all(16.0),
                              color: Colors.blueAccent,
                              child: Text(jsonData[index].toString(),style: TextStyle(color:Colors.white),),);
                             });
                        }
                    },
                    child: Text('Créer le compte'),
                  ),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text("J'ai déjà un compte..."),
                    TextButton(
                      onPressed: () {},
                      child: Text(
                        'Je me connecte',
                        style:
                            TextStyle(color: Color.fromARGB(255, 245, 11, 11)),
                      ),
                    ),
                  ],
                ),

              ],
            ),
          ),
        ),
      ),
    );
  }
}
moabi

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
                      ],
                    ),
                  ),
                ),
              );
            },
          ),
  );
}

}