Search code examples
flutterchips

Shape of FilterChip in flutter

I want to design this type of layout but I don't know how to give shape to FilterChip

enter image description here

but I'm getting this layout

enter image description here

My code is

   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'),
              ],
            ),
          ),
        )
Solution

  • FilterChip accepts a value named shape. You can define it as shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10.0), ) or you can use container and customise it

    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),),
    ]
   )
 
 )
);

    use this instead of returning FilterChip.