Set Align Radio Button in Horizontal Format in Flutter Android iOS

It is difficult to achieve Radio Button proper alignment in flutter mobile applications without knowing all the widgets. Using the Row widget and proper combination of Radio widget with Text widget we can easily show Set Align Radio Button in Horizontal Format in Flutter Android iOS app example tutorial. We would put both Radio widget and Text widget one by one in Row widget so they will align one after another from left to right in horizontal format.

What we are doing in current tutorial: We are creating 3 Radio buttons with Text widget in horizontal format and show the selected radio button value in Text widget on Radio button selection.

Contents in this project Set Align Radio Button in Horizontal Format in Flutter Android iOS Example Tutorial:

1. Import material.dart package in your app’s main.dart file.

2. Create void main runApp() method and here we would call the our MyApp() class.

3. Create our main MyApp class extends with StatelessWidget. In this class we would call the RadioGroup() class.

4. Create a RadioGroup class extends StatefulWidget. In this class we would make createState() method of State management to use States in next given class name. We would pass the RadioGroupWidget() class name along with state method so it’ll enable the mutable state management in given class.

5. Create another class named as RadioGroupWidget extends State. This is our main Radio button class. In which we would create Radio button in horizontal format.

6. Create a Sting variable named as radioButtonItem. We would use this String variable as our default selected Radio button value.

7. Create another Integer variable named as id with default value 1. We would use this variable as default group value of Radio button.

8. Creating Widget build area in RadioGroupWidget class. Now we would make the Column widget.

9. Creating a Padding Widget in Column widget. Now we would Wrap the Text widget in Padding widget. This Text widget is used to display the selected item of Radio button.

10. Now we would create Row widget inside Column widget after Padding widget. Now we would create 1 Radio widget and 1 Text widget in Column widget. This should be our first radio button with text.

  1. value : Works as Unique key and should be unique for every Radio button.
  2. groupValue : Is used to determine whether the Radio button is selected or not.
  3. onChanged : Calls every time when Radio button is selected. You can perform any certain task on Radio button selection.

11. Creating 2 Radio button and 2 Text widgets again in Row widget.

12. Complete source code for main.dart file:

Screenshots:

Set Align Radio Button in Horizontal Format in Flutter Android iOS

Leave a Reply

Your email address will not be published.