Radio button also known as RadioListTile widget in Flutter has a property named as onChanged which will calls every time when user select any given Radio button. We can call any function or task in this block of code which will execute each time user selects a Radio button. We are creating Radio button group using LIST in our tutorial so all we have to do is store the Checked item in given State variable. So in this tutorial we would Show Get Selected Radio Button Group Value in Flutter RadioListTile Android iOS Example. This is same as selecting item on button click event.
Contents in this project Show Get Selected Radio Button Group Value in Flutter RadioListTile Android iOS 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 MyApp class extends with StatelessWidget. We would also call RadioGroup() class here directly using their method. This would automatically draws the Widget build area of given class.
|
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 Selected Item"), ), body: SafeArea( child : Center( child:RadioGroup(), ) ) ), ); } } |
4. Create a class named as RadioGroup() extends with State full widget. In this class we would make a class object with createState() method. This method will allows to use States in given class tree.
|
1 2 3 4 |
class RadioGroup extends StatefulWidget { @override RadioGroupWidget createState() => RadioGroupWidget(); } |
5. Create a class named as NumberList. In this class we would create 2 Variables number and index and return both of them using constructor(). We would use this class to create items for Radio button group.
|
1 2 3 4 5 6 |
class NumberList { String number; int index; NumberList({this.number, this.index}); } |
6. Create a class named as RadioGroupWidget extends State. This would be our main Widget class.
|
1 2 3 4 |
class RadioGroupWidget extends State { } |
7. Create a String variable named as radioItemHolder with default value One. This is our default radio button selected value. Also this is used to hold selected radio button group value later on.
|
1 |
String radioItemHolder = 'One'; |
8. Create a integer variable named as id.
|
1 |
int id = 1; |
9. Create a List using NumberList class. We would use this list to create Radio buttons.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
List<NumberList> nList = [ NumberList( index: 1, number: "One", ), NumberList( index: 2, number: "Two", ), NumberList( index: 3, number: "Three", ), NumberList( index: 4, number: "Four", ), NumberList( index: 5, number: "Five", ), ]; |
10. Create a Text widget and RadioListTile widget in widget build area in RadioGroupWidget class. As you can see in below code onChanged method we would save the selected item value in holder.
|
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 |
Widget build(BuildContext context) { return Column( children: <Widget>[ Padding( padding : EdgeInsets.all(14.0), child: Text('Selected Item = '+'$radioItemHolder', style: TextStyle(fontSize: 23)) ), Expanded( child: Container( height: 350.0, child: Column( children: nList.map((data) => RadioListTile( title: Text("${data.number}"), groupValue: id, value: data.index, onChanged: (val) { setState(() { radioItemHolder = data.number ; id = data.index; }); }, )).toList(), ), )), ], ); } |
11. 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 96 97 98 99 |
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 Selected Item"), ), body: SafeArea( child : Center( child:RadioGroup(), ) ) ), ); } } class RadioGroup extends StatefulWidget { @override RadioGroupWidget createState() => RadioGroupWidget(); } class NumberList { String number; int index; NumberList({this.number, this.index}); } class RadioGroupWidget extends State { // Default Radio Button Selected Item. String radioItemHolder = 'One'; // Group Value for Radio Button. int id = 1; List<NumberList> nList = [ NumberList( index: 1, number: "One", ), NumberList( index: 2, number: "Two", ), NumberList( index: 3, number: "Three", ), NumberList( index: 4, number: "Four", ), NumberList( index: 5, number: "Five", ), ]; Widget build(BuildContext context) { return Column( children: <Widget>[ Padding( padding : EdgeInsets.all(14.0), child: Text('Selected Item = '+'$radioItemHolder', style: TextStyle(fontSize: 23)) ), Expanded( child: Container( height: 350.0, child: Column( children: nList.map((data) => RadioListTile( title: Text("${data.number}"), groupValue: id, value: data.index, onChanged: (val) { setState(() { radioItemHolder = data.number ; id = data.index; }); }, )).toList(), ), )), ], ); } } |
Screenshots:
