Exploring Custom Radio Button In Flutter
A radio button is otherwise called the choices button which holds the Boolean value. It permits the client to pick just a single choice from a predefined set of choices. This component makes it not quite the same as a checkbox where we can choose more than one alternative and the unselected state to be reestablished. We can organize the radio button in a gathering of at least two and show it on the screen as circular holes with the white area (for unselected) or a dot (for chose).
We can likewise give a label to each relating radio button portraying the decision that the radio button addresses. A radio button can be chosen by tapping the mouse on the circular hole or utilizing a console alternate way.
In this blog, we will be Exploring Custom Radio Button In Flutter. We will see how to implement a custom radio button demo program and how to create in your flutter applications.
Table Of Contents::
Introduction:
Flutter permits us to make radio buttons by utilizing the Radio widget. A radio button made with that widget comprises of a void external circle and a strong internal circle, with the last just displayed in the, chose state. Now and again, you might need to make a radio gathering whose alternatives utilize a custom design, not the traditional radio catch. This article gives an illustration of how to make a radio gathering with custom catches.
Demo Module :
This demo video shows how to create a custom radio button in a flutter. It shows how the custom radio button will work in your flutter applications. It shows how the radio group will work with custom buttons when the user taps the button. animated. It will be shown on your device.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called radio_opton.dart inside the lib folder.
Since the radio button contains a label, we can’t utilize the Radio button. All things considered, we will make a custom class that can be utilized the make the choices called MyRadioOption. Motivated by Flutter’s Radio widget, the class has value, groupValue, and onChanged properties. The value the property addresses the value of the alternative, it ought to be extraordinary among all choices in a similar group.
The groupValue property is the currently selected value. If an option value matches the groupvalue, the option is in the selected state. The onChanged property stores the callback function that will be called when the user selects an option. When a user selects an option, it’s the responsibility of the callback function to update the groupValue. In addition, we also add label and text properties because we need to display a label on the button and a text on the right side of the button.
The groupValue property is the presently chosen value. If a choice value matches the groupvalue, the alternative is in the selected state. The onChanged property stores the callback function that will be considered when the client chooses a choice. At the point Final Outputwhen a client chooses an alternative, it’s the obligation of the callback function to update the groupValue. Moreover, we likewise add label and text properties since we need to show a name on the button and content on the right side of the button.
The following are the properties and the constructor of the class. We utilize a conventional kind T on the grounds that the value can be any sort.
class MyRadioOption<T> extends StatelessWidget {
final T value;
final T? groupValue;
final String label;
final String text;
final ValueChanged<T?> onChanged;
const MyRadioOption({
required this.value,
required this.groupValue,
required this.label,
required this.text,
required this.onChanged,
});
@override
Widget build(BuildContext context) {
// TODO implement
}
}
Then, we will make the layout. The button is a circle with a name inside. For making the circle, make a Container that utilizes a ShapeDecoration with a CircleBorder as the shape. The name can be made utilizing a Text a widget that is put as the child of the Container. Then, at that point, we can make a Row that comprises the button and a Text widget.
import 'package:flutter/material.dart';
class MyRadioOption<T> extends StatelessWidget {
final T value;
final T? groupValue;
final String label;
final String text;
final ValueChanged<T?> onChanged;
const MyRadioOption({
required this.value,
required this.groupValue,
required this.label,
required this.text,
required this.onChanged,
});
Widget _buildLabel() {
final bool isSelected = value == groupValue;
return Container(
width: 30,
height: 30,
decoration: ShapeDecoration(
shape: CircleBorder(
side: BorderSide(
color: Colors.black,
),
),
color: isSelected ? Colors.cyan : Colors.white,
),
child: Center(
child: Text(
value.toString(),
style: TextStyle(
color: isSelected ? Colors.white : Colors.cyan,
fontSize: 20,
),
),
),
);
}
Widget _buildText() {
return Text(
text,
style: const TextStyle(color: Colors.black, fontSize: 24),
);
}
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.all(8),
child: InkWell(
onTap: () => onChanged(value),
splashColor: Colors.cyan.withOpacity(0.5),
child: Padding(
padding: EdgeInsets.all(5),
child: Row(
children: [
_buildLabel(),
const SizedBox(width: 10),
_buildText(),
],
),
),
),
);
}
}
Create a new dart file called custom_radio_demo.dart inside the lib folder.
The following is a class where we make a radio group utilizing the MyRadioOption as the choice. There is a state variable _groupValue and a ValueChanged function which is the callback to be considered when the client chooses an alternative.
String? _groupValue;
ValueChanged<String?> _valueChangedHandler() {
return (value) => setState(() => _groupValue = value!);
}
In the body, how to call the constructor of MyRadioOption.
MyRadioOption<String>(
value: '1',
groupValue: _groupValue,
onChanged: _valueChangedHandler(),
label: '1',
text: 'Phone Gap',
),
MyRadioOption<String>(
value: '2',
groupValue: _groupValue,
onChanged: _valueChangedHandler(),
label: '2',
text: 'Appcelerator',
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
import 'package:flutter_custom_radio_button/radio_option.dart';
class CustomRadioDemo extends StatefulWidget {
@override
State createState() => new _CustomRadioDemoState();
}
class _CustomRadioDemoState extends State<CustomRadioDemo> {
String? _groupValue;
ValueChanged<String?> _valueChangedHandler() {
return (value) => setState(() => _groupValue = value!);
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
title: const Text('Flutter Custom Radio Button Demo'),
backgroundColor: Colors.cyan,
),
body: Column(
children: [
Padding(
padding: const EdgeInsets.all(10.0),
child: Text("Best Cross-Platform Mobile App Development Tools for 2021",
style: TextStyle(fontWeight: FontWeight.bold,fontSize: 18),),
),
SizedBox(height: 10,),
MyRadioOption<String>(
value: '1',
groupValue: _groupValue,
onChanged: _valueChangedHandler(),
label: '1',
text: 'Phone Gap',
),
MyRadioOption<String>(
value: '2',
groupValue: _groupValue,
onChanged: _valueChangedHandler(),
label: '2',
text: 'Appcelerator',
),
MyRadioOption<String>(
value: '3',
groupValue: _groupValue,
onChanged: _valueChangedHandler(),
label: '3',
text: 'React Native',
),
MyRadioOption<String>(
value: '4',
groupValue: _groupValue,
onChanged: _valueChangedHandler(),
label: '4',
text: 'Native Script',
),
MyRadioOption<String>(
value: '5',
groupValue: _groupValue,
onChanged: _valueChangedHandler(),
label: '5',
text: 'Flutter',
),
],
),
);
}
}
Conclusion:
In the article, I have explained the basic structure of the Custom Radio Button in a flutter; you can modify this code according to your choice. This was a small introduction to Custom Radio Button On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying up the Custom Radio Button in your flutter projects. We will show you what the Introduction is?. That is an illustration of how to make custom radio buttons. Fundamentally, every alternative should have value and group value. The group value should be something very similar among all alternatives in a similar group. The group value is updated when a client chooses an alternative, So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
