Question 245127 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Dropdown Selection showDialog in not updating

In Flutter, I have a table where I am trying to get a list in dropdown in TableCell. I have created a gesturedetector to showDailog with DropdownButtonForm to show list and selection. but selected value is not showing in TableCell. What i found is that in below code, in Container I am not getting value of selectedVal as true.

  rows.add(
    TableRow(
      children: [
        TableCell(
          child: GestureDetector(
            onTap: () {
              showDialog(
                context: context,
                builder: (context) {
                  return StatefulBuilder(
                    builder: (BuildContext context, StateSetter setState) {
                      return AlertDialog(
                        title: Text('Select Item'),
                        content: DropdownButtonFormField<String>(
                          value: selectedValue != '' ? selectedValue : null,
                          onChanged: (value) {
                            setState(() {
                              selectedValue = value!;
                              selectedVal = true;
                            });
                          },
                          items: itemList.map((item) {
                            return DropdownMenuItem<String>(
                              value: item,
                              child: Text(item),
                            );
                          }).toList(),
                        ),
                        actions: <Widget>[
                          TextButton(
                            onPressed: () {
                              Navigator.of(context).pop();
                              setState(() {
                                selectedItem[rows.length - 1] = selectedValue;
                              });
                              print('selectedValue: $selectedValue');
                              print('selectedVal: $selectedVal');
                            },
                            child: Text('Ok'),
                          ),
                        ],
                      );
                    },
                  );
                },
              );
            },
            child: Container(
              color: Colors.lightBlue,
              child: Builder(
                builder: (BuildContext context) {
                  return Column(
                    children: [
                      Text(
                        selectedVal ? selectedValue : 'Select Invoice',
                        style: TextStyle(
                          color: Colors.white,
                        ),
                      ),
                    ],
                  );
                },
              ),
            ),
          ),
        ),
Tags:

2

Answers


  1. 0

    The issue you are encountering is likely due to the fact that you are not updating the TableCell content when the selectedValue changes. The TableCell widget is not being rebuilt when the value of selectedValue changes, which is why the updated value is not reflected in the TableCell.

    You can wrap your TableCell widget with a StatefulWidget or StatefulBuilder maybe this will help you.

    rows.add(TableRow(
children: [
  TableCell(
    child: GestureDetector(
      onTap: () {
        showDialog(
          context: context,
          builder: (context) {
            return StatefulBuilder(
              builder: (BuildContext context, StateSetter setState) {
                return AlertDialog(
                  title: Text('Select Item'),
                  content: DropdownButtonFormField<String>(
                    value: selectedValue != '' ? selectedValue : null,
                    onChanged: (value) {
                      setState(() {
                        selectedValue = value!;
                        selectedVal = true;
                      });
                    },
                    items: itemList.map((item) {
                      return DropdownMenuItem<String>(
                        value: item,
                        child: Text(item),
                      );
                    }).toList(),
                  ),
                  actions: <Widget>[
                    TextButton(
                      onPressed: () {
                        Navigator.of(context).pop();
                        setState(() {
                          selectedItem[rows.length - 1] = selectedValue;
                        });
                        print('selectedValue: $selectedValue');
                        print('selectedVal: $selectedVal');
                      },
                      child: Text('Ok'),
                    ),
                  ],
                );
              },
            );
          },
        );
      },
      child: Container(
        color: Colors.lightBlue,
        child: Builder(
          builder: (BuildContext context) {
            return Column(
              children: [
                Text(
                  selectedVal ? selectedValue : 'Select Invoice',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
              ],
            );
          },
        ),
      ),
    ),
  ),
],

    ),
    );

    Login or Signup to reply.
  2. 0

    It is an example code. By doing it in this way, you can achieve the dropdown selection in a AlertDialog. Feel free to provide acknowledgement & ask anything in the comment section.

    class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  String? selectedString;
  final List<String> stringList = <String>["Option 1", "Option 2", "Option 3"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ElevatedButton(
          onPressed: openDialog,
          child: const Text("Open dialog"),
        ),
      ),
    );
  }

  Future<void> openDialog() async {
    await showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Text("Dropdown"),
          content: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              StatefulBuilder(
                builder: (BuildContext context, Function(Function()) setState) {
                  return DropdownButton<String>(
                    value: selectedString,
                    hint: const Text("Select"),
                    items: stringList.map(
                      (String items) {
                        return DropdownMenuItem<String>(
                          value: items,
                          child: Text(items),
                        );
                      },
                    ).toList(),
                    onChanged: (String? value) {
                      selectedString = value;
                      setState(() {});
                    },
                  );
                },
              ),
              ElevatedButton(
                onPressed: Navigator.of(context).pop,
                child: const Text("OK"),
              )
            ],
          ),
        );
      },
    );
    return Future<void>.value();
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search