Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter FilterChip Avatar Selected Style

I'm using FilterChip with a CircleAvatar for avatar, but the selected state has a nasty rectangle that I can't seem to find any reference for. How do I remove it?

Code:

child: FilterChip(
        avatar: CircleAvatar(
          backgroundColor: category.color
        ),
        label: Text(category.name),
        selected: badCategoryIds.contains(category.id),
        onSelected: (bool value) {
          if (value) {
            badCategoryIds.add(category.id);
          }
          else {
            badCategoryIds.remove(category.id);
          }
          categoryChoiceCallback(badCategoryIds);
        },
      )

Result:

enter image description here

How I want it to appear (taken from material.io documentation):

enter image description here

FilterChip documentation.

like image 245
Omri Aharon Avatar asked Dec 26 '18 08:12

Omri Aharon


1 Answers

You can try to adapt this solution for a Circle Image for your Chip Circle as well

new Container(
  width: 190.0,
  height: 190.0,
  decoration: new BoxDecoration(
      shape: BoxShape.circle,
      image: new DecorationImage(
      fit: BoxFit.fill,
      image: new NetworkImage(
             "https://i.imgur.com/BoN9kdC.png")
             )
)),  

from this Medium Post https://medium.com/@boldijar.paul/circle-image-view-in-flutter-965963c46cf5

like image 102
afcode Avatar answered Nov 08 '22 16:11

afcode