Custom Radio Button in Flutter

In this article, we are creating custom radio button in flutter application without using any third party library or package. You can also check out flutter form validation example.

Using radio button widget, we can select any single value from list of choices. In this flutter example, we are displaying custom label with text in radio button UI. We are displaying football players names as text and jersey numbers as label. First we create custom label widget for radio button as below.

 

Custom Label for Radio Button

final String strRadioButtonLabel;

Widget radioButtonLabelWidget() {

final bool isRadioButtonSelected = radioButtonValue == radioGroupValue;

return Container(
width: 40,
height: 40,
decoration: ShapeDecoration(
shape: CircleBorder(
side: BorderSide(
color: Colors.black,
),
),
color: isRadioButtonSelected ? Colors.deepOrangeAccent : Colors.white,
),
child: Center(
child: Text(
strRadioButtonLabel.toString(),
style: TextStyle(
color: isRadioButtonSelected ? Colors.white : Colors.deepOrangeAccent,
fontSize: 22,
),
),
),
);
}

 
 

Display Radio Button Text

final String strRadioButtonText;

Widget radioButtonTextWidget() {
return Text(
strRadioButtonText,
style: const TextStyle(color: Colors.black, fontSize: 24),
);
}

 
 

Flutter Custom Radio Button

Now we need to integrate both custom label and text widgets in custom button widget.

import ‘package:flutter/material.dart’;

class MyCustomRadioOptionUI<T> extends StatelessWidget {

final String strRadioButtonLabel;
final String strRadioButtonText;
final T radioButtonValue;
final T radioGroupValue;
final ValueChanged<T> onValueChanged;

MyCustomRadioOptionUI({this.strRadioButtonLabel, this.strRadioButtonText, this.radioButtonValue, this.radioGroupValue, this.onValueChanged});

@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.all(10),
child: InkWell(
onTap: () => onValueChanged(radioButtonValue),
splashColor: Colors.deepOrangeAccent.withOpacity(0.5),
child: Padding(
padding: EdgeInsets.all(8),
child: Row(
children: [
radioButtonLabelWidget(),
SizedBox(width: 12),
radioButtonTextWidget(),
],
),
),
),
);
}
}

 
 

Integrate Flutter Custom UI

onChanged callback is used to detect when radio button value is changed. We need to give unique radioButtonValue to each radio button so we can identify when it is selected. radioGroupValue is currently selected radio button value. When both radio button and radio group value are same then it means that radio button is selected.

import ‘package:flutter/material.dart’;
import ‘my_custom_radio_option_ui.dart’;

class MyCustomRadioButtonScreen extends StatefulWidget {
@override
_MyCustomRadioButtonState createState() => _MyCustomRadioButtonState();
}

class _MyCustomRadioButtonState extends State<MyCustomRadioButtonScreen> {
String strRadioGroupValue;

ValueChanged<String> onValueChanged() {
    return (value) => setState(() => strRadioGroupValue = value);
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(‘Flutter Custom Radio Button Sample’)),
body: Container(
margin: EdgeInsets.symmetric(horizontal: 20, vertical: 15),
child: Column(
children: [
Text(“Who is your favourite football player?”,
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 25)),
SizedBox(height: 12),
MyCustomRadioOptionUI<String>(
    strRadioButtonLabel: ‘7’,
    strRadioButtonText: ‘Cristiano Ronaldo’,
    radioButtonValue: ‘1’,
    radioGroupValue: strRadioGroupValue,
    onValueChanged: onValueChanged(),
),
MyCustomRadioOptionUI<String>(
    strRadioButtonLabel: ’30’,
    strRadioButtonText: ‘Lionel Messi’,
    radioButtonValue: ‘2’,
    radioGroupValue: strRadioGroupValue,
    onValueChanged: onValueChanged(),
),
MyCustomRadioOptionUI<String>(
    strRadioButtonLabel: ’10’,
    strRadioButtonText: ‘Neymar’,
    radioButtonValue: ‘3’,
    radioGroupValue: strRadioGroupValue,
    onValueChanged: onValueChanged(),
),
MyCustomRadioOptionUI<String>(
    strRadioButtonLabel: ’17’,
    strRadioButtonText: ‘Kevin De Bruyne’,
    radioButtonValue: ‘4’,
    radioGroupValue: strRadioGroupValue,
    onValueChanged: onValueChanged(),
),
MyCustomRadioOptionUI<String>(
    strRadioButtonLabel: ‘9’,
    strRadioButtonText: ‘Robert Lewandowski’,
    radioButtonValue: ‘5’,
    radioGroupValue: strRadioGroupValue,
    onValueChanged: onValueChanged(),
),
],
),
),
);
}
}

 
 
custom radio button
 

One thought on “Custom Radio Button in Flutter

Leave a Reply