Flutter showModalBottomSheet with bloc

Question

I'm using bloc in my app, in my showModalBottomSheet there are filters that should apply when the button is clicked, but when the button is clicked I get. I'm using bloc in my app, in my showModalBottomSheet there are filters that should apply when the button is clicked, but when the button is clicked I get.

Error: Could not find the correct Provider<ProductsBloc> above this BottomSheet Widget

This happens because you used a `BuildContext` that does not include the provider
of your choice. There are a few common scenarios:

- You added a new provider in your `main.dart` and performed a hot-reload.
  To fix, perform a hot-restart.

- The provider you are trying to read is in a different route.

I wrapped my widget in BlocProvider and tried to wrap in BlocProvider.value but it doesn't work.

// where it is called from
 appBar: AppBar(
        actions: [
          IconButton(
            onPressed: () {
              showFilter(context);
            },
            icon: const Icon(Icons.filter_alt),
          ),
        ],

// my modal bottom sheet 
showFilter(context) => showModalBottomSheet(
    context: context,
    backgroundColor: Colors.white,
    isScrollControlled: true,
    builder: (context) {
      return BlocProvider<ProductsBloc>(
        create: (context) => ProductsBloc(),
        child: Container(
          padding: REdgeInsets.symmetric(horizontal: 8, vertical: 12),
          height: MediaQuery.of(context).size.height * 0.9,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                children: [
                  Text(
                    'Фильтр',
                    style: TextStyles.bodyStyle,
                  ),
                  const Spacer(),
                  IconButton(
                      onPressed: () {
                        Navigator.pop(context);
                      },
                      icon: const Icon(Icons.close)),
                ],
              ),
              SizedBox(height: 10.h),
              Text(
                'цена'.toUpperCase(),
                style: TextStyles.editStyle,
              ),
              SizedBox(height: 10.h),
              DropdownButtonFormField(
                value: 'price_asc',
                items: const [
                  DropdownMenuItem(
                    value: 'price_asc',
                    child: Text('По возрастанию'),
                  ),
                  DropdownMenuItem(
                    value: 'price_desc',
                    child: Text('По убыванию'),
                  ),
                ],
                menuMaxHeight: 200,
                borderRadius: BorderRadius.circular(20),
                onChanged: (value) {},
                decoration: Decorations.dropdownDecoration,
                elevation: 1,
              ),
              SizedBox(height: 10.h),
              Text(
                'медиа'.toUpperCase(),
                style: TextStyles.editStyle,
              ),
              SizedBox(height: 10.h),
              DropdownButtonFormField(
                value: '',
                items: const [
                  DropdownMenuItem(
                    value: '',
                    child: Text('Все'),
                  ),
                  DropdownMenuItem(
                    value: 'with_photo',
                    child: Text('C фото'),
                  ),
                  DropdownMenuItem(
                    value: 'without_photo',
                    child: Text('Без фото'),
                  ),
                ],
                menuMaxHeight: 200,
                borderRadius: BorderRadius.circular(20),
                onChanged: (value) {},
                decoration: Decorations.dropdownDecoration,
                elevation: 1,
              ),
              SizedBox(height: 10.h),
              Text(
                'наличие'.toUpperCase(),
                style: TextStyles.editStyle,
              ),
              SizedBox(height: 10.h),
              DropdownButtonFormField(
                value: '',
                items: const [
                  DropdownMenuItem(
                    value: '',
                    child: Text('Все'),
                  ),
                  DropdownMenuItem(
                    value: 'in_stock',
                    child: Text('В наличии'),
                  ),
                  DropdownMenuItem(
                    value: 'out_of_stock',
                    child: Text('Нет в наличии'),
                  ),
                ],
                menuMaxHeight: 200,
                borderRadius: BorderRadius.circular(20),
                onChanged: (value) {},
                decoration: Decorations.dropdownDecoration,
                elevation: 1,
              ),
              const Spacer(),
              ElevatedButton(
                  onPressed: () {
                    context.read<ProductsBloc>().add(LoadProductsWithFilter());
                    Navigator.pop(context);
                  },
                  child: const Text('Применить')),
            ],
          ),
        ),
      );
    });

Answer 1

Wrap your outer Container widget with Builder Widget like this

child : Builder(
  builder: (context) {
   return // Your Container(...);
},
)

And also read about BuildContext. This tutorial will help you to understand BuildContext w.r.t BLOC.