enter image description here

Dynamically arrange text pill container. Size of widgets is not return rowList.add(MeasureSize()) in this stage.I only return size of widget when return widget of Consumer Builder. What should I do to return size of the widget? Example: double size = getSizeOfThisWidget(Container(child:Text('Hello Flutter pill text')); Can I get size of widget when I call like this function or method?

Consumer<CategoryProvider>(
  builder:
      (BuildContext context, value, Widget? child) {
    List<dynamic> data = value.categoryData;
    int length = data.length;
    List<Widget> mainList = [];
    List<Widget> rowList = [];
    double limit = size.width - 40;
    double width = 0;

    for (var index = 0; index < length; index  ) {
      FolderModel folderModel = FolderModel(
        id: data[index]['id'],
        folderName: data[index]['folderName'],
        categoryLevel: data[index]['categoryLevel'],
      );
      rowList.add(MeasureSize(
        onChange: (size) {
          width  = size.width;
          print(size);
        },
        child: Container(
          padding: const EdgeInsets.symmetric(
              horizontal: 14, vertical: 6),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(40),
            color: KColors.kPillBgColor,
          ),
          child: Text(
            folderModel.folderName,
            style: KTextStyle.kNormalTextStyle,
          ),
        ),
      ));

      if (width > limit) {
        rowList.removeLast();
        mainList.add(Row(
          children: rowList,
        ));
        rowList = [];
        width = 0;
      }
    }
    return Column(
      children: mainList,
    );
  },
),

CodePudding user response：

It's actually a family of widgets called Chips. You can read more about it here https://m2.material.io/components/chips#types

Simply put, there are 5 chips each with their own functionality

1. Chip
2. InputChip
3. ChoiceChip
4. FilterChip
5. ActionChip

See the flutter documentation for chips here https://api.flutter.dev/flutter/material/Chip-class.html

The chip that you are looking for is the FilterChip and you can implement it in your code as:

  FilterChip(
    label: Text(
      folderModel.folderName,
      style: KTextStyle.kNormalTextStyle,
    ),
    selected: folderModel.isSelected,
    onSelected: (bool value) {
      setState(() {
        folderModel.isSelected = value;
      });
    },
  )

Ensure to keep track of the selected state. I don't know how you have structured your code so I am assuming you have a parameter called isSelected in your FolderModel to determine and change its selected state.