Custom Radio Button in Flutter.

Hello everyone , In this post we will see how to create custom radio button in flutter.

Custom radio button

In the below code , first we have created a stateful widget , because we have to keep and change the radio’s value on click listener.

import 'package:flutter/material.dart';

class RadioButtonLayout extends StatefulWidget {
  const RadioButtonLayout({super.key});

  @override
  _RadioButtonLayout createState() => _RadioButtonLayout();
}

class _RadioButtonLayout extends State<RadioButtonLayout> {
  final List<String> _list = <String>["Dog", "Cat", "Lion", "Rabbit"];
  String _pet = "Dog";

  @override
  Widget build(BuildContext context) {
}

In the below code , we have created a customRadioButton function, which returns Radio widget. Transform.scale will increase the scale size of radio. Here “groupValue” means current selected value , “value” means actual value of radio and “onChanged” will change the value when we press on radio button, Let’s use this function somewhere.

Widget customRadioButton(
    String pet, String groupValue, Function(String pet) onValue) {
  return Transform.scale(
    scale: 1.3,
    child: Radio(
      value: pet,
      groupValue…