Flutter - custom radio button

Question

how can i achieve this kind of RadioButton

Answer 1

Completely custom

import 'package:flutter/material.dart';

class CustomRadioBtn extends StatefulWidget {
  const CustomRadioBtn({Key? key}) : super(key: key);

  @override
  State<CustomRadioBtn> createState() => _CustomRadioBtnState();
}

class _CustomRadioBtnState extends State<CustomRadioBtn> {
  int selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          anyItem(0),
          const SizedBox(height: 10.0),
          anyItem(1),
        ],
      ),
    );
  }

  Widget anyItem(int index) => GestureDetector(
        onTap: () {
          setState(() {
            selectedIndex = index;
          });
        },
        child: Container(
          width: 20.0,
          height: 20.0,
          padding: EdgeInsets.all(4.0),
          decoration: BoxDecoration(
            border: Border.all(),
            borderRadius: BorderRadius.circular(25.0),
            color: selectedIndex == index ? Colors.blue : Colors.white,
          ),
          child: Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10.0), color: Colors.white),
          ),
        ),
      );
}