how to create custom filter chip widget as it onSelect requires argument in flutter

Question

I have used FilterChip and using it many screens...but to avoid duplicate and lengthy codes i want to create customFilterChip widget with only three properties

onSelect method label String isSelected bool

but i dont know how to deal with onSelect method while creating final method...

class CustomFilterChipWidget extends StatelessWidget {
  final bool isSelected;
  final String lable;
  //how declare function  onSelect;
  const CustomFilterChipWidget({Key? key,required this.isSelected,required this.lable,required this.onSelect}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return FilterChip(
        materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
        showCheckmark: false,
        selectedColor: Colors.white,
        backgroundColor: Colors.white,
        shape: StadiumBorder(
          side: BorderSide(
              width: isSelected ? 2 : 0,
              color: isSelected
                  ? Colors.blue
                  : Colors.grey),
        ),
        selected: isSelected,
        label: Text(
            lable,),
        onSelected: onSelect);
  }
}

as in filter chip

it requires value in argument

onSelected: (value) {
            
            }

score 1 · Accepted Answer · answered Aug 11 '23 at 15:43

You were close: first, accept a function onSelected:

class CustomFilterChipWidget extends StatelessWidget {
  final bool isSelected;
  final String label;
  final Function(bool) onSelected;

and then call it:

 onSelected: (bool value) {
        onSelected(value);
      },

The complete code will be:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var isSelected = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Material App Bar'),
        ),
        body: Center(
          child: CustomFilterChipWidget(
              isSelected: isSelected,
              label: 'Value is $isSelected',
              onSelected: (value) {
                setState(() {
                  isSelected = !isSelected;
                });
              }),
        ),
      ),
    );
  }
}

class CustomFilterChipWidget extends StatelessWidget {
  final bool isSelected;
  final String label;
  final Function(bool) onSelected;
  CustomFilterChipWidget(
      {Key? key,
      required this.isSelected,
      required this.label,
      required this.onSelected})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return FilterChip(
      materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
      showCheckmark: false,
      selectedColor: Colors.white,
      backgroundColor: Colors.white,
      shape: StadiumBorder(
        side: BorderSide(
            width: isSelected ? 2 : 0,
            color: isSelected ? Colors.blue : Colors.grey),
      ),
      selected: isSelected,
      label: Text(
        label,
      ),
      onSelected: (bool value) {
        onSelected(value);
      },
    );
  }
}

class CustomFilteredChip extends FilterChip {
     const CustomFilteredChip({super.key, required super.label, required 
     super.onSelected});

     // here you can override any method that you need
     // like the build, onSelected, etc
     @override
     Widget build(BuildContext context) { /*  */ }

     @override
     ValueChanged<bool>? onSelected() { /*  */ }
}

If you are not sure what properties you can access or modify, navigate to the FilterChip (CTRL+Left Click on the class name in Visual Studio Code on Windows), and you can check all the properties, data types, and methods of the class.

how to create custom filter chip widget as it onSelect requires argument in flutter

2 Answers2

See also