Quick Tip: Working with radio buttons in Flutter
When I started to look for app ideas to be made using Flutter, I didn’t have to look beyond my Nanodegree projects (Android Basics track) I completed through Udacity. Re-writing existing projects made in Android using Java into Flutter excited me and I thought this would be a great opportunity for me to learn and apply Flutter concepts. This way I was able to make my first Flutter app from one of my existing Udacity Nanodegree projects and publish it in Google Play store. You can find that app here.
Completing my first Flutter app gave me lot of confidence to try another app on similar lines and that’s how I decided to make next app, a simple animal quiz app for kids in which kids will try to select correct answer for the questions displayed. This required me to implement radio buttons widget which was my first time dealing with selection widgets concepts in Flutter. Without wasting any time, I started to read and explore how to use radio buttons widget in my app and started from here.
I wanted to have a screen like this in which 3 radio buttons will be displayed horizontally for each question :
In this article, I am going to share how I achieved and implemented horizontal radio buttons widget and their selection.
As you can see from above screenshot, each question is followed by 3 radio buttons below it, so its clear that we need to use Row and Column widgets to place every question and answer set. I made use of Container widget that gives me options to use a Column widget followed by a text widget (for question) a Row widget followed by Radio widget.
The code for this is as below:
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
appBar: AppBar(
title: new Text('Kids Quiz App'),
centerTitle: true,
backgroundColor: Colors.blue,
),
body: new Container(
padding: EdgeInsets.all(8.0),
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'Select correct answers from below:',
style: new TextStyle(
fontSize: 20.0, fontWeight: FontWeight.bold),
),
new Padding(
padding: new EdgeInsets.all(8.0),
),
new Divider(height: 5.0, color: Colors.black),
new Padding(
padding: new EdgeInsets.all(8.0),
),
new Text(
'Lion is :',
style: new TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
),
),
new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Radio(
value: 0,
groupValue: _radioValue1,
onChanged: _handleRadioValueChange1,
),
new Text(
'Carnivore',
style: new TextStyle(fontSize: 16.0),
),
new Radio(
value: 1,
groupValue: _radioValue1,
onChanged: _handleRadioValueChange1,
),
new Text(
'Herbivore',
style: new TextStyle(
fontSize: 16.0,
),
),
new Radio(
value: 2,
groupValue: _radioValue1,
onChanged: _handleRadioValueChange1,
),
new Text(
'Omnivore',
style: new TextStyle(fontSize: 16.0),
),
],
),Let’s talk about what goes inside Radio widget. Per the regular design norms, a radio button is followed by a label or a text that shows what that option constitutes, hence, after declaring new instance of Radio widget, we need to have a text widget for each radio object so that UI shows a radio button followed by a text, as shown below:
The radio widget takes 3 parameters namely value, groupValue and onChanged wherein value takes the position of particular radio button. For ex : in our use case, since we have 3 radio buttons in a row, the value for each will be 0,1 and 2 respectively i.e 0 = carnivore, 1 = herbivore, 2 = omnivore.
groupValue represents value for entire radio button group for each question and onChanged is the callback that is called everytime state of the radio button changes that allows to change the visual representation of radio button.
In our use case, I declared value of each radio button group to be as private variable and initialized them as -1. This means, when I run the app, none of the radio buttons will be selected by default and user will start the quiz by selecting fresh options.
With above implementation, I was able to achieve proper radio buttons display as shown below:
The functioning of radio buttons works properly as well :
The entire code can be found here.
And that’s it. We’ve successfully implemented Radio button widget.
