💬
Get Help
JoacoMaurtua
JoacoMaurtua
 · CEO at Nebulabs

Selecting and deselecting radio buttons

Widgets & Design

I have an interface challenge in FLutterflow, as you can see in the images, there are two 'radio-buttons', which are separate, that is to say that it is not a single radio button with two options, but for design reasons, since there is an image between each one, I have used two different radio buttons, both with only one option, the initial value of both radio buttons is the one shown on the screen, 'regular environment' and 'irregular environment' respectively.

My question is the following, since these are two different radio-buttons I want to know how to do so that when the user selects one of them, the other is unchecked and vice versa.

What have you tried so far?

To solve the problem, I have created two boolean page states, one called 'squareSelected' whose initial value is true and the other called 'irregularSelected' whose initial value is false.

Then I have added in each radio button an action, this action makes that if I click a radio button the value of the page states is reversed according to the radio button that I am clicking.

To finish, in both radio buttons I have added a conditional in the field 'Allow Unselected', for example if I click the radio button 'Square Environment', the page state 'squareSelected' becomes true and the other page state becomes false, therefore in this conditional 'Allow Unselected' I allow that the field whose page state is false appears as deselected.

It seems to me that the logic makes all the sense in the world and the page states indeed change correctly, however when I click on a particular radio button I have a strange behavior, the texts of the radio buttons disappear and reappear when the radio buttons are clicked, I really do not understand this behavior (Attached video).

PLEASE WATCH THE VIDEO 🙏

Radio buttons error.mp4
31.49MB

Did you check FlutterFlow's Documentation for this topic?
No
1