Flutter apply radio button logic to choicechip

Question

I was trying to make single selection choicechip but it does not work properly. Here is my chip:

class ChipWidget extends StatefulWidget {
  const ChipWidget({Key key, this.label, this.listIndex}) : super(key: key);

  final String label;
  final int listIndex;

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

class _ChipWidgetState extends State<ChipWidget> {
  int selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return ChoiceChip(
      label: Text(widget.label),
      selected: selectedIndex == widget.listIndex,
      selectedColor: Colors.red,
      onSelected: (value) {
        setState(() {
          selectedIndex = value ? widget.listIndex : null;
        });
        print("Selected: " + selectedIndex.toString());
      },
    );
  }
}

And I was calling from,

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

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

class _HomeScreenState extends State<HomeScreen> {
  List<String> _chipItems;

  @override
  void initState() {
    super.initState();
    _chipItems = ["Terleme", "Aşırı Düşünme", "Baş Ağrısı", "Mide Bulantısı"];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: MediaQuery.of(context).size.height,
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Center(
            child: Wrap(
              children: _chipItems
                  .asMap()
                  .map((key, value) => MapEntry(
                      key,
                      ChipWidget(
                        label: value,
                        listIndex: key,
                      )))
                  .values
                  .toList(),
            ),
          ),
        ),
      ),
    );
  }
}

When I click a chip , it's selected. But when I select a new one, the old one still remains selected. I don't want multiple selections. I only want one at a time. What do I need to change in my code? Thanks.

Answer 1

I have changed the approach, use the below code to achieve what you are looking for

Chip Widget

class ChipWidget extends StatelessWidget {
  const ChipWidget({this.label, this.isSelected = false, this.onSelected});

  final String label;
  final bool isSelected;
  final Function onSelected;

    @override
    Widget build(BuildContext context) {
      return ChoiceChip(
       label: Text(label),
       selected: isSelected,
       selectedColor: Colors.red,
       onSelected: onSelected,
  );
 }
}

HomeScreen

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

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

class _HomeScreenState extends State<HomeScreen> {
 List<String> _chipItems;
 int selectedPos;

  @override
  void initState() {
  super.initState();
  _chipItems = ["Terleme", "Aşırı Düşünme", "Baş Ağrısı", "Mide Bulantısı"];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
       body: Container(
       height: MediaQuery.of(context).size.height,
       child: Padding(
        padding: const EdgeInsets.all(8.0),
         child: Center(
           child: Wrap(
           children: _chipItems
              .asMap()
              .map((key, value) => MapEntry(
                  key,
                  ChipWidget(
                    label: value,
                    isSelected: key == selectedPos,
                    onSelected: (isSelected) {
                      setState(() {
                        selectedPos = key;
                      });

                      print('Selected: $selectedPos');
                    },
                  )))
              .values
              .toList(),
          ),
        ),
      ),
    ),
   );
  }
 }