flutter dropdown button selection issue

Question

hello guys i'm just starting flutter i'm on a little project , a checklist project to be precise i have created a checklist i loaded the text from a List to a ListTile and i've loaded the dropdownbutton with answers , but when i click on on dropdownbutton the whole button get changed on the same time and how to put the dropdownbutton on the right ?? (check the gif)

and i want to make the text loaded more readable inside the cells , here is the code , and thanks in advance.

   import 'package:flutter/material.dart';

class Check_lists extends StatefulWidget {
  String sug_one;
  String sug_two;
  Check_lists(this.sug_one, this.sug_two);

  @override
  State<Check_lists> createState() => _Check_listsState();
}

class _Check_listsState extends State<Check_lists> {
  String dropdownValue = "Not Done";
  int index = 0;
  List<String> propositions = <String>[
    "Single line spacing",
    "Title set below the 2 top margin",
    "Title not exceeding 15 words (including articles,prepositions and conjunctions)",
    "Title in uppercase",
    "Title arranged in an inverted pyramid",
    "All parts centered, and in boldface",
    "4 line skips (5 enter presses) between parts",
    "First name, middle initial(s), last name format for the author’s names",
    "Leader's name followed by members names",
    "alphabetized by surname",
    "Date of proposal stated as month, day, year",
    "Start of pagination"
  ];
  //List<String> answer = ["Done", "partially Done", "Not Done"];
  List<String> selectedItemValue = <String>[];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: const Color.fromRGBO(82, 113, 255, 25),
          title: Row(
            children: [
              Container(
                  padding: const EdgeInsets.all(10.0),
                  child: const Text('CHEKILI Table of Content'))
            ],
          ),
        ),
        body: Column(
          children: <Widget>[
            Flexible(
              child: ListView.builder(
                itemCount: propositions.length,
                itemExtent: 50.0,
                itemBuilder: (BuildContext context, int index) {
                  for (int i = 0; i < propositions.length; i++) {
                    selectedItemValue.add("Not Done");
                  }
                  return ListTile(
                    title: Text("${propositions[index]}"),
                    leading: _dropdown(),
                  );
                },
              ),
            ),
          ],
        ));
  }

  Widget _dropdown() {
    return DropdownButton<String>(
      isExpanded: false,
      value: selectedItemValue[index].toString(),
      items: _dropDownItem(),
      onChanged: (value) {
        selectedItemValue[index] = value as String;
        setState(() {});
      },
    );
  }

  List<DropdownMenuItem<String>> _dropDownItem() {
    List<String> ddl = ["Not Done", "Partially Done", "Done"];
    return ddl
        .map((value) => DropdownMenuItem(
              value: value,
              child: Text(value),
            ))
        .toList();
  }
}

Answer 1

Because you are using the index variable of the class.

Pass the index to the _dropdown function like below.

@override
Widget build(BuildContext context) {
  return Scaffold(
      appBar: AppBar(
        backgroundColor: const Color.fromRGBO(82, 113, 255, 25),
        title: Row(
          children: [
            Container(
                padding: const EdgeInsets.all(10.0),
                child: const Text('CHEKILI Table of Content'))
          ],
        ),
      ),
      body: Column(
        children: <Widget>[
          Flexible(
            child: ListView.builder(
              itemCount: propositions.length,
              itemExtent: 50.0,
              itemBuilder: (BuildContext context, int index) {
                for (int i = 0; i < propositions.length; i++) {
                  selectedItemValue.add("Not Done");
                }
                return ListTile(
                  title: Text("${propositions[index]}"),
                  leading: _dropdown(index), // <-- HERE
                );
              },
            ),
          ),
        ],
      ));
}

Widget _dropdown(int index) { // <-- HERE
  return DropdownButton<String>(
    isExpanded: false,
    value: selectedItemValue[index].toString(),
    items: _dropDownItem(),
    onChanged: (value) {
      selectedItemValue[index] = value as String;
      setState(() {});
    },
  );
}

Other notes:

Don't place the loop that adding some value to the list like selectedItemValue.add("Not Done"); in the ListView.builder.

Because builder is called when the list item appears on the screen, the selectedItemValue will be added too many times. So init the list at the initState function like below.

@override
void initState() {
  super.initState();
  selectedItemValue.addAll(List.filled(propositions.length, "Not Done"));
}