skip to Main Content

since i don’t know the number of elements i will receive from my http request with flutter and dart i want to generate automaticaly cards or even container to diplay my results, here is my code that doesn’t work, please coorect me thanks alot:

import 'dart:convert';
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="";
  var jsonList;
  final _formKey=GlobalKey<FormState> ();
  final controllernom=TextEditingController();
  final controllernconfirmationmotdepasse=TextEditingController();

  @override
  void dispose() {
    super.dispose();
    controllernom.dispose();
    controllernconfirmationmotdepasse.dispose();
  }



Future<void> register(String nom,String prenoms,String mail, telephone,naissance, pseudo, passe1, 
     passe2
    ) async {
      setState(() {
        msg='';
      });
    try {
      
      var url = Uri.parse('https://konamicash.com/register_app');
      var response = await http.post(url, headers: {
        "Accept": "application/json",
        "Access-Control-Allow-Origin": "*"
      },body: {
        "nom_utilisateur":nom,
        "confirmation_du_mot_de_passe":passe2,
      });var codes= response.statusCode;
   

       if(response.statusCode == 200) {
      setState(() {
        var data= json.decode(response.body);
      
      });
        print('it works: ${data}');
      
       print(data.length);var count=data.length;
       final List<int> _itemList=List<int>.generate(count,(index)=>index);
                       ListView.builder(itemBuilder: (BuildContext context,int index){
                  return Card(
                    key:Key('$index'),
                    child: ListTile(
                      title: Text('$data[0]'),
                    ),
                  );

                },);
      

      } 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(
                    'Register',
                    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,
                        ),
                      ),
                    ),),),
                   
                Container(
                  padding: EdgeInsets.all(20),
                  margin: EdgeInsets.only(bottom: 10),
                  child: TextFormField(
                    obscureText: true,
                    keyboardType: TextInputType.text,
                    decoration: InputDecoration(
                      labelText: 'password',
                      border: OutlineInputBorder(),
                    ),
                   
                    controller: controllernconfirmationmotdepasse, 
                  ),
                ),
                SizedBox(
                  width: double.infinity,
                  height: 50,
                  child: ElevatedButton(
                    onPressed: () {
                     if (_formKey.currentState!.validate()) {
                        final nom = controllernom.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);
                        }
                    },
                    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)),
                      ),
                    ),
                  ],
                ),
                //just bellow the sized box where i want to display my different message result_message
                SizedBox(height:30 ,),
                Text(msg, style: TextStyle(color: Colors.red),),

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

to create the right number of container or cards to put the results of my http request in

2

Answers


  1. Use FutureBuilder

    you can check the link for more details about FutureBuilder

    edit your register function to return data then use FutureBuilder to view list of data inside build

    Future  register(String nom,String prenoms,String mail, telephone,naissance, pseudo, passe1, 
         passe2
        ) async {
          setState(() {
            msg='';
          });
        try {
          
          var url = Uri.parse('https://konamicash.com/register_app');
          var response = await http.post(url, headers: {
            "Accept": "application/json",
            "Access-Control-Allow-Origin": "*"
          },body: {
            "nom_utilisateur":nom,
            "confirmation_du_mot_de_passe":passe2,
          });var codes= response.statusCode;
       
    
           if(response.statusCode == 200) {
         
           return  json.decode(response.body);
           
    
          } else {
            print('Error: ${response.statusCode}');
          }
        } catch (e) {
          print('An error occurred: $e');
        }
       }
    
    Login or Signup to reply.
  2. i try to fix you code.

    I assume the response from the API is a List ([]), because you use the data like a List as data[0].

    I already commented what i add and the use of the code.

    import 'dart:convert';
    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 = "";
      var jsonList;
      final _formKey = GlobalKey<FormState>();
      final controllernom = TextEditingController();
      final controllernconfirmationmotdepasse = TextEditingController();
    
      // New variable to save the data from API
      List dataFromApi = [];
    
      @override
      void dispose() {
        super.dispose();
        controllernom.dispose();
        controllernconfirmationmotdepasse.dispose();
      }
    
      // A function that return the ListView that contain the data from API
      ListView getListView() {
        return ListView.builder(
          // Use dataFromApi length
          // So if dataFromApi is empty, it will not showing anything.
          itemCount: dataFromApi.length,
          itemBuilder: (BuildContext context, int index) {
            return Card(
              key: Key('$index'),
              child: ListTile(
                // Use [dataFromApi] value
                title: Text('$dataFromApi[0]'),
              ),
            );
          },
        );
      }
    
      Future<void> register(String nom, String prenoms, String mail, telephone,
          naissance, pseudo, passe1, passe2) async {
        setState(() {
          msg = '';
        });
        try {
          var url = Uri.parse('https://konamicash.com/register_app');
          var response = await http.post(url, headers: {
            "Accept": "application/json",
            "Access-Control-Allow-Origin": "*"
          }, body: {
            "nom_utilisateur": nom,
            "confirmation_du_mot_de_passe": passe2,
          });
          var codes = response.statusCode;
    
          if (response.statusCode == 200) {
    
            // assign data from API
            dataFromApi = json.decode(response.body);
    
            // Show dataFromApi
            print(dataFromApi.length);
    
            // Rebuild state to inform state that [dataFromApi] is changed it's value
            setState(() {});
          } 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(
                        'Register',
                        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,
                            ),
                          ),
                        ),
                      ),
                    ),
    
                    Container(
                      padding: EdgeInsets.all(20),
                      margin: EdgeInsets.only(bottom: 10),
                      child: TextFormField(
                        obscureText: true,
                        keyboardType: TextInputType.text,
                        decoration: InputDecoration(
                          labelText: 'password',
                          border: OutlineInputBorder(),
                        ),
                        controller: controllernconfirmationmotdepasse,
                      ),
                    ),
                    SizedBox(
                      width: double.infinity,
                      height: 50,
                      child: ElevatedButton(
                        onPressed: () {
                          if (_formKey.currentState!.validate()) {
                            final nom = controllernom.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);
                          }
                        },
                        child: Text('Créer le compte'),
                      ),
                    ),
    
                    // New widget to show ListView
                    // 
                    // [ListView] need an expanded widget to take all the remining height,
                    // since this page using [SingleChildScrollView] so we need to define the height.
                    Container(
                      width: double.infinity,
                      height: 500,
                      margin: const EdgeInsets.all(16),
                      child:  getListView(),
                    ),
    
                    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)),
                          ),
                        ),
                      ],
                    ),
                    //just bellow the sized box where i want to display my different message result_message
                    SizedBox(
                      height: 30,
                    ),
                    Text(
                      msg,
                      style: TextStyle(color: Colors.red),
                    ),
                  ],
                ),
              ),
            ),
          ),
        );
      }
    }
    

    This is just the basic example to use the data for the widget. I suggest you to learn FutureBuilder for data fetching from API.

    Hope it helps! If you have any question please just ask:) thanks.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search