fluttervariablesdynamic-forms

Flutter - Creating Multiple Variables Dynamically for each item in list

Hello there i have a simple form basically it will show the article name and all of its services beneath it and in the same row there will be + and - buttons that will increment the variable but the problem here is that i don't know exactly how much services will be there because the services will be created and linked from other sections in the application , However i can get the list's length using ListName.length

here is a sample code

      int quantity = 0;
              Column(
                    children: <Widget>[
                      articleName(article),
                      Column(
                        children: List.generate(price.length, (index) =>
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: <Widget>[
                                Container(
                                  padding: EdgeInsets.all(10),
                                  child: Text(
                                    translator.currentLanguage == 'ar' ?
                                    '${price[index].serviceNameAr}'
                                        :'${price[index].serviceNameEn}',
                                    style: TextStyle(
                                      fontSize: responsivenessController.font,
                                    ),
                                  ),
                                ),
                                Text('${price[index].price}' ,
                                  style: TextStyle(
                                    fontSize: responsivenessController.bodyFont,
                                  ),
                                ),
                               FloatingActionButton(
                                onPressed: (){
                                  setState(() {
                                    quantity = quantity + 1;
                                  });
                                },
                                child:  Icon(Icons.add, color: Colors.black,),
                                backgroundColor: Colors.white,
                               ),

                               Text('$quantity',
                                  style:  TextStyle(fontSize: responsivenessController.font)),

                               FloatingActionButton(
                                onPressed: (){
                                  setState(() {
                                    quantity = quantity - 1;
                                  });
                                },
                                child: Icon(Icons.remove , color: Colors.black,),
                                backgroundColor: Colors.white,
                               ),
                            ],
                          )
                        ),
                      )

as you can see if you clicked the add button on the third service , for example , all of the other services will have the same quantity because they share the same variable

What i want here is when the user submits the form i want to have

  1. article id -> exists from previous code
  2. service id -> exists
  3. quantity -> the one causing the problem
  4. price -> depends on quantity

Please share with me your thoughts and what will you do if you face such a problem

Solution

  • You need a List to keep your quantities. Lists are similar to arrays from other programming languages.
    Try something like this:

    List<int> quantities = [];
// initializing the list with the lenth provided
for(int i = 0; i<price.length; i++){
  quantities.add(0);
}

    And use the list this way inside your setState:

    quantities[index] = quantities[index] + 1 (or quantities[index]++;)
quantities[index] = quantities[index] - 1 (or quantities[index]--;)