Flutter Radio Widget
Flutter Radio widget displays a material design radio button.
Sample Code
enum Fruit { apple, banana }
Fruit? _fruit = Fruit.apple;
Radio<Fruit>(
value: Fruit.apple,
groupValue: _fruit,
onChanged: (Fruit? value) {
setState(() {
_fruit = value;
});
},
)
Radio<Fruit>(
value: Fruit.banana,
groupValue: _fruit,
onChanged: (Fruit? value) {
setState(() {
_fruit = value;
});
},
)
Example
Flutter Application with two Radio widgets.
Fruit
Enum is used to select one of the Enum values using Radio buttons. Also, ListTile widgets are used to display label for each Radio button widget.
main.dart
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
/// main application widget
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Flutter Application';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: const MyStatefulWidget(),
),
);
}
}
/// stateful widget that the main application instantiates
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({Key? key}) : super(key: key);
@override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
enum Fruit { apple, banana }
/// private State class that goes with MyStatefulWidget
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
Fruit? _fruit = Fruit.apple;
@override
Widget build(BuildContext context) {
return Center(
child: Column(
children: <Widget>[
ListTile(
title: const Text('Apple'),
leading: Radio<Fruit>(
value: Fruit.apple,
groupValue: _fruit,
onChanged: (Fruit? value) {
setState(() {
_fruit = value;
});
},
),
),
ListTile(
title: const Text('Banana'),
leading: Radio<Fruit>(
value: Fruit.banana,
groupValue: _fruit,
onChanged: (Fruit? value) {
setState(() {
_fruit = value;
});
},
),
),
],
),
);
}
}
Video