Radio button is used to select single item from multiple items in mobile applications. In flutter we used RadioListTile widget to create Radio buttons. Radio buttons gives us the functionality to automatically select single item from multiple list. User cannot select more that one item in radio button. Radio buttons is mostly used to define main information like make female, school college and etc. So in this tutorial we would Create Radio Button in Flutter Android iOS App Example Tutorial.
Contents in this project Create Radio Button 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. Call our main 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 Radiobutton() method here which will call the Radiobutton class view here.
|
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 Example"), ), body: SafeArea( child : Center( child:Radiobutton(), ) ) ), ); } } |
4. Create a class named as Radiobutton extends StatefulWidget. In this class we would call the createState() method which will enables mutable state in given location class.
|
1 2 3 4 |
class Radiobutton extends StatefulWidget { @override RadioButtonWidget createState() => RadioButtonWidget(); } |
5. Create a class named as RadioButtonWidget extends State.
|
1 2 3 4 |
class RadioButtonWidget extends State { } |
6. Create a String variable named as radioItem and set its default value as empty. This variable is used as State and also used to hold selected radio button value.
|
1 |
String radioItem = ''; |
7. Creating widget build area in RadioButtonWidget class. We would create Column widget here and put 2 RadioListTile components here. We would also create a Text widget to display the selected item.
- groupValue : The current selected item for group of radio button.
- title : We would pass here Text widget and this is also radio button label.
- value : The backhand value represent by radio button.
- onChanged : Calls every time when user selects radio button.
|
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>[ RadioListTile( groupValue: radioItem, title: Text('Radio Button Item 1'), value: 'Item 1', onChanged: (val) { setState(() { radioItem = val; }); }, ), RadioListTile( groupValue: radioItem, title: Text('Radio Button Item 2'), value: 'Item 2', onChanged: (val) { setState(() { radioItem = val; }); }, ), Text('$radioItem', style: TextStyle(fontSize: 23),) ], ); } |
8. 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 |
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 Example"), ), body: SafeArea( child : Center( child:Radiobutton(), ) ) ), ); } } class Radiobutton extends StatefulWidget { @override RadioButtonWidget createState() => RadioButtonWidget(); } class RadioButtonWidget extends State { String radioItem = ''; Widget build(BuildContext context) { return Column( children: <Widget>[ RadioListTile( groupValue: radioItem, title: Text('Radio Button Item 1'), value: 'Item 1', onChanged: (val) { setState(() { radioItem = val; }); }, ), RadioListTile( groupValue: radioItem, title: Text('Radio Button Item 2'), value: 'Item 2', onChanged: (val) { setState(() { radioItem = val; }); }, ), Text('$radioItem', style: TextStyle(fontSize: 23),) ], ); } } |
Screenshots:
