FormBuilderRadio vs FormBuilderRadioGroup

[awhitford]

From the README:

FormBuilderRadio - Used to select one value from a list of Radio Widgets
FormBuilderRadioGroup - Used to select one value from a list of Radio Widgets

😕 What's the difference?

[awhitford]

FormBuilderRadio lists the options vertically (column), vs FormBuilderRadioGroup lists the option horizontally (row).

[danvick]

FormBuilderRadio was the initial control that uses a ListView underneath therefore the options are shown vertically. Due to the need for more layout options, we included FormBuilderRadioGroup which was initially based on the package group_radio_button which also had a different API than the initial Radio field.

The package, however, proved insufficient for our purpose and we retired it and built our own implementation.

Note that FormBuilderRadioGroup allows for both orientations using the orientation attribute.

I agree we need to make the distinction clear in README.

I think we should also deprecate FormBuilderRadio.

[danvick]

Same applies to FormBuilderCheckboxList and FormBuilderCheckboxGroup

[awhitford]

I support deprecating to avoid confusion.

Unfortunately, I'm running into a problem when my FormBuilderFieldOption child is a ListTile.

BoxConstraints forces an infinite width.

One day, I will figure this out... 😕

[awhitford]

I resorted to StackOverflow for some advice, but I'm still not happy... 😩

When I replaced my FormBuilderRadio with FormBuilderRadioGroup (and specified the orientation: GroupedRadioOrientation.vertical), my render blows up because (in this case) my FormBuilderFieldOption child is a ListTile. Normally, I simply wrap the offending infinite width widget in an Expanded, but that is not working here.

I can solve the layout problem if the GestureDetector was wrapped in Expanded.

Should we add a flag to optionally wrap the GestureDetector in an Expanded? 🤔

[awhitford]

BTW... I have to admit that I prefer the look of the deprecated FormBuilderRadio instead of the FormBuilderRadioGroup:

Old FormBuilderRadio:

New FormBuilderRadioGroup:

[slavap]

@awhitford It is possible to get the same layout with FormBuilderRadioGroup as it was for FormBuilderRadio, but currently I have to specify exact Container width manually, which is absolutely awful.
@danvick Please fix vertical mode, or remove deprecation from FormBuilderRadio.

final radio = FormBuilderRadioGroup(
      orientation: GroupedRadioOrientation.vertical,
      controlAffinity: ControlAffinity.trailing,

FormBuilderFieldOption(
      value: v,
      child: Container(width: 400, 

[awhitford]

Yes, I know that I can adjust the control affinity. However, I am now further convinced that FormBuilderCheckboxGroup is buggy:

Why isn't this wrapping? (FormBuilderFieldOption.child is a Text.) 🤔

[slavap]

@awhitford It is the same story - you have to specify container width, then it will be possible to get wrapping with Flexible and Text.

[awhitford]

I see that the old deprecated versions use ListTile, and I think it was changed so that the horizontal and wrap layouts could be implemented. Unfortunately, it has a side effect of not being a drop in replacement. I think I finally have an idea on how to fix this...

[FickleLife]

Just wondering if there's a solution to the overflow wrapping?

[oodavid]

Bumping into this too, decided to use the deprecated FormBuilderCheckboxList

[pawangjain]

@awhitford how did you fix this?
It will be helpful if you can share it.

[awhitford]

@pawangjain Sadly, I don't think I tackled this yet. For my original issue, I ended up using the deprecated control. However, a version 4 migration is in the future, so...

[danvick]

I think I solved this issue in v4 but forgot to port it to v3. I'll do that as soon as I can and release an update.

[mgav]

Using orientation: OptionsOrientation.vertical, with flutter_form_builder: ^4.0.2 I was able or orient each radio option vertically.

Here's the whole block of code:

FormBuilderRadioGroup( name: 'formerly_an_attribute', decoration: const InputDecoration( border: InputBorder.none, labelStyle: TextStyle(fontStyle: FontStyle.italic), ), wrapVerticalDirection: VerticalDirection.down, // doesn't work in 4.0 (use below) orientation: GroupedRadioOrientation.vertical, orientation: OptionsOrientation.vertical,

And here's a screenshot:

[ayaanpathan]

@awhitford It is possible to get the same layout with FormBuilderRadioGroup as it was for FormBuilderRadio, but currently I have to specify exact Container width manually, which is absolutely awful.
@danvick Please fix vertical mode, or remove deprecation from FormBuilderRadio.

final radio = FormBuilderRadioGroup(
      orientation: GroupedRadioOrientation.vertical,
      controlAffinity: ControlAffinity.trailing,

FormBuilderFieldOption(
      value: v,
      child: Container(width: 400, 

Hi, How do i customize the shape and size of the radio button

[deandreamatias]

The initial question is solved here:
https://github.com/danvick/flutter_form_builder/blob/ca0b470a02383c354fb04fd33008c30bb9bef567/packages/flutter_form_builder/CHANGELOG.md#3121---03-aug-2020

[faisalmushtaq007]

how can i get rid of the space thats between the vertical radios?

[Natan-hub]

Currently in this FormBuilderRadioGroup I can select the options by clicking exactly on the Radio button. Isn't there a way to select the options by clicking on the options label as well?