Show radio list tile in Bottom sheet bar

Question

I am trying to show a list of radio buttons in bottom sheet dialog in a flutter, I am unable to change the radio button selection, here's what I have achieved so far :

final GlobalKey _optionsKey = GlobalKey();

  void _showOptions() => showModalBottomSheet(
      context: context,
      builder: (BuildContext builderContext) {
        return Card(
          elevation: 4,
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
          child: Column(
            key: _optionsKey,
            mainAxisAlignment: MainAxisAlignment.end,
            crossAxisAlignment: CrossAxisAlignment.end,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              RadioListTile<int>(
                groupValue: _currentContent.contentType,
                value: SimpleContent.header,
                onChanged: (int value) {
                  setState(() {
                    _currentContent.contentType = value;
                  });
                },
                title: Text(
                  "Header",
                  style: buildTextStyleBlack(14),
                ),
              ),
              RadioListTile<int>(
                groupValue: _currentContent.contentType,
                value: SimpleContent.content,
                onChanged: (int value) {
                  setState(() {
                    _currentContent.contentType = value;
                  });
                },
                title: Text(
                  "Content",
                  style: buildTextStyleBlack(14),
                ),
              ),
              RadioListTile<int>(
                groupValue: _currentContent.contentType,
                value: SimpleContent.bullets,
                onChanged: (int value) {
                  setState(() {
                    _currentContent.contentType = value;
                  });
                },
                title: Text(
                  "Bullets",
                  style: buildTextStyleBlack(14),
                ),
              ),
              RadioListTile(
                groupValue: _currentContent.contentType,
                value: SimpleContent.image,
                onChanged: (int value) {
                  setState(() {
                    _currentContent.contentType = value;
                  });
                },
                title: Text(
                  "Image",
                  style: buildTextStyleBlack(14),
                ),
              ),
              _buildDoneButton()
            ],
          ),
        );
      });

I tried setting the global key on a column in the bottom sheet, it is not helping. Any clue on why this is happening?

The screen is a stateful widget which displays a chat list screen, with ability to change the format of chat as per the type is chosen, once the user hits send button on the screen the bottom sheet appears asking them to choose the type of chat message.

Check out [this](https://stackoverflow.com/questions/52414629/how-to-update-state-of-a-modalbottomsheet-in-flutter). I believe its similar unless i understood you wrong. — Abbas.M, Jul 05 '19 at 07:29
Followed the example in the link @Abbas.M , it helped, I ended up moving the bottom sheet view to a separate Stateful widget for brevity. — Alok Omkar, Jul 07 '19 at 06:23

score 4 · Answer 1 · answered Jul 05 '19 at 13:17

There is a github repository with some advanced flutter examples, including how to manage input within modals or bottom-sheets :

https://github.com/Ephenodrom/Flutter-Advanced-Examples/tree/master/lib/examples/managingInputsWithinModalBottomsheet

You have to use a StatefullWidgetBuilder. See the link for a really good and detailed explanation.

Show radio list tile in Bottom sheet bar

1 Answers1