I am writing an application on Flutter. I was able to make one filter with multiple selections.

enter image description here

But I want to have additional filters.

enter image description here

I used Multi-Select, but in the case of multiple filters, I don't know how to apply it

With what help can I implement this?

    import 'package:flutter/material.dart';

class MainPage extends StatelessWidget {
  @override
  Widget build(context) => Scaffold(
      appBar: AppBar(title: Text("f"),
                     backgroundColor: Colors.black),
      drawer: MediaQuery.of(context).size.width < 500 ? Drawer(
        child: HomePage(),
      ) : null,
      body: SafeArea(
          child:Center(
              child: MediaQuery.of(context).size.width < 500 ? Content() :
              Row(
                  children: [
                    Container(
                        width: 200.0,
                        child: HomePage()
                    ),
                    Container(
                        width: MediaQuery.of(context).size.width-200.0,
                        child: Content()
                    )
                  ]
              )
          )
      )
  );
}

List devices_list = ["First device", "Second device", "Third device", "Fourth device", "Fifth device", "Sixth device", "Seventh device", "Eighth device", "Ninth device"];

class Content extends StatelessWidget{

  @override
  Widget build(context) =>
    Scaffold(
      backgroundColor: Colors.white,
      body: LayoutBuilder(
          builder: (context, constraints){
            return AnimatedContainer(
              duration: Duration(milliseconds: 500),
              color: Colors.white,

              child: Center(
                child: Container(
                  constraints: BoxConstraints(
                    maxWidth: 800,),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(5.0),),

                  child: ListView.builder(
                    itemCount: devices_list.length,
                    itemBuilder: (BuildContext context, int index) {
                    return SizedBox (
                      height: 60,
                      key: Key(devices_list[index]),
                      child: Card(
                        shape: const RoundedRectangleBorder(
                          side: BorderSide(color: Colors.black,width: 3),
                          borderRadius: BorderRadius.all(Radius.circular(15))),
                        child: TextButton(
                          onPressed: (){},
                          child: ListTile(title: Text(devices_list[index]))),
            )
            );
            }
            ))));
            }));
          }

class MultiSelect extends StatefulWidget {
  final List<String> items;
  const MultiSelect({Key? key, required this.items}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _MultiSelectState();
}

class _MultiSelectState extends State<MultiSelect> {
  // this variable holds the selected items
  final List<String> _selectedItems = [];

// This function is triggered when a checkbox is checked or unchecked
  void _itemChange(String itemValue, bool isSelected) {
    setState(() {
      if (isSelected) {
        _selectedItems.add(itemValue);
      } else {
        _selectedItems.remove(itemValue);
      }
    });
  }

  // this function is called when the Cancel button is pressed
  void _cancel() {
    Navigator.pop(context);
  }

// this function is called when the Submit button is tapped
  void _submit() {
    Navigator.pop(context, _selectedItems);
  }

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: const Text('Select Manufactures'),
      content: SingleChildScrollView(
        child: ListBody(
          children: widget.items
              .map((item) => CheckboxListTile(
            value: _selectedItems.contains(item),
            title: Text(item),
            controlAffinity: ListTileControlAffinity.leading,
            onChanged: (isChecked) => _itemChange(item, isChecked!),
          ))
              .toList(),
        ),
      ),
      actions: [
        TextButton(
          child: const Text('Cancel'),
          onPressed: _cancel,
        ),
        ElevatedButton(
          child: const Text('Submit'),
          onPressed: _submit,
        ),
      ],
    );
  }
}

// Implement a multi select on the Home screen
class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();

}

class _HomePageState extends State<HomePage> {
  List<String> _selectedItemsManufactures = [];
  void _showMultiSelectManufactures() async {
    // a list of selectable items
    // these items can be hard-coded or dynamically fetched from a database/API
    final List<String> _items = [
      'Apple',
      'Samsung',
      'Xiaomi',
      'Nokia',
      'Huawei',
      'Alcatel'
    ];
    final List<String>? results = await showDialog(
      context: context,
      builder: (BuildContext context) {
        return MultiSelect(items: _items);
      },
    );

    // Update UI
    if (results != null) {setState(() {_selectedItemsManufactures = results;});}

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // use this button to open the multi-select dialog
            ElevatedButton(
              child: const Text('Manufactures'),
              onPressed: _showMultiSelectManufactures,
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(Colors.black)
              ),
            ),
            const Divider(
              height: 5,
              color: Colors.white,
            ),
            // display selected items
            Wrap(
              children: _selectedItemsManufactures
                  .map((e) => Chip(
                label: Text(e),
              ))
                  .toList(),
            )
          ],
        ),
      ),
    );
  }
}

Addition. Addition. I would like changes in the Menu class to be reflected in the class MainPage.

    class DevicesPage extends StatelessWidget {
  @override
  Widget build(context) => Scaffold(
      appBar: AppBar(title: Text("IT"),
                     backgroundColor: Colors.black),
      drawer: MediaQuery.of(context).size.width < 500 ? Drawer(
        child: Menu(),
      ) : null,
      body: SafeArea(
          child:Center(
              child: MediaQuery.of(context).size.width < 500 ? MainPage() :
              Row(
                  children: [
                    Container(
                        width: 200.0,
                        child: Menu()
                    ),
                    Container(
                        width: MediaQuery.of(context).size.width-200.0,
                        child: MainPage()
                    )
                  ]
              )
          )
      )
  );
}

class MainPage extends StatefulWidget {
  const MainPage({Key? key}) : super(key: key);

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  Map<String, List<String>?> filters = {};
  List<Phone> filteredPhones = phoneList;

  @override
  Widget build(BuildContext context) {
    return Scaffold(

      body: filteredPhones.isEmpty
          ? const Center(child: Text('No product', style: TextStyle(fontSize: 16),))
          : ListView.builder(
          itemCount: filteredPhones.length,
          itemBuilder: (_, index) {
            final currentPhone = filteredPhones[index];
            return ListTile(
              title: Text(currentPhone.name),
              subtitle: Text('${currentPhone.brand}-${currentPhone.color}'),
              trailing: Text('${currentPhone.operation_system}'),
            );
          }
      ),
    );
  }
}

class Menu extends StatefulWidget {
  const Menu({Key? key}) : super(key: key);

  @override
  State<Menu> createState() => _MenuState();
}

class _MenuState extends State<Menu> {
  Map<String, List<String>?> filters = {};
  List<Phone> filteredPhones = phoneList;

  void _filter() {
    setState(() {
      filteredPhones = phoneList;
      filters.forEach((key, value) {
        if((value ?? []).isNotEmpty) {
          filteredPhones = filteredPhones.where((phone) {
            switch(key) {
              case 'brand':
                return value!.contains(phone.brand);
              case 'color':
                return value!.contains(phone.color);
              case 'operation_system':
                return value!.contains(phone.operation_system);

                return true;
              default:
                return false;
            }
          }).toList();
        }
      });
      filters.clear();
      Navigator.of(context).pop();
    });
  }

  void _handleCheckFilter(bool checked, String key, String value) {
    final currentFilters = filters[key] ?? [];
    if(checked) {
      currentFilters.add(value);
    } else {
      currentFilters.remove(value);
    }
    filters[key] = currentFilters;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('phones List'),
        actions: [
          IconButton(
            icon: const Icon(Icons.filter_alt),
            onPressed: () {
              showDialog<Filter>(context: context, builder: (_) {
                return SimpleDialog(
                  title: const Text('Filters',textAlign: TextAlign.center,),
                  contentPadding: const EdgeInsets.all(16),
                  children: [
                    Column(
                      mainAxisSize: MainAxisSize.min,
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      children: [
                        const Text('Select a brand'),
                        ...brands.map((el) =>
                            CustomCheckboxTile(
                              label: el,
                              onChange: (check) => _handleCheckFilter(check, 'brand', el),
                            ),
                        ).toList(),
                        const Text('Select a operation_system'),
                        ...operation_system.map((el) =>
                            CustomCheckboxTile(
                              label: el,
                              onChange: (check) => _handleCheckFilter(check, 'operation_system', el),
                            )
                        ).toList(),
                        const Text('Select a colors'),
                        ...colors.map((el) =>
                            CustomCheckboxTile(
                              label: el,
                              onChange: (check) => _handleCheckFilter(check, 'color', el),
                            ),
                        ).toList(),
                        const SizedBox(height: 24,),
                        ElevatedButton(onPressed: _filter, child: const Text('APPLY')),
                      ],
                    ),
                  ],
                );
              });
            },
          ),
        ],
      ),
      body: filteredPhones.isEmpty
          ? const Center(child: Text('No product', style: TextStyle(fontSize: 16),))
          : ListView.builder(
          itemCount: filteredPhones.length,
          itemBuilder: (_, index) {
            final currentPhone = filteredPhones[index];
            return ListTile(
              title: Text(currentPhone.name),
              subtitle: Text('${currentPhone.brand}-${currentPhone.color}'),
              trailing: Text('${currentPhone.operation_system}'),
            );
          }
      ),
    );
  }
}

enter image description here


Solution 1: Firus

Well... you have many options. One way is to store all filters selected in a Map, like this:

final allFilters = {    
   "filterName1": "someValue",
   "filterName2": "someOtherValue", 
   "fitlerName3": ["value1", "value2", "value3"]   
}

And create a function that can handle each key of this map:

allFilter.forEach((key, value) {
  switch(key) {
    case "filterName1":
      // ...some code
    case "fitlerName2":
      // ...more code
    case "filterName3":
      // ...much more code
  }
})

You can check this demo project that I created https://github.com/felipeemidio/ListWithMultipleFilters