Filter Screen In Flutter Using Provider Package

Question

I'm new to Flutter and I'm able to create the UI, but I'm not an expert. I've been looking for a way to create a filter screen using Provider. Is there anyone who can help?

Here is my code: I'm using a Dialog Widget to create a pop-up.

class _FilterDialogWidgetState extends State<FilterDialogWidget> {
  @override
  Widget build(BuildContext context) {
    return Dialog(
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 15, vertical: 15),
        height: 659,
        width: 0,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(12),
        ),
        child: Column(children: [
          Row(children: [
            const Text(
              'Filter your search',
              style: TextStyle(color: Color(0xFF181C2E), fontSize: 16),
            ),
            const SizedBox(width: 60),
            Padding(
              padding: const EdgeInsets.only(left: 18),
              child: Container(
                  height: 45,
                  width: 45,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(25),
                    color: const Color(0xFFECF0F4),
                  ),
                  child: const Icon(Icons.clear)),
            ),
          ]),
          const SizedBox(height: 10),
          SizedBox(
              height: 130,
              width: 291,
              child: 
              // Here is the offers column
              Column(children: [
                const Padding(
                  padding: EdgeInsets.only(right: 200, bottom: 10),
                  child: Text(
                    'OFFERS',
                    style: TextStyle(color: Color(0xFF181C2E), fontSize: 12),
                  ),
                ),
                Row(children: [
                  // delivery container or
                  Container(
                    width: 82,
                    height: 46,
                    decoration: BoxDecoration(
                      borderRadius: const BorderRadius.all(Radius.circular(33)),
                      border: Border.all(
                          width: 2.0,
                          color: const Color(0xFFEDEDED),
                          style: BorderStyle.solid),
                    ),
                    child: const Padding(
                      padding: EdgeInsets.only(top: 8),
                      child: Text(
                        'Delivery',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          color: Color(0xFF464E57),
                          fontSize: 14,
                          fontFamily: 'Sen',
                        ),
                      ),
                    ),
                  ),
                  const SizedBox(
                    width: 5,
                  ),
                  Container(
                    // or pick up container
                    width: 80,
                    height: 46,
                    decoration: BoxDecoration(
                      borderRadius: const BorderRadius.all(Radius.circular(33)),
                      border: Border.all(
                          width: 2.0,
                          color: const Color(0xFFEDEDED),
                          style: BorderStyle.solid),
                    ),
                    child: const Padding(
                      padding: EdgeInsets.only(top: 8),
                      child: Text(
                        'Pick up',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          color: Color(0xFF181C2E),
                          fontSize: 14,
                          fontFamily: 'Sen',
                        ),
                      ),
                    ),
                  ),
                  const SizedBox(
                    width: 5,
                  ),
                  Container(
                    // or offers container
                    width: 78,
                    height: 46,
                    decoration: BoxDecoration(
                      borderRadius: const BorderRadius.all(Radius.circular(33)),
                      border: Border.all(
                          width: 2.0,
                          color: const Color(0xFFEDEDED),
                          style: BorderStyle.solid),
                    ),
                    child: const Padding(
                      padding: EdgeInsets.only(top: 8),
                      child: Text(
                        'Offer',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          color: Color(0xFF181C2E),
                          fontSize: 14,
                          fontFamily: 'Sen',
                        ),
                      ),
                    ),
                  ),
                ]),
                const SizedBox(
                  height: 10,
                ),
                Padding(
                  padding: const EdgeInsets.only(right: 34),
                  child: 
                    // or online payment available container
                  Container(
                    width: 219,
                    height: 45.96,
                    decoration: BoxDecoration(
                      borderRadius: const BorderRadius.all(Radius.circular(33)),
                      border: Border.all(
                          width: 2.0,
                          color: const Color(0xFFEDEDED),
                          style: BorderStyle.solid),
                    ),
                    child: const Padding(
                      padding: EdgeInsets.only(top: 8),
                      child: Text(
                        'Online payment available',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          color: Color(0xFF181C2E),
                          fontSize: 14,
                          fontFamily: 'Sen',
                        ),
                      ),
                    ),
                  ),
                ),
              ])),
          const SizedBox(
            height: 25,
          ),
          const Padding(
            padding: EdgeInsets.only(right: 169, bottom: 10),
            child: 
                   // And then Click on any option on
            //children of Delivery-Time
            Text(
              'DELIVERY-TIME',
              style: TextStyle(color: Color(0xFF181C2E), fontSize: 12),
            ),
          ),
          Row(children: [
            Container(
              // First Container with 10-15 min
              width: 86,
              height: 46,
              decoration: BoxDecoration(
                borderRadius: const BorderRadius.all(Radius.circular(33)),
                border: Border.all(
                    width: 2.0,
                    color: const Color(0xFFEDEDED),
                    style: BorderStyle.solid),
              ),
              child: const Padding(
                padding: EdgeInsets.only(top: 8),
                child: Text(
                  '10-15 min',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    color: Color(0xFF464E57),
                    fontSize: 14,
                    fontFamily: 'Sen',
                  ),
                ),
              ),
            ),
            const SizedBox(
              width: 4,
            ),
            Container(
              // First Container with 20 min
              width: 80,
              height: 46,
              decoration: BoxDecoration(
                borderRadius: const BorderRadius.all(Radius.circular(33)),
                border: Border.all(
                    width: 2.0,
                    color: const Color(0xFFEDEDED),
                    style: BorderStyle.solid),
              ),
              child: const Padding(
                padding: EdgeInsets.only(top: 8),
                child: Text(
                  '20 min',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    color: Color(0xFF181C2E),
                    fontSize: 14,
                    fontFamily: 'Sen',
                  ),
                ),
              ),
            ),
            const SizedBox(
              width: 5,
            ),
            Container(
              // First Container with 30 min
              width: 75,
              height: 46,
              decoration: BoxDecoration(
                borderRadius: const BorderRadius.all(Radius.circular(33)),
                border: Border.all(
                    width: 2.0,
                    color: const Color(0xFFEDEDED),
                    style: BorderStyle.solid),
              ),
              child: const Padding(
                padding: EdgeInsets.only(top: 8),
                child: Text(
                  '30 min',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    color: Color(0xFF181C2E),
                    fontSize: 14,
                    fontFamily: 'Sen',
                  ),
                ),
              ),
            ),
          ]),
          const SizedBox(
            height: 25,
          ),
          const Padding(
            padding: EdgeInsets.only(right: 200, bottom: 10),
            child: 
                      // And then Click on any option on
            //Pricing children
            Text(
              'PRICING',
              style: TextStyle(color: Color(0xFF181C2E), fontSize: 12),
            ),
          ),
          Row(children: [
            // FIRST PRICE
            Container(
              alignment: Alignment.center,
              width: 48,
              height: 48,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(25),
                border: Border.all(
                  color: Color(0XFFEDEDED),
                  width: 2,
                ),
              ),
              child: Text(
                '\$',
                style: TextStyle(),
              ),
            ),
            SizedBox(width: 5),
            // SECOND PRICE
            Container(
              alignment: Alignment.center,
              width: 48,
              height: 48,
              decoration: BoxDecoration(
                color: Colors.orange,
                borderRadius: BorderRadius.circular(25),
                border: Border.all(
                  color: Color(0XFFEDEDED),
                  width: 2,
                ),
              ),
              child: Text(
                '\$\$',
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
            ),
            SizedBox(width: 5),
            // THIRD PRICE
            Container(
              alignment: Alignment.center,
              width: 48,
              height: 48,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(25),
                border: Border.all(
                  color: const Color(0XFFEDEDED),
                  width: 2,
                ),
              ),
              child: const Text(
                '\$\$\$',
                style: TextStyle(),
              ),
            ),
          ]),
          const SizedBox(
            height: 25,
          ),
          // And then Click on any option on
          //  Rating Children
          const Padding(
            padding: EdgeInsets.only(right: 200, bottom: 10),
            child: Text(
              'RATING',
              style: TextStyle(color: Color(0xFF181C2E), fontSize: 12),
            ),
          ),
          Row(children: [
            Container(
              // 1 Star Rating
                alignment: Alignment.center,
                width: 40,
                height: 40,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(25),
                  border: Border.all(
                    color: const Color(0XFFEDEDED),
                    width: 2,
                  ),
                ),
                child: const Icon(Icons.star, color: Colors.orange)),
            const SizedBox(
              width: 5,
            ),
              // 2 Star Rating
            Container(
                alignment: Alignment.center,
                width: 40,
                height: 40,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(25),
                  border: Border.all(
                    color: const Color(0XFFEDEDED),
                    width: 2,
                  ),
                ),
                child: const Icon(Icons.star, color: Colors.orange)),
            const SizedBox(
              width: 5,
            ),
              // 3 Star Rating
            Container(
                alignment: Alignment.center,
                width: 40,
                height: 40,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(25),
                  border: Border.all(
                    color: const Color(0XFFEDEDED),
                    width: 2,
                  ),
                ),
                child: const Icon(Icons.star, color: Colors.orange)),
            const SizedBox(
              width: 5,
            ),
            Container(
              // 4 Star Ratin
                alignment: Alignment.center,
                width: 40,
                height: 40,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(25),
                  border: Border.all(
                    color: Color(0XFFEDEDED),
                    width: 2,
                  ),
                ),
                child: const Icon(Icons.star, color: Colors.orange)),
            const SizedBox(
              width: 5,
            ),
              // 5 Star Rating
            Container(
                alignment: Alignment.center,
                width: 40,
                height: 40,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(25),
                  border: Border.all(
                    color: const Color(0XFFEDEDED),
                    width: 2,
                  ),
                ),
                child: const Icon(Icons.star_border_outlined,
                    color: Color(0xFFD9D9D9))),
          ]),
          const SizedBox(
            height: 25,
          ),
          // AND FINALLY CLICKED ON THIS ELEVATED BUTTON
          ElevatedButton(
              style: buttonPrimary2,
              onPressed: () {},
              child:
                  const Text('FILTER', style: TextStyle(color: Colors.white)))
        ]),
      ),
    );
  }
}

Filter screen

I need a situation where, when a user clicks on any options in the following sequence:

• OFFERS Column
• DELIVERY-TIME Column
• PRICING Column
• RATING Column
• and finally clicks on the FILTER BUTTON, it will open up a separate page or screen.

Answer 1

Alright first you need to add provider at least one widget above this one (by above I mean the widget that wraps this widget Parent(child: ChildWidget()). the way you do this is like this:

ChangeNotifierProvider.value(
  value: MyFilterProvider()
  child: const FilterDialogWidget(),
),

from [provider package][1] then you can create your MyFilterProvider like this:

class MyFilterProvider extends ChangeNotifier {
  List<String> filters =[];
  addFilter(String filter) {
    // do add
  }
  removeFilter(String filter) {
    //do remove
  }
}

In your UI you can use the provider to know which filter is active like this: Provider.of<MyFilterProvider>(context).filters.contains(myFilter)

And you can change your filters like this:

Provider.of<MyFilterProvider>(context).addFilter(newFilter);

At the end don't forget to use a ConsumerWidget<MyFilterProvider> to get the UI updates.