Flutter Radio Groups - How to make a list of grouped radio buttons in flutter

Last updated Jan 28, 2020

In this post we are going to learn how to create and use Grouped Radio buttons in flutter

Flutter Radio Group Widget

Let's start

Create Simple Flutter application and add below code

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Flutter Radio Group"),
),
body: SafeArea(
child : Center(

)
)
),
);
}
}

Now create Radio Group

With RadioListTile widget we are going to create Group of Radio widgets

const RadioListTile({
  Key key,
  @required this.value,
  @required this.groupValue,
  @required this.onChanged,
  this.activeColor,
  this.title,
  this.subtitle,
  this.isThreeLine = false,
  this.dense,
  this.secondary,
  this.selected = false,
  this.controlAffinity = ListTileControlAffinity.platform,
})

RadioGroup widget

class RadioGroup extends StatefulWidget{
@override
State createState() {
// TODO: implement createState
return RadioGroupWidget();
}

}

class RadioGroupWidget extends State
{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Column();
}
}

Now lets create list of our options

For this create a constant class

class PlatFormList {
String platform;
int index;
PlatFormList(this.platform,this.index);
}

and add required data into list

Listlistplatform;
int selected=1;
@override
void initState() {
// TODO: implement initState
super.initState();
listplatform=List();

listplatform.add(PlatFormList("Flutter", 1));
listplatform.add(PlatFormList("Go", 2));
listplatform.add(PlatFormList("JAVA", 3));
listplatform.add(PlatFormList("Kotlin", 4));
listplatform.add(PlatFormList("Android", 5));
}

Update RadioGroupWidget to show list of options

Complete Code

RadioGroup.dart

import 'package:flutter/material.dart';
import 'package:flutter_radio_group/radio_list.dart';
class RadioGroup extends StatefulWidget{
  @override
  State createState() {
    // TODO: implement createState
    return RadioGroupWidget();
  }

}

class RadioGroupWidget extends State
{

  Listlistplatform;
  int selected=1;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    listplatform=List();

    listplatform.add(PlatFormList("Flutter", 1));
    listplatform.add(PlatFormList("Go", 2));
    listplatform.add(PlatFormList("JAVA", 3));
    listplatform.add(PlatFormList("Kotlin", 4));
    listplatform.add(PlatFormList("Android", 5));
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Column(
      children: [

        Padding(
            padding : EdgeInsets.all(14.0),
            child: Text('Selected Platform = '+listplatform[selected-1].platform, style: TextStyle(fontSize: 23))
        ),

        Container(
          height: 350.0,
          child: Column(
            children:
            listplatform.map((data) => RadioListTile(
              title: Text("${data.platform}"),
              groupValue: selected,
              value: data.index,
              onChanged: (val) {
                setState(() {
                  selected = data.index;
                });
              },
            )).toList(),
          ),
        ),

      ],
    );
  }

}

main.dart

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.pink

      ),
      home: Scaffold(
          appBar: AppBar(
            title: Text("Flutter Radio Group"),
          ),
          body: SafeArea(
              child : Center(
            child: RadioGroup(),
              )
          )
      ),
    );
  }
}

Article Contributed By :

3235 Views

Projects By category