Unlock the Power of Radio Buttons in Flutter
Getting Started with Flutter
To follow along with this tutorial, you’ll need to have Flutter installed on your machine, along with basic knowledge of Flutter and familiarity with Dart. You’ll also need Xcode or Android Studio installed, as well as an iOS Simulator or Android emulator for testing, and a code editor like VS Code.
Building a Simple Radio Button
Let’s start by setting up a new Flutter project. Navigate to your work directory and copy and paste the code below:
// Initialize a new Flutter project
flutter create my_app
Once initialization is complete, open either your Android emulator or iOS Simulator. Your app should look similar to the screenshot below, indicating a successful installation.
Creating a Stateless Widget
Next, we’ll create a stateless widget called MyApp, which will act as the root widget and hold our application’s scaffold. Add the code below to main.dart:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Radio Button Demo',
home: MyStatefulWidget(),
);
}
}
Creating a Stateful Widget
To build components that are mutable or stateful widgets like the radio button, we’ll need to create a stateful widget and pass it to the root widget as a child. Let’s create MyStatefulWidget by adding the code below to main.dart:
class MyStatefulWidget extends StatefulWidget {
@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State {
String _groupValue = '';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Radio Button Demo'),
),
body: //...
);
}
}
Building a Radio Button
Now, let’s create a simple radio button that asks the user to select between cat or dog. We’ll use the ListTile material class, which allows for a combination of text, icons, and buttons. The value of each selected option is passed to the groupValue, which is maintained by MyStatefulWidget.
body: Column(
children: [
ListTile(
title: Text('Cat'),
leading: Radio(
value: 'cat',
groupValue: _groupValue,
onChanged: (value) {
setState(() {
_groupValue = value;
});
},
),
),
ListTile(
title: Text('Dog'),
leading: Radio(
value: 'dog',
groupValue: _groupValue,
onChanged: (value) {
setState(() {
_groupValue = value;
});
},
),
),
],
)
Styling a Radio Button
Now that we’ve built our radio button, we can change its look and feel using styling properties like activeColor, focusColor, fillColor, and hoverColor. Let’s update our two ListTile components with the code in between:
ListTile(
title: Text('Cat'),
leading: Radio(
value: 'cat',
groupValue: _groupValue,
onChanged: (value) {
setState(() {
_groupValue = value;
});
},
activeColor: Colors.green,
focusColor: Colors.red,
fillColor: MaterialStateProperty.all(Colors.grey),
hoverColor: Colors.blue,
),
),
ListTile(
title: Text('Dog'),
leading: Radio(
value: 'dog',
groupValue: _groupValue,
onChanged: (value) {
setState(() {
_groupValue = value;
});
},
activeColor: Colors.green,
focusColor: Colors.red,
fillColor: MaterialStateProperty.all(Colors.grey),
hoverColor: Colors.blue,
),
),
Customizing a Radio Button
Although the default radio button is functional, it may be too simple for your needs depending on the type of application you’re building. Let’s build our own custom radio button for more advanced use cases. We’ll create a widget called CustomRadioButton, which has two parameters, text and index.
class CustomRadioButton extends StatelessWidget {
final String text;
final int index;
CustomRadioButton({required this.text, required this.index});
@override
Widget build(BuildContext context) {
return ListTile(
title: Text(text),
leading: Radio(
value: index,
groupValue: _groupValue,
onChanged: (value) {
setState(() {
_groupValue = value;
});
},
),
);
}
}
We can now use our custom radio button in our application:
body: Column(
children: [
CustomRadioButton(text: 'Cat', index: 0),
CustomRadioButton(text: 'Dog', index: 1),
],
)