Radio in Flutter

18-Sep-2024

Learn how to use Radio buttons in Flutter for user selection in forms and interfaces

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:


Comments