如何通过加载启动 Flutter 应用程序，使用 state 模式与提供程序

Question

我正在构建我的第一个应用程序，对于 state 管理，我使用 ValueChangeNotifier 和 Provider 以及 state 模式。 但是当我启动我的应用程序时，出现以下错误：

发生异常。 FlutterError (setState() or markNeedsBuild() called during build. This _InheritedProviderScope<EvaluationStore?> widget cannot be marked as needed to build because the framework is already in building widgets. 一个小部件可以被标记为需要在构建期间构建仅当其祖先之一当前正在构建时才进入构建阶段。此异常是允许的，因为框架在子级之前构建父窗口小部件，这意味着将始终构建脏后代。否则，框架可能不会在此构建阶段访问此窗口小部件。调用 setState() 或 markNeedsBuild() 的小部件是：_InheritedProviderScope<EvaluationStore?> 进行违规调用时当前正在构建的小部件是：Builder）

我不知道如何在不显示我的项目类的情况下显示我的问题，所以如果时间太长，我深表歉意。

我创建了一个 model class。

class EvaluationModel {
  final String token;
  final DateTime creation;
  final String technicians;
  final String customer;
  final String responsible;
  final String compressor;
  final int horimeter;
  final int oilType;
  final int oil;
  final int oilFilter;
  final int airFilter;
  final int separatorFilter;
  final int revitalize;
  final int revitalization;
  final String? technicalAdvice;
  final bool uploaded;
  // continues with the basic methods of a data class...
}

因此，我创建了一个负责 EvaluationModel 方法的服务 class，我在其中创建了一个方法，用来自 MySQL 数据库的数据填充我的列表。

class EvaluationService {
  Future<List<EvaluationModel>> fetchEvaluations(
      String creationStart,
      String creationEnd,
      String technicians,
      String customer,
      String compressor) async {
    List<EvaluationModel> evaluations = <EvaluationModel>[];
    EvaluationModel evaluation;
        final MySqlConnection conn = await Database.getDbConnection();
    final Results result = await conn.query(
        await rootBundle.loadString('lib/assets/evaluation_select.sql'),
        [creationStart, creationEnd, technicians, customer, compressor]);
    await conn.close();
    for (var row in result) {
      evaluation = EvaluationModel(
          token: row['token'],
          creation: row['creation'],
          technicians: row['technicians'],
          customer: row['customer'],
          responsible: row['responsible'],
          compressor: row['compressor'],
          horimeter: row['horimeter'],
          oilType: row['oiltype'],
          oil: row['oil'],
          oilFilter: row['oilfilter'],
          airFilter: row['airfilter'],
          separatorFilter: row['separatorfilter'],
          revitalize: row['revitalize'],
          revitalization: row['revitalization'],
          technicalAdvice: row['technicalAdvice'],
          uploaded: true);
      evaluations.add(evaluation);
    }
    return evaluations;
  }
}

然后我创建了 EvaluationState 和 EvaluationStore class 来管理我页面的 state。

abstract class EvaluationState {}

class InitialEvaluationState extends EvaluationState {}

class LoadingEvaluationState extends EvaluationState {}

class SuccessEvaluationState extends EvaluationState {
  final List<EvaluationModel> evaluations;
  SuccessEvaluationState(this.evaluations);
}

class ErrorEvaluationState extends EvaluationState {
  final String message;
  ErrorEvaluationState(this.message);
}

class EvaluationStore extends ValueNotifier<EvaluationState> {
  final EvaluationService service;

  EvaluationStore(this.service) : super(InitialEvaluationState());

  Future fetchEvaluations(String creationStart, String creationEnd,
      String technicians, String customer, String compressor) async {
    value = LoadingEvaluationState();
    try {
      final evaluations = await service.fetchEvaluations(
          creationStart, creationEnd, technicians, customer, compressor);

      value = SuccessEvaluationState(evaluations);
    } catch (e) {
      value = ErrorEvaluationState(e.toString());
    }
  }
}

因此，为了与供应商合作，我在 MyApp class 中这样做了。

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        Provider(create: (_) => EvaluationService()),
        ChangeNotifierProvider(
            create: (context) => EvaluationStore(context.read()))
      ],
      child: MaterialApp(
        title: 'Avaliação',
        theme: ThemeData(
          primarySwatch: Colors.deepOrange,
        ),
        home: const EvaluationsPage(),
      ),
    );
  }

最后，在页面上我是这样处理的：

class EvaluationsPage extends StatefulWidget {
  const EvaluationsPage({Key? key}) : super(key: key);

  @override
  State<EvaluationsPage> createState() => _EvaluationsPageState();
}

class _EvaluationsPageState extends State<EvaluationsPage> {
  @override
  void initState() {
    super.initState();
    context
        .read<EvaluationStore>()
        .fetchEvaluations('0001-01-01', '9999-12-31', '%', '%', '%');
  }

  @override
  Widget build(BuildContext context) {
    final store = context.watch<EvaluationStore>();
    final state = store.value;
    Widget? child;

    if (state is LoadingEvaluationState) {
      child = const Center(child: CircularProgressIndicator());
    }
    if (state is ErrorEvaluationState) {
      child = Center(child: Text(state.message));
    }
    if (state is SuccessEvaluationState) {
      child = ListView.builder(
          itemCount: state.evaluations.length,
          itemBuilder: (context, index) {
            return ListTile(title: Text(state.evaluations[index].customer));
          });
    }

    return Scaffold(
      appBar: AppBar(title: const Text('Avaliações')),
      body: child ?? Container(),
    );
  }
}

注意：如果我删除行“value = LoadingEvaluationState();” 从评估商店 class，应用程序运行正常。

如果有人可以帮助我，我什至可以提供该项目。

我是初学者，我完全被卡住了，我不知道该尝试什么。

Answer 1

发生错误是因为在执行initState方法时，您调用了重建。

• 简单的解决方案：

 @override
 void initState() {
 super.initState();
 WidgetsBinding.instance.addPostFrameCallback((_){
   context
        .read<EvaluationStore>()
        .fetchEvaluations('0001-01-01', '9999-12-31', '%', '%', '%');
  }
});