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.
|
1 |
import 'package:flutter/material.dart'; |
2. Create void main runApp() method and here we would call the our MyApp() class.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main MyApp class extends with StatelessWidget. In this class we would call the RadioGroup() class.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text("Set Radio Button Horizontally"), ), body: Center( child: RadioGroup(), )), ); } } |
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.
|
1 2 3 4 |
class RadioGroup extends StatefulWidget { @override RadioGroupWidget createState() => RadioGroupWidget(); } |
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.
|
1 2 3 4 |
class RadioGroupWidget extends State { } |
6. Create a Sting variable named as radioButtonItem. We would use this String variable as our default selected Radio button value.
|
1 2 |
// Default Radio Button Selected Item When App Starts. String radioButtonItem = 'ONE'; |
7. Create another Integer variable named as id with default value 1. We would use this variable as default group value of Radio button.
|
1 2 |
// Group Value for Radio Button. int id = 1; |
8. Creating Widget build area in RadioGroupWidget class. Now we would make the Column widget.
|
1 2 3 4 5 6 7 |
Widget build(BuildContext context) { return Column( children: <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.
|
1 2 3 4 5 |
Padding( padding: EdgeInsets.all(14.0), child: Text('Selected Radio Item = ' + '$radioButtonItem', style: TextStyle(fontSize: 21)) ), |
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.
- value : Works as Unique key and should be unique for every Radio button.
- groupValue : Is used to determine whether the Radio button is selected or not.
- onChanged : Calls every time when Radio button is selected. You can perform any certain task on Radio button selection.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
Radio( value: 1, groupValue: id, onChanged: (val) { setState(() { radioButtonItem = 'ONE'; id = 1; }); }, ), Text( 'ONE', style: new TextStyle(fontSize: 17.0), ), |
11. Creating 2 Radio button and 2 Text widgets again in Row widget.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
Radio( value: 2, groupValue: id, onChanged: (val) { setState(() { radioButtonItem = 'TWO'; id = 2; }); }, ), Text( 'TWO', style: new TextStyle( fontSize: 17.0, ), ), Radio( value: 3, groupValue: id, onChanged: (val) { setState(() { radioButtonItem = 'THREE'; id = 3; }); }, ), Text( 'THREE', style: new TextStyle(fontSize: 17.0), ), |
12. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text("Set Radio Button Horizontally"), ), body: Center( child: RadioGroup(), )), ); } } class RadioGroup extends StatefulWidget { @override RadioGroupWidget createState() => RadioGroupWidget(); } class RadioGroupWidget extends State { // Default Radio Button Selected Item When App Starts. String radioButtonItem = 'ONE'; // Group Value for Radio Button. int id = 1; Widget build(BuildContext context) { return Column( children: <Widget>[ Padding( padding: EdgeInsets.all(14.0), child: Text('Selected Radio Item = ' + '$radioButtonItem', style: TextStyle(fontSize: 21)) ), Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Radio( value: 1, groupValue: id, onChanged: (val) { setState(() { radioButtonItem = 'ONE'; id = 1; }); }, ), Text( 'ONE', style: new TextStyle(fontSize: 17.0), ), Radio( value: 2, groupValue: id, onChanged: (val) { setState(() { radioButtonItem = 'TWO'; id = 2; }); }, ), Text( 'TWO', style: new TextStyle( fontSize: 17.0, ), ), Radio( value: 3, groupValue: id, onChanged: (val) { setState(() { radioButtonItem = 'THREE'; id = 3; }); }, ), Text( 'THREE', style: new TextStyle(fontSize: 17.0), ), ], ), ], ); } } |
Screenshots:
