FilterChip在flutter中的形状

Question

我想设计这种类型的布局，但我不知道如何塑造 FilterChip

但我得到了这个布局

我的密码是

   class FilterChipWidget extends StatefulWidget {
  final String chipName;

  const FilterChipWidget({Key? key, required this.chipName}) : super(key: key);

  @override
  _FilterChipWidgetState createState() => _FilterChipWidgetState();
}

class _FilterChipWidgetState extends State<FilterChipWidget> {
  var _isSelected = false;

  @override
  Widget build(BuildContext context) {
    return FilterChip(
      showCheckmark: false,
      label: Text(widget.chipName),
      labelStyle: GoogleFonts.robotoSlab(
          fontStyle: FontStyle.normal,
          fontWeight: FontWeight.w400,
          fontSize: 13,
          color: Colors.black),
      selected: _isSelected,
      backgroundColor: fTextFieldColor,
      onSelected: (isSelected) {
        setState(() {
          _isSelected = isSelected;
        });
      },
      selectedColor: Colors.blueAccent,
    );
  }
}

interest.dart

Align(
          alignment: Alignment.center,
          child: Container(
            child: Wrap(
              spacing: 5.0,
              runSpacing: 5.0,
              children: [
                FilterChipWithImageWidget(chipName: 'Stocks'),
                FilterChipWidget(chipName: 'Crypto'),
                FilterChipWidget(chipName: 'Market'),
                FilterChipWidget(chipName: 'Jobs'),
                FilterChipWidget(chipName: 'Investment'),
                FilterChipWidget(chipName: 'Entrepreneur'),
                FilterChipWidget(chipName: 'Business'),
                FilterChipWidget(chipName: 'Venture\nCapital'),
                FilterChipWidget(chipName: 'Advertise'),
              ],
            ),
          ),
        )

Answer 1

FilterChip 接受一个名为 shape 的值。您可以将其定义为 shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10.0), ) 或者您可以使用容器并自定义它

return InkWell(
  onTap:(){
   setState((){
     _isSelected = !_isSelected;
   });
  },
 child:Container(
  decoration: BoxDecoration(
color: _isSelected? Colors.blueAccent : fTextFieldColor,
borderRadius:BorderRadius.circular(5),
),
  child: Row(
mainAxisSize:MainAxisSize.min,
   children:[
    Image.asset("image path here", width:15),
    Text(widget.chipName, style: GoogleFonts.robotoSlab(
      fontStyle: FontStyle.normal,
      fontWeight: FontWeight.w400,
      fontSize: 13,
      color: Colors.black),),
    ]
   )
 
 )
);

使用它而不是返回 FilterChip。

FilterChip在flutter中的形状

Shape of FilterChip in flutter

flutter

chips