The Radio widget creates a radio button that allows the user to select one option from a group of options.
Here is a simple example of using the radio widget.
There Are Some Common Attributes for Radio widget
value | Radio Button Name |
groupValue | Changed Value |
onChanged | Submit for Change |
Here's a simple example of using a Radio widget Flutter:
File open lib->main.dart file −
import 'package:flutter/material.dart';
void main() {
runApp(
MyApp()
);
}
class MyApp extends StatefulWidget{
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
String _selectedOption = 'Option 1';
void _handleRadioValueChanged(String value) {
setState(() {
_selectedOption = value;
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue,
title: Text('StatefulWidget Example',
style:TextStyle(fontSize: 20,color: Colors.white)),
),
body:
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Radio(
value: 'Option 1',
groupValue: _selectedOption,
onChanged: (value) {
_handleRadioValueChanged(value.toString());
},
),
Text('Option 1'),
Radio(
value: 'Option 2',
groupValue: _selectedOption,
onChanged: (value) {
_handleRadioValueChanged(value.toString());
},
),
Text('Option 2'),
Radio(
value: 'Option 3',
groupValue: _selectedOption,
onChanged: (value) {
_handleRadioValueChanged(value.toString());
},
),
Text('Option 3'),
],
),
SizedBox(height: 16.0),
Text('Selected Option: $_selectedOption'),
],
),
));
}
}
Open
Device Manager, run the emulator, and then run the application. Next,
check the working output and check the output you declared in your
code.
Output: