Question 228161 in Flutter Question posted in
The official Flutter documentation can be found here.

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

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) {
            
            }
Tags:

2

Answers


  1. 0

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

    See also

    Login or Signup to reply.
  2. 0

    You can literally create your own version of a widget, by redefining the widget itself, for that, you just need to extend the original class, and pay attention to all the required properties that FilterChip needs:

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search