0

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

4
  • What have you tried? How your code is now?
    – Firus
    Feb 17, 2022 at 23:33
  • @Firus I used Multi Select.
    – Paul
    Feb 17, 2022 at 23:44
  • Could you edit your question to add what you have? or create a sample code?
    – Firus
    Feb 17, 2022 at 23:46
  • @Firus I added code
    – Paul
    Feb 18, 2022 at 0:10

1 Answer 1

1

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

14
  • That's what I was looking for. Thank you very much!!!!
    – Paul
    Feb 18, 2022 at 5:42
  • I would like to clarify the question. I modified your code a little. I displayed a list of devices on the page as a separate class, and filters as a separate class. And I ran into a problem that when I apply filters, the list of devices does not change. Tell me how I can connect two classes so that after applying filters, changes occur in the list of devices. (I have added the code and photo to the main thread)
    – Paul
    Feb 18, 2022 at 13:23
  • You will help me a lot if you can tell me how to solve an additional problem.
    – Paul
    Feb 18, 2022 at 13:59
  • Are you calling setState in the main page after the change?
    – Firus
    Feb 18, 2022 at 14:11
  • Yes, I calling setState in the main page after the change
    – Paul
    Feb 18, 2022 at 14:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.