Flutter custom radio buttons

original

https://medium.com/flutterdevs/exploring-custom-radio-button-in-flutter-4a93a7892185

text

Learn how to create a custom radio button in your Flutter app

A radio button is called a select button, and it stores a Boolean value. It allows customers to choose a choice from a set of predefined choices. This component makes it not exactly the same as a check box, we can select more than one alternative and re-establish the unselected state. We can organize a collection of at least two radio buttons and display them on the screen as circular holes with white areas for unselected or dots for selection.

We can also give each related radio button a label to describe the determination of the radio button address. A radio button can be selected by clicking the mouse in the circular hole or using the console alternate method.

In this blog, we will explore customizing Flutter radio buttons. We will see how to implement a custom radio button demo program and how to create it in your flutter application.

Introduction

Flutter allows us to use Radio widgets to make radio buttons. The radio button made with this widget consists of a blank outer circle and a strong inner circle, and the last button is displayed in the selected state. From time to time, you may need to make a radio gathering, and its alternative uses a custom design instead of the traditional radio gathering. This article illustrates how to use custom catches for radio gathering.

Demo Module :
Demo module:

This demo video shows how to create a custom radio button in Flutter. It shows how to customize radio buttons will work in your Flutter application. It shows how the radio group will use the custom button when the user clicks the button. Animated. It will be displayed on your device.

How to implement the code in the dart file:

You need to implement it in your code separately:

Create a new dart file radio_opton.dart in the lib folder.

Because the radio button contains a label, we cannot use the radio button. In summary, we will create a custom class that can be used to make a selection called MyRadioOption. Inspired by Flutter's Radio widget, this class has value, groupValue and onChanged properties. The value of this attribute solves the value of substitutes, and it should be extraordinary among all the choices of similar groups.

The groupValue property is the currently selected value. If the option value matches the groupvalue, the option is selected. The onChanged attribute stores the callback function that will be called when the user selects an option. When the user selects an option, the callback function is responsible for updating the groupValue. In addition, we also added the label and text attributes, because we need to display the label on the button and display the text on the right side of the button.

The groupValue attribute is the currently selected value. If the selected value matches the groupvalue, the replacement is in the selected state. The onChanged attribute stores the callback function, which will be considered when the client chooses. When the client chooses an alternative, the callback function is obliged to update the groupValue. In addition, we also added labels and text attributes, because we need to display the name on the button and display the content on the right side of the button.

Below are the properties and constructors of the class. We use a regular class T, because the value can be of any type.

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. In order to make a circle, a circular border is used as the shape of the graphic decorative container. The name can use Text as a sub-component of the container. Then, at this point, we can create a Row composed of buttons and text widgets.

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 custom_radio_demo.dart in the lib folder.

Below is a class in which we use MyRadioOption as the selected radio group. There is a state variable \_ groupValue and a ValueChanged function. This is the callback function to be considered when the client chooses an alternative.

String? _groupValue;

ValueChanged<String?> _valueChangedHandler() {
  return (value) => setState(() => _groupValue = value!);
}

In the main 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 should get the screen output, just like the screenshot below.

Final Output

Code

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',
          ),
        ],
      ),
    );
  }
}

Concluding remarks

In this article, I have explained the basic structure of custom radio buttons, you can modify this code according to your choice. This is a small introduction to user interaction with custom radio buttons. From my side, it works using Flutter.

I hope this blog will provide you with sufficient information to try custom radio buttons in your Flutter project. We will show you what the introduction is? .This is an example of how to make a custom radio button. Fundamentally, every choice should have value and group value. The group value should be something very similar among all the alternatives in the similar group. When the customer chooses an alternative, the group value will be updated, so please try it.

If I did something wrong, please let me know in the comments and I am happy to improve.

Applause if this article is helpful to you.