CODEWITHSUNDEEP
flutter
lhengl
lhengl

Reputation: 160

How to apply onTap event to RadioListTile?

I have a popup dialog with a list of radio buttons that I wish to pop whenever a radio button is selected regardless of whether it is currently selected or not.

Using the Radio or RadioListTile widget included in the flutter framework only allows for the onChanged event, which only fires off if there is a change. This means that if an item is already selected, the dialog will not be popped.

The toggleable property, is just that, a property, and does not allow for additional instructions to pop the dialog. It simply has an internal toggle that deselects the value.

I tried wrapping the RadioListTile with a GestureDetector which did not work, because the child (ListTile) of the RadioListTile has the tap priority.

There are other third packages that does this better but I would prefer to stick to the built in widget as much as I can.

Any help is appreciated. See below snippets of the code:

RadioListTile<Folder>(
  value: controller.folders[index],
  groupValue: controller.selectedFolder.value,
  onChanged: (newValue){
    // This callback is not invoked when an item is already selected
    controller.selectedFolder.value = newValue ?? controller.folders[0];
    // I'd like this to be called even if item has not changed
    Get.back(result: controller.selectedFolder.value);
  },
  title: Text(folder.isEmpty ? 'None' : folder.name),
)

Upvotes: 4

Views: 1707

Answers (2)

AEZAKMI 8
AEZAKMI 8

Reputation: 1

i made this widget based on khw147 comment

class RadioListTileClickable<T> extends StatefulWidget {
  final String title;
  final T value;
  T groupValue;
  final ValueChanged<T>? onClicked;

  RadioListTileClickable(
      {super.key, required this.title, required this.value, required this.groupValue, this.onClicked});

  @override
  State<RadioListTileClickable<T>> createState() => _RadioListTileClickableState<T>();
}

class _RadioListTileClickableState<T> extends State<RadioListTileClickable<T>> {
  @override
  Widget build(BuildContext context) {
    return RadioListTile.adaptive(
      toggleable: true,
      title: Text(widget.title),
      value: widget.value,
      groupValue: widget.groupValue,
      contentPadding: const EdgeInsets.all(0.0),
      onChanged: (value) {
        setState(() {
          widget.groupValue = value ?? widget.value;
        });
        widget.onClicked?.call(widget.groupValue);
      },
    );
  }
}

Upvotes: 0

khw147
khw147

Reputation: 96

You may set toggleable to true and update only when the new value is not null. E.g.

RadioListTile<Folder>(
  value: controller.folders[index],
  groupValue: controller.selectedFolder.value,
  toggleable: true,
  onChanged: (newValue) {
    if (newValue != null) {
      controller.selectedFolder.value = newValue;
    }

    Get.back(result: controller.selectedFolder.value);
  },
  title: Text(folder.isEmpty ? 'None' : folder.name),
)

Upvotes: 8

Related Questions