当通知程序尝试在flutter_riverpod中更新其state错误时抛出异常

Question

I am developing an app with flutter and I am using flutter_riverpod package for state managment. But I am getting an error.

I have 2 main widget inside my screen. These are "ReadTopBarW" widget and "ReadArticleW" widget. I am getting datas with http post with futureprovider with riverpod. There is no problem so far. My purpose is change the icon with a response value. I am getting the value in "ReadArticleW" and I am writing the value for StateProvider. And I will watch the value in "ReadTopBarW".

This is my "ReadArticleW"

import 'dart:convert';
import 'package:eem_flutter_app/services/get_one_article.dart';
import 'package:eem_flutter_app/widgets/read/shimmer_read_w.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

final isSavedVider = StateProvider((_) => '');

class ReadArticleW extends ConsumerWidget {
  const ReadArticleW({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final futureCatFacts = ref.watch(singleArticleFProvider);
    return SingleChildScrollView(
      child: futureCatFacts.when(
        data: (datax) {
          final decodedData = json.decode(datax.body);
          final isSaved = decodedData[1].toString();
          ref.read(isSavedVider.notifier).state = isSaved;
          return Column(
            children: [
              Text(
                decodedData[0]['articleTitle'].toString(),
              ),
              Image.network(
                  decodedData[0]['articleLImage'].toString()),
            ],
          );
        },
        error: (err, stack) => Text('Error: $err'),
        loading: () => const ShimmerReadW(),
      ),
    );
  }
}

This my "ReadTopBarW"

import 'package:eem_flutter_app/widgets/read/read_article_w.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';


class ReadTopBarW extends ConsumerWidget {
  const ReadTopBarW({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final x = ref.watch(isSavedVider);
    print(x);
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        InkWell(
            onTap: () {
              Navigator.pop(context);
            },
            child: const Icon(Icons.arrow_back_ios)),
        Row(
          children: const [
            "0" == "1"
                ?  Icon(Icons.bookmark_border)
                :  Icon(Icons.bookmark_outlined),
             SizedBox(
              width: 10,
            ),
             Icon(Icons.ios_share),
          ],
        ),
      ],
    );
  }
}

This is error text. The error is vscode red error that you know

Exception has occurred.
StateNotifierListenerError (At least listener of the StateNotifier Instance of 'StateController<String>' threw an exception
when the notifier tried to update its state.

The exceptions thrown are:

setState() or markNeedsBuild() called during build.
This UncontrolledProviderScope widget cannot be marked as needing to build because the framework is already in the process of building widgets. A widget can be marked as needing to be built during the build phase only if one of its ancestors is currently building. This exception is allowed because the framework builds parent widgets before children, which means a dirty descendant will always be built. Otherwise, the framework might not visit this widget during this build phase.
The widget on which setState() or markNeedsBuild() was called was:
  UncontrolledProviderScope
The widget which was currently being built when the offending call was made was:
  ReadArticleW

Please focus on th isSavedVider because the problem is here. There is no problem in singleArticleProvider.

note: I simplified the code to publish here.

Answer 1

You shouldn't update a StateProvider in the build method, the error is coming from here:

     child: futureCatFacts.when(
        data: (datax) {
          final decodedData = json.decode(datax.body);
          final isSaved = decodedData[1].toString();
          ref.read(isSavedVider.notifier).state = isSaved;

What you can you is watch the singleArticleFProvider in isSavedVider and set the value from the extracted response, this way, when there is an update to the response, it isSavedVider gets the update value like so:

final isSavedVider = StateProvider((ref){
  final futureCatFacts = ref.watch(singleArticleFProvider);
  if(futureCatFacts is AsyncData){
      final decodedData = json.decode(futureCatFacts.value.body);
      final isSaved = decodedData[1].toString();
      return isSaved;
  }
  return "";
});