How do I change a textfield in an AlertDialog box to a list of clickable items which in Flutter

Question

In my table calendar, the input from the textfield is currently displayed as shown. However, I want to change it to option when I input after input

Here is my current code:

showDialog(
    context: context,
    builder: (context) => AlertDialog(
        title: const Text('What is your mood today?'),
            content: TextField(
                controller: _eventController,
            ),
            actions: < Widget > [
                TextButton(
                    child: Text("Save"),
                    onPressed: () {
                        if (_eventController!.text.isEmpty) return;
                        setState(() {
                            if (_events![_controller?.selectedDay] != null) {
                                _events![_controller?.selectedDay] !.add(_eventController?.text);
                            } else {
                                _events![_controller!.selectedDay] = [_eventController?.text];
                            }
                            prefs?.setString("events", json.encode(encodeMap(_events!)));
                            _eventController?.clear();
                            Navigator.pop(context);
                        });
                    },
                )
            ],
    ));
}

score 0 · Answer 1 · answered Dec 17 '22 at 16:07

You can use the package multi_select_flutter and instead of returning an AlertDialog return a MultiSelectDialog:

showDialog(
  context: context,
  builder: (context) => MultiSelectDialog(
      items: _items,
      onConfirm: (values) {...},
  );
);

The package is well documented so you can learn to use it reasonably fast.

How do I change a textfield in an AlertDialog box to a list of clickable items which in Flutter

1 Answers1