如何在Flutter中创建轮廓过滤器芯片

Question

我正在尝试在 Flutter 中创建一个轮廓过滤器芯片。

我可以使用以下代码创建标准滤波器芯片，但我看不到访问图中所示概述版本的方法。

有没有办法修改标准芯片给出轮廓版本？

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

Answer 1

我现在可以使用了。这是代码：

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

这篇文章也帮助我发现了 StadiumBorder。

Answer 2

你可以像这样改变芯片边框颜色

ChoiceChip(
            // selectedColor: ColorSet.myPureWhite,
            backgroundColor: ColorSet.primaryColor,
            shape: RoundedRectangleBorder(
              side: BorderSide(
                color: _value == idx ? Color(0xFF006313) : ColorSet.mygreyforText,
              ),
              borderRadius: BorderRadius.circular(
                20,
              ),
            ),
            selectedColor: _value == idx ? Colors.transparent : Colors.transparent,
            showCheckmark: false,
            label: Text(
              widget.variations[idx],
              style: TextStyle(
                fontFamily: 'Pretendard',
                fontSize: 14.0,
                color: _value == idx ? Color(0xFF006313) : ColorSet.mygreyforText,
                letterSpacing: -0.28,
              ),
            ),
            selected: _value == idx,
            onSelected: (bool selected) {
              setState(() {
                _value = (selected ? idx : null)!;
                widget.onChipSelected(widget.variations[idx]);
              });
            },
          );