How to create an outlined filter chip in Flutter

Question

I'm trying to create an outlined filter chip in Flutter.

I can create a standard filter chip using the following code but I can't see a way to access the outlined version as shown in the image.

Is there a way to modify the standard chip to give the outline version?

FilterChip(
   label: Text("text"), 
   onSelected: (bool value) {print("selected");},
),

[Background](https://docs.flutter.io/flutter/material/FilterChip/backgroundColor.html) — absin, Nov 21 '18 at 12:12
Also [ShapeBorder](https://docs.flutter.io/flutter/painting/ShapeBorder-class.html) — soupjake, Nov 21 '18 at 12:14

score 71 · Accepted Answer · answered Nov 21 '18 at 12:43

71

I have it working now. Here is the code:

FilterChip(
    label: Text("text"), 
    backgroundColor: Colors.transparent,
    shape: StadiumBorder(side: BorderSide()),
    onSelected: (bool value) {print("selected");},
),

This post also helped me discover the StadiumBorder.

answered Nov 21 '18 at 12:43

nuxibyte

1,434
1
13
16

3

A color that looks nice to me `BorderSide(color: Colors.black12)`. – Son Nguyen Nov 14 '21 at 04:35

How to create an outlined filter chip in Flutter

1 Answers1