Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create a wrap with ChoiceChip with custom labels in Flutter

I'm learning flutter but there are some things that I cannot find anywhere.

For example, I want to make a group of ChoiceChips, similar to the picture

enter image description here

but I don't know how to put custom labels in this kind of chips.

How can I make it possible?

 import 'package:flutter/material.dart';

 class MyThreeOptions extends StatefulWidget {
  @override
   _MyThreeOptionsState createState() => _MyThreeOptionsState();
}

  class _MyThreeOptionsState extends State<MyThreeOptions> {
  int _value = 0;

  // ----What I want to appear----//
  /*void v (int index){
   switch (index){
   case 0: Text('Phones');
   break;

   case 1: Text('Computers');
   break;

   case 2: Text('Accessories');
   break;
   }}*/

  @override
  Widget build(BuildContext context) {
  return Wrap(
  alignment: WrapAlignment.center,
  spacing: 12.0,
  children: List<Widget>.generate(
  3,
      (int index) {
      return ChoiceChip(
       pressElevation: 0.0,
       selectedColor: Colors.blue,
       backgroundColor: Colors.grey[100],
       label: Text("item $index"),
       selected: _value == index,
       onSelected: (bool selected) {
        setState(() {
          _value = selected ? index : null;
        });
      },
    );
  },
 ).toList(),
 );}
}
like image 215
JeCr Avatar asked Oct 25 '25 15:10

JeCr


1 Answers

enter image description here

    int defaultChoiceIndex;
List<String> _choicesList = ['All', 'Pending', 'Accepted'];

    @override
  void initState() {
    // TODO: implement initState
    super.initState();
    defaultChoiceIndex = 0;
  }

    Wrap(
      spacing: 8,
      children: List.generate(_choicesList.length, (index) {
        return ChoiceChip(
          labelPadding: EdgeInsets.all(2.0),
          label: Text(
            _choicesList[index],
            style: Theme.of(context)
                .textTheme
                .bodyText2!
                .copyWith(color: Colors.white, fontSize: 14),
          ),
          selected: defaultChoiceIndex == index,
          selectedColor: Colors.deepPurple,
          onSelected: (value) {
            setState(() {
              defaultChoiceIndex = value ? index : defaultChoiceIndex;
            });
          },
          // backgroundColor: color,
          elevation: 1,
          padding: EdgeInsets.symmetric(
              horizontal: SizeConfig.widthMultiplier * 4),
        );
      }),
    );
like image 146
Alwayss Bijoy Avatar answered Oct 28 '25 07:10

Alwayss Bijoy