I am currently using Flutter to develop my application. I currently have some ChoiceChip's I am using. As an exmaple, this is one of them:

ChoiceChip(
  iconTheme: IconThemeData(size: 5),
  label: Column(
    children: [
      Text('In A Month'),
      if (displayMonthFromTodaySubtitle)
        Text("($monthFromToday)"),
    ],
  ),
  selected: _valueForExpiry == index,
  onSelected: (bool selected) {
    setState(() {
      showRelevantOccuranceSubtitle(index);
      _valueForExpiry = index;
      expiryOfExpenditure = DateTime(DateTime.now().year,
          DateTime.now().month + 1, DateTime.now().day);
          if ((expiryOfExpenditure!
              .isBefore(startingDateOfExpenditure))) {
            isExpiryBeforeStartDate = true;
          } else {
            isExpiryBeforeStartDate = false;
          }
    });
  },);
                    

But the check mark on the icon appears big. It be due to the fact that I am placing a column in the ChoiceChip which I don't think it normal. As you can see from the picture, I am trying to place 2 grouped ChoiceChips in a Columns and having a dividier in between them. Is it possible to reduce the size of the icon so the choicechips will take up less space? Should I not put a Column in the ChoiceChip?

Thank you.

I am currently using Flutter to develop my application. I currently have some ChoiceChip's I am using. As an exmaple, this is one of them:

ChoiceChip(
  iconTheme: IconThemeData(size: 5),
  label: Column(
    children: [
      Text('In A Month'),
      if (displayMonthFromTodaySubtitle)
        Text("($monthFromToday)"),
    ],
  ),
  selected: _valueForExpiry == index,
  onSelected: (bool selected) {
    setState(() {
      showRelevantOccuranceSubtitle(index);
      _valueForExpiry = index;
      expiryOfExpenditure = DateTime(DateTime.now().year,
          DateTime.now().month + 1, DateTime.now().day);
          if ((expiryOfExpenditure!
              .isBefore(startingDateOfExpenditure))) {
            isExpiryBeforeStartDate = true;
          } else {
            isExpiryBeforeStartDate = false;
          }
    });
  },);
                    

But the check mark on the icon appears big. It be due to the fact that I am placing a column in the ChoiceChip which I don't think it normal. As you can see from the picture, I am trying to place 2 grouped ChoiceChips in a Columns and having a dividier in between them. Is it possible to reduce the size of the icon so the choicechips will take up less space? Should I not put a Column in the ChoiceChip?

Thank you.

• flutter
• dart

1 Answer 1

I looked at Flutter's source code, the checkmark is fixed height. Let me break it down:

with your ChoiceChip, the iconTheme property you use, is passed down and using RawChip.

The checkmark is drawn directly in the _RenderChip class's _paintCheck method. and it's fixed height

https://github.com/flutter/flutter/blob/5156de731b45daa6528d35df810d9f5a28bf58e1/packages/flutter/lib/src/material/chip.dart#L2168

final double checkSize = avatar.size.height * 0.75;
...
_paintCheck(context.canvas, offset + checkOffset, checkSize);

so it seems like it don't use iconTheme. It's based on the avatar.

As a solution, I'd go with:

1. Chose not to show the checkmark (showCheckmark)
2. use a custom icon (Icons.check)

 ChoiceChip(
          showCheckmark: false,
          avatar: Icon(Icons.check),
          iconTheme: IconThemeData(size: 11), // --> Define the size of the checkmark here.
          label: Column(