×
×

Spread the love

In flutter, RadioListTile is a ListTile with a Radio Button. We can also call it a radio button with a label. In this example tutorial, we will discuss how to use a RadioListTile widget in flutter and its properties with examples.

Flutter RadioListTile

The RadioListTile is nothing but a ListTile containing a radio button by default. If we tap anywhere on the list tile it will select the radio button. RadioListTile can be used as a child of listview. For example, If we want the users to choose a single option from a list of options we can use RadioListTile.

Most of the properties of the RadioListTile are similar to radio button and listtile. So check those widgets for reference. If you want to select the list tile when the radio button is selected radio button set the selected property to true when the value and groupValue match.

Constructor:

RadioListTile({
Key key, 
@required T value, 
@required T groupValue, 
@required ValueChanged<T> onChanged, 
bool toggleable: false, 
Color activeColor, 
Widget title, 
Widget subtitle, 
bool isThreeLine: false, 
bool dense, 
Widget secondary, 
bool selected: false, 
ListTileControlAffinity controlAffinity:ListTileControlAffinity.platform, 
bool autofocus: false
}) 

Flutter RadioListTile Example

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  runApp(MyApp());
}
//void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
  @override
  _MyState createState() {
    return _MyState();
  }
}

class _MyState extends State<MyApp>
{
  bool _value = false;
  int val = -1;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.blueGrey[300],
            title: Text("Flutter RadioListTile"),
          ),
          body:RadioListTile(
            value: 1,
            groupValue: val,
            onChanged: (value) {
              setState(() {
                val = value;
              });
            },
            title: Text("Radio"),
          )
        )
    );
  }
}

Output:

flutter radio listtile

Flutter RadioListTile Properties

The different flutter RadioListTile properties are:

  • value (required)
  • groupValue (required)
  • onChanged (required)
  • activeColor
  • title
  • subtitle
  • secondary
  • selected
  • toggleable
  • controlAffinity

As the value, groupValue, onChanged, activeColor, properties of this widget are identical to the similarly-named properties on the RadioButton widget, i’m not discussing them in this post.

title

We will use title property to set a text or label to the radio button. To show the users what the radio button indicates, we will use this property.

body:RadioListTile(
            value: 1,
            groupValue: val,
            onChanged: (value) {
              setState(() {
                val = value;
              });
            },
            title: Text("Radio"),            
          )

Output:

flutter radio listtile title

subtitle

We will use subtitle property to add or change subtitle to the radio button title.

body:RadioListTile(
            value: 1,
            groupValue: val,
            onChanged: (value) {
              setState(() {
                val = value;
              });
            },
            title: Text("Radio"),
            subtitle: Text("caption/subtext"),
          )

Output:

flutter raddio listtile subtitle

secondary

The secondary property can be any widget, generally we will use an icon as secondary widget. We can use Text or any other widget instead.

body:RadioListTile(
            value: 1,
            groupValue: val,
            onChanged: (value) {
              setState(() {
                val = value;
              });
            },
            title: Text("Radio"),
            subtitle: Text("caption/subtext"),
            secondary: Icon(Icons.sd_storage),
          )

Output:

flutter radiolisttile secondary

selected

We will use selected property to decide whether we want to render icon and text colors with the color of activeColor property. If there is no active color applied, it will use default color.

It takes a boolean value. If we set it to true it will render icon and text colors with the activecolor. If we set it to false there will be no change in text and icon colors.

To make the ListTile appear selected when the radio button is selected, we have to pass true to the selected property. For this purpose we have to declare a global variable (_value) whose value is false when declared. Now we have to assign the value returned by onChanged to the global variable inside setState of onChanged callback. Now set the global variable to both value and selected properties.

body:RadioListTile(
            value: 1,
            groupValue: val,
            onChanged: (value) {
              setState(() {
                val = value;
                _value = true;
              });
            },
            title: Text("Radio"),
            subtitle: Text("caption/subtext"),
            secondary: Icon(Icons.sd_storage),
            selected: _value,
          )

Output:

flutter-radiolisttile selected

If the toggleable property is set to true the above logic will not work. As the global variable (_value) will always be true, the text and icon colors will not change even if we unselect the radio button. We have to apply a condition to solve the issue. Using the below code snippet, the text and icon colors also changes based on the state of the radio button.

body:RadioListTile(
            value: 1,
            groupValue: val,
            onChanged: (value) {
              setState(() {
                val = value;
                if(_value == false)
                  {
                    _value = true;
                  }
                else
                  {
                    _value = false;
                  }
              });
            },
            title: Text("Radio"),
            subtitle: Text("caption/subtext"),
            secondary: Icon(Icons.sd_storage),
            selected: _value,
            toggleable: true,
          )

toggleable

Generally, the radio button once selected cannot be unselected. If we want the user to be able to unselect, we will use the toggleable property. When we select, the onChanged will pass the value of the radio button and when we unselect, it will pass null.

body:RadioListTile(
            value: 1,
            groupValue: val,
            onChanged: (value) {
              setState(() {
                val = value;
              });
            },
            title: Text("Radio"),
            subtitle: Text("caption/subtext"),
            secondary: Icon(Icons.sd_storage),
            toggleable: true,
          )

controlAffinity

We will use controlAffinity property to control the position of the radio button relative to the text. It takes ListTileControlAffinity which has constants leading, trailing and platform.

ListTileControlAffinity.trailing

Positions radio button to right, text to center and secondary (generally an icon) to left.

body:RadioListTile(
            value: 1,
            groupValue: val,
            onChanged: (value) {
              setState(() {
                val = value;
              });
            },
            title: Text("Radio"),
            subtitle: Text("caption/subtext"),
            secondary: Icon(Icons.sd_storage),
            toggleable: true,
            controlAffinity: ListTileControlAffinity.trailing,
          )

Output:

flutter raddiolisttile controlaffinity tailing

ListTileControlAffinity.leading

Positions radio button to left, text to center and secondary (generally an icon) to right.

body:RadioListTile(
            value: 1,
            groupValue: val,
            onChanged: (value) {
              setState(() {
                val = value;
              });
            },
            title: Text("Radio"),
            subtitle: Text("caption/subtext"),
            secondary: Icon(Icons.sd_storage),
            toggleable: true,
            controlAffinity: ListTileControlAffinity.leading,
          )

Output:

flutter radiolisttile leading

Changing RadioListTile border color when unselected

To change the border color of the checkbox inside CheckboxListTile when it is unchecked just wrap the CheckboxListTile widget inside a Theme widget as a child and set ThemeData‘ s unselectedWidgetColor property to your desired color.

body:Theme(
          data: ThemeData(
              unselectedWidgetColor: Colors.red,
          ),
          child: RadioListTile(
            value: 1,
            groupValue: val,
            onChanged: (value) {
              setState(() {
                val = value;
              });
            },
            title: Text("Radio"),
            subtitle: Text("caption/subtext"),
            secondary: Icon(Icons.sd_storage),
            toggleable: true,
            controlAffinity: ListTileControlAffinity.leading,
          )
        )

Output:

flutter radiolisttile radio bordercolor

That’s all about flutter RadioListTile example tutorial. Let’s catch up with some other flutter widget in the next post. Have a great day!!

Do share, subscribe and like my facebook page if you find this post helpful. Thank you!!

Reference: Flutter Official Documentation


Spread the love

AUTHOR

Naresh Pradeep

Hey there! I am the founder of CodesInsider and android developer.I love to code and build apps.


Related Posts

Leave a Reply

Your email address will not be published.