Flutter : Custom Radio Button

Question

How can I create a custom radio button group like this in flutter

Answer 1

I achieved that with the following logic. reply if you need a detailed explanation

import 'package:flutter/material.dart';

class Parent extends StatefulWidget {
  Parent({
    Key key,
  }) : super(key: key);

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

class _ParentState extends State {
  int _selectedItem = 0;

  selectItem(index) {
    setState(() {
      _selectedItem = index;
      print(selectItem.toString());
    });
  }

  @override
  Widget build(BuildContext context) {
    //...YOUR WIDGET TREE HERE

    return ListView.builder(
      shrinkWrap: true,
      itemCount: 5,
      itemBuilder: (context, index) {
        return CustomItem(
          selectItem, // callback function, setstate for parent
          index: index,
          isSelected: _selectedItem == index ? true : false,
          title: index.toString(),
        );
      },
    );
  }
}

class CustomItem extends StatefulWidget {
  final String title;
  final int index;
  final bool isSelected;
  Function(int) selectItem;

  CustomItem(
    this.selectItem, {
    Key key,
    this.title,
    this.index,
    this.isSelected,
  }) : super(key: key);

  _CustomItemState createState() => _CustomItemState();
}

class _CustomItemState extends State {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Text("${widget.isSelected ? "true" : "false"}"),
        RaisedButton(
          onPressed: () {
            widget.selectItem(widget.index);
          },
          child: Text("${widget.title}"),
        )
      ],
    );
  }
}