Unable to access Riverpod provider state

Question

I currently have a riverpod provider declared as follows:

@riverpod
class FeeInputData extends _$FeeInputData {
  @override
  Fee build() {
    return const Fee(
      id: 0,
      institutionId: 'nmb7588BVjhvnb',
      name: '',
      academicYearId: 'utf896DHGFoIO7t87',
      installments: [],
      totalAmount: 0,
    );
  }

  void updateName(String data) {
    state = state.copyWith(name: data);
  }
}

I have used the riverpod generator which generates an AutoDisposeNotifierProvider.

This is my Consumer widget which has a ListView.seperated as its child:

Consumer(
                builder: (context, ref, _) {
                  final installments = ref.watch(feeInputDataProvider).installments;
                  return ListView.separated(
                    physics: const NeverScrollableScrollPhysics(),
                    shrinkWrap: true,
                    itemCount: installments.length,
                    separatorBuilder: (context, index) => Column(
                      children: [
                        SizedBox(height: SizeConfig(context).getVerticalSize(10)),
                        Row(
                          children: [
                            const Expanded(child: Divider(color: AppColors.kSubtitle, height: 0.5)),
                            SizedBox(width: SizeConfig(context).getHorizontalSize(5)),

                            /// Remove address button
                            AddRemoveButton(
                              type: AddRemoveButtonType.remove,
                              onTap: () {
                                ref.read(feeInputDataProvider.notifier).removeInstallment(index);
                              },
                            ),
                          ],
                        ),
                      ],
                    ),
                    itemBuilder: (context, index) => InstallmentWidget(
                      installment: installments[index],
                    ),
                  );
                },
              ),

Now, the issue is that when I try to access the provider via Consumer widget, it returns the following error:

The following JSNoSuchMethodError was thrown building Consumer(dirty, dependencies:
[UncontrolledProviderScope], state: _ConsumerState#08454):
TypeError: Cannot read properties of undefined (reading 'prototype')

I have wrapped my MaterialApp with ProviderScope widget.

How do I fix this?

Answer 1

The error message you're seeing suggests that there might be an issue with the way you're accessing the FeeInputData provider state in the updateName method.

One possible cause of this issue is that you're trying to access the provider state outside of a ProviderScope widget, which could result in the state being undefined.

To fix this, ensure that you wrap the relevant part of your widget tree with a ProviderScope widget, like so:

ProviderScope(
  child: YourWidget(),
)

Another potential issue is that you're not initializing the FeeInputData provider correctly. You might want to try creating a new instance of the FeeInputData class, and then pass it to the ProviderScope widget as a provider:

ProviderScope(
  providers: [
    Provider((ref) => FeeInputData()),
  ],
  child: YourWidget(),
)

Once you've done this, you should be able to access the provider state using the ref.watch method, as you're already doing in the Consumer widget.

If you're still having trouble, it might be helpful to provide more context around how you're using the FeeInputData provider and how it's being initialized in your app.