Radio Group is a term used where developer wants to show multiple Radio Buttons in mobile application. There is no component named as Radio group in flutter other than we could use Radio Buttons itself to create Multiple Radio Button Radio Group in Flutter iOS Android app Example. We are using List in our current tutorial to make Radio group with multiple radio buttons.
Contents in this project Multiple Radio Button Radio Group in Flutter iOS Android Example:
1. Import material.dart package in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Call our main MyApp class using void main runApp() method.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main class named as MyApp extends with StatelessWidget. We are calling RadioGroup() method in our class. In RadioGroup() class we would define Radio button widget.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text("Flutter Radio Button Group Example"), ), body: SafeArea( child : Center( child:RadioGroup(), ) ) ), ); } } |
4. Create a class named as RadioGroup extends StatefulWidget. In this class we would define our main Radio button created class with createState() method. This method would enable mutable state management in particular class.
|
1 2 3 4 |
class RadioGroup extends StatefulWidget { @override RadioGroupWidget createState() => RadioGroupWidget(); } |
5. Create a class named as FruitsList. In this class we would define 1 String variable and 1 integer variable.We would use this class objects in next class.
|
1 2 3 4 5 |
class FruitsList { String name; int index; FruitsList({this.name, this.index}); } |
6. Create a class named as RadioGroupWidget extends State. In this class we would Create Radio buttons using MAP method.
|
1 2 3 4 |
class RadioGroupWidget extends State { } |
7. Create 1 String variable named as radioItem and one integer named as id in RadioGroupWidget class.
- radioItem : Used to hold Checked radio button value. This would be also our default radio button value.
- id : Used to hold item index value.
|
1 2 3 4 5 |
// Default Radio Button Item String radioItem = 'Mango'; // Group Value for Radio Button. int id = 1; |
8. Create List named as fList in RadioGroupWidget class. Here we would use FruitsList class with fList class and define List items.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
List<FruitsList> fList = [ FruitsList( index: 1, name: "Mango", ), FruitsList( index: 2, name: "Apple", ), FruitsList( index: 3, name: "Banana", ), FruitsList( index: 4, name: "Cherry", ), ]; |
9. Create widget build area in RadioGroupWidget class. Here we would first create a Text widget and pass radioItem variable, So the text component will display us selected radio group value. Now we would define MAP method to generate Radio buttons dynamically.
|
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 |
Widget build(BuildContext context) { return Column( children: <Widget>[ Padding( padding : EdgeInsets.all(14.0), child: Text('$radioItem', style: TextStyle(fontSize: 23)) ), Expanded( child: Container( height: 350.0, child: Column( children: fList.map((data) => RadioListTile( title: Text("${data.name}"), groupValue: id, value: data.index, onChanged: (val) { setState(() { radioItem = data.name ; id = data.index; }); }, )).toList(), ), )), ], ); } |
10. 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 |
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("Flutter Radio Button Group Example"), ), body: SafeArea( child : Center( child:RadioGroup(), ) ) ), ); } } class RadioGroup extends StatefulWidget { @override RadioGroupWidget createState() => RadioGroupWidget(); } class FruitsList { String name; int index; FruitsList({this.name, this.index}); } class RadioGroupWidget extends State { // Default Radio Button Item String radioItem = 'Mango'; // Group Value for Radio Button. int id = 1; List<FruitsList> fList = [ FruitsList( index: 1, name: "Mango", ), FruitsList( index: 2, name: "Apple", ), FruitsList( index: 3, name: "Banana", ), FruitsList( index: 4, name: "Cherry", ), ]; Widget build(BuildContext context) { return Column( children: <Widget>[ Padding( padding : EdgeInsets.all(14.0), child: Text('$radioItem', style: TextStyle(fontSize: 23)) ), Expanded( child: Container( height: 350.0, child: Column( children: fList.map((data) => RadioListTile( title: Text("${data.name}"), groupValue: id, value: data.index, onChanged: (val) { setState(() { radioItem = data.name ; id = data.index; }); }, )).toList(), ), )), ], ); } } |
Screenshots:
