Change title and subtitle of ListTile in flutter using a AlertDialog

Question

I am building an app and am new to Flutter. The App is supposed to take an input via TextFormField and used that Data to build tiles in a List of ListTile Widget. That works. Now I want to use the trailing Icon of the ListTiles and the onPressed() function to display an AlertDialog to edit the title and subtitel of each ListTile. And here is the Problem. I may have coded myself into a corner there. Can someone pls tell me how can I reference the right widget and change its properties. I do it very laborious with all the arguments given in the functions and by deleting an tile and inserting a new at the same index of the list - There i cant setState() so it only updates with the next action that does update the state. And when I do delete a tile from the list and want to reference the new inserted Listtile the async function throws an error "This BuildContext is no longer valid".

I need dire help

Here is the ListTile expansion

ListTile _tile(number, String title, String subtitle, IconData icon, context,
    cont1, cont2, height, width, indexcolor) {
  return ListTile(
    key: ValueKey("$number-$title-$subtitle"),
    tileColor: indexcolor.isOdd
        ? const Color.fromARGB(255, 217, 218, 247)
        : Colors.white,
    title: Text(title,
        style: const TextStyle(
          fontWeight: FontWeight.w500,
          fontSize: 20,
        )),
    subtitle: Text(subtitle),
    leading: Icon(
      icon,
      color: Colors.blue[500],
    ),
    trailing: IconButton(
      icon: const Icon(Icons.edit),
      onPressed: () async {
        await showEditDialog(context, cont1, cont2, height, width, title,
            subtitle, number, listTiles, height, width);
      },
    ),
  );
}

and here is the function that returns the AlertDialog

Future<void> showEditDialog(BuildContext context, cont1, cont2, height, width,
    String titel, String subs, number, listofTiles, heightSrc, widthScr) async {
  return await showDialog(
    context: context,
    builder: (context) {
      return AlertDialog(
        content: SizedBox(
          height: height * .25,
          width: width * .9,
          child: Column(children: [
            const Text("Edit Task",
                style: TextStyle(color: Color.fromARGB(255, 87, 140, 184))),
            Padding(
              padding: const EdgeInsets.only(top: 8, bottom: 8),
              child: TextFormField(
                controller: cont1,
                decoration: InputDecoration(
                    labelText: titel,
                    filled: true,
                    fillColor: const Color.fromARGB(255, 236, 231, 231)),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 8, bottom: 8),
              child: TextFormField(
                controller: cont2,
                decoration: InputDecoration(
                    labelText: subs,
                    filled: true,
                    fillColor: const Color.fromARGB(255, 236, 231, 231)),
              ),
            ),
          ]),
        ),
        actions: [
          Row(
            children: [
              Expanded(
                child: TextButton(
                  onPressed: () {
                    cont1.clear();
                    cont2.clear();
                    Navigator.pop(context);
                  },
                  child: const Text("Cancel"),
                ),
              ),
              TextButton(
                onPressed: () {
                  listofTiles.removeAt(number);
                  listofTiles.insert(
                      number,
                      _tile(
                          listTiles.length,
                          cont1.text,
                          cont2.text,
                          Icons.work,
                          context,
                          cont1,
                          cont2,
                          heightSrc,
                          widthScr,
                          (listTiles.length + 1)));
                  cont1.clear();
                  cont2.clear();
                  Navigator.pop(context);
                  print(listofTiles);
                  setState() {}
                  ;
                },
                child: const Text("Save Changes"),
              ),
            ],
          )
        ],
      );
    },
  );
}

and i am using a statefulwidget and here inside of a Scaffold, Column sits this code for the Reordablelist

Expanded(
          child: ReorderableListView(
              onReorder: (oldIndex, newIndex) {
                setState(
                  () {
                    // titelWid = listChildren[oldIndex].titel.data;
                    if (oldIndex < newIndex) {
                      newIndex -= 1;
                    }
                    final item = listTiles.removeAt(oldIndex);
                    listTiles.insert(newIndex, item);
                  },
                );
              },
              children: listTiles),

So i tried to use key to reference the ListTile directly, but i did know how to call it and get the infos from the ListTile, so I dont have to drag everything through all the functions.

Can someone pls help Thanks you in advance

Answer 1

To update the dialog Ui, you can use StatefulBuilder .

  return await showDialog(
    context: context,
    builder: (context) {
      return StatefulBuilder(
        builder: (context, setState) =>  //this `setState` will update the dialog ui,
          AlertDialog(

Sample snippet

showDialog(
  context: context,
  builder: (context) {
    int c = 0;
    return StatefulBuilder(
      builder: (context, setState) {
        return AlertDialog(
          content: ElevatedButton(
              onPressed: () {
                setState(() {
                  c++;
                });
              },
              child: Text("value $c")),
        );
      },
    );
  },
);