TextField value changes for all cards

Question

I am building gym diary and have "cards" for each moves which includes " sets reps kg". So the code generates as many cards "Squat" and "Front-squat" in the view. The problem here is that I use controllerSets in both cards. If I change the "squat" sets number to "2" then "front-squat" number also changes to "2" because it uses the same controllerSets TextEditingController. This is my problem and please consider that there can be even 10 moves and I don't think I want to create 10 x 3 controllers for each of them. My question is how should I build this feature? the full code can be found here:

return Column(
  children: <Widget>[
    Text(
      _programMovesGen(program)[index],
      textAlign: TextAlign.center,
      style: TextStyle().copyWith(color: Colors.black, fontSize: 18.0),
    ), // Move name
    Row(
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        new Flexible(
          child: Padding(
            padding: const EdgeInsets.all(18.0),
            child: new TextFormField(
                controller: controllerSets,
                keyboardType: TextInputType.number,
                inputFormatters: [
                  LengthLimitingTextInputFormatter(2),
                ]),
          ),
        ),
        Text(
          "sets ",
          textAlign: TextAlign.center,
          style: TextStyle().copyWith(color: Colors.black, fontSize: 18.0),
        ),
        new Flexible(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: new TextFormField(
                controller: controllerReps,
                keyboardType: TextInputType.number,
                inputFormatters: [
                  LengthLimitingTextInputFormatter(2),
                ]),
          ),
        ),
        Text(
          "reps",
          textAlign: TextAlign.center,
          style: TextStyle().copyWith(color: Colors.black, fontSize: 18.0),
        ),
        new Flexible(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: new TextFormField(
                controller: controllerKgs,
                keyboardType: TextInputType.number,
                inputFormatters: [
                  LengthLimitingTextInputFormatter(2),
                ]),
          ),
        ),
        Text(
          "kg",
          textAlign: TextAlign.center,
          style: TextStyle().copyWith(color: Colors.black, fontSize: 18.0),
        ),
        Container(
            height: 60,
            width: 60,
            margin: const EdgeInsets.all(16.0),
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              border: Border.all(
                color: Colors.pink,
                width: 3.5,
              ),
            ),
            child: IconButton(
                icon: Icon(
                  IconData(57669, fontFamily: 'MaterialIcons'),
                  size: 38,
                  color: Colors.red,
                ),
                onPressed: () => {
                      _saveMove(_programMovesGen(program)[index]),
                    })),

        ///TODO add to db and previous added move
      ],
    ),
  ],
);

}

https://pastebin.com/m6zVLUAD

Answer 1

Make arrays of your TextEditingControllers like this:

List<TextEditingController> controllerSets = new List<TextEditingController>();
List<TextEditingController> controllerReps = new List<TextEditingController>();
List<TextEditingController> controllerKgs = new List<TextEditingController>();

TextEditingController sets = new TextEditingController(text: '3');
TextEditingController reps = new TextEditingController(text: '6');
TextEditingController kgs = new TextEditingController(text: '60');

in your initState method, do this:

@override
void initState() {
  super.initState();
}

Now pass that list index in the _saveMove function, so it will look like this:

_saveMove(String moveName, int index) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    setState(() {
      debugPrint("BEFORE SAVEDMOVES " + savedMoves);

      savedMoves += (moveName != "")
          ? moveName +
              ": " +
              controllerSets[index].text +
              " sets " +
              controllerReps[index].text +
              " reps " +
              controllerKgs[index].text +
              " kg\n"
          : "";
      prefs.setString('history', savedMoves);
    });
  }

Your _buildCardContent() function will be changed, as you have to pass index in the controllers list as well:

Widget _buildCardContent(int index) {
    controllerSets.add(sets);
    controllerReps.add(reps);
    controllerKgs.add(kgs);

    return Column(
      children: <Widget>[
        Text(
          _programMovesGen(program)[index],
          textAlign: TextAlign.center,
          style: TextStyle().copyWith(color: Colors.black, fontSize: 18.0),
        ), // Move name
        Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            new Flexible(
              child: Padding(
                padding: const EdgeInsets.all(18.0),
                child: new TextFormField(
                    controller: controllerSets[index],
                    keyboardType: TextInputType.number,
                    inputFormatters: [
                      LengthLimitingTextInputFormatter(2),
                    ]),
              ),
            ),
            Text(
              "sets ",
              textAlign: TextAlign.center,
              style: TextStyle().copyWith(color: Colors.black, fontSize: 18.0),
            ),
            new Flexible(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: new TextFormField(
                    controller: controllerReps[index],
                    keyboardType: TextInputType.number,
                    inputFormatters: [
                      LengthLimitingTextInputFormatter(2),
                    ]),
              ),
            ),
            Text(
              "reps",
              textAlign: TextAlign.center,
              style: TextStyle().copyWith(color: Colors.black, fontSize: 18.0),
            ),
            new Flexible(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: new TextFormField(
                    controller: controllerKgs[index],
                    keyboardType: TextInputType.number,
                    inputFormatters: [
                      LengthLimitingTextInputFormatter(2),
                    ]),
              ),
            ),
            Text(
              "kg",
              textAlign: TextAlign.center,
              style: TextStyle().copyWith(color: Colors.black, fontSize: 18.0),
            ),
            Container(
                height: 60,
                width: 60,
                margin: const EdgeInsets.all(16.0),
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  border: Border.all(
                    color: Colors.pink,
                    width: 3.5,
                  ),
                  /*gradient: RadialGradient(
                  radius: 0.50,
                  colors: [
                    Colors.blue,
                    Colors.yellowAccent,
                  ],
                ),*/
                ),
                child: IconButton(
                    icon: Icon(
                      IconData(57669, fontFamily: 'MaterialIcons'),
                      size: 38,
                      color: Colors.red,
                    ),
                    onPressed: () => {
                          _saveMove(_programMovesGen(program)[index], index),
                        })),

            ///TODO add to db and previous added move
          ],
        ),
      ],
    );
  }