如何使用提供商初始化我的应用程序？

Question

我选择使用提供者作为我的 state 管理，所以我看到我必须使用多提供者。

我的难题是如何构建我的代码，以便在我的应用程序首次运行时初始化我需要的所有数据并将提供者提供给多提供者。

提供者示例

import 'package:cron/cron.dart';
import 'package:flutter/material.dart';
import 'package:web_app/models/fixture.dart';
import 'package:web_app/services/fixture_service.dart';

class HighlightsProvider extends ChangeNotifier {
  final List<Fixture> _highlights = [];

  List<Fixture> get() => _highlights;

  Future<void> fetchHighlights() async {
    try {
      List<Fixture> highlightFixtures = [];
      final response = await FixtureService().getAppHighlightFixtures();
      [...response].asMap().forEach((index, element) {
        highlightFixtures.add(new Fixture.fromJson(element));
      });
      _highlights.clear();
      _highlights.addAll(highlightFixtures);
      notifyListeners();
    } catch (e) {
      print('error');
      print(e);
    }
  }

  runJob(cron) {
    cron.schedule(Schedule.parse('* * * * *'), () async {
      fetchHighlights();
      print('fetch highlights every one minute');
    });
  }
}

假设这个 class 将获取我所有的提供者并初始化主题：

class InitializeApp {
  final cron = Cron();

  Future run(HighlightsProvider highlightsProvider) async {
    return Future.wait([
      initiakizeHighlights(highlightsProvider),
    ]);
  }

  Future initiakizeHighlights(HighlightsProvider highlightsProvider) async {
    highlightsProvider.runJob(cron);
    await highlightsProvider.fetchHighlights();
  }
}

然后我必须将这些提供者交付给多提供者：

void main() async {
  final highlightsProvider = HighlightsProvider();
  await InitializeApp().run(highlightsProvider);
  print('ready');
  runApp(MyApp(highlightsProvider: highlightsProvider));
}

class MyApp extends StatelessWidget {
  final highlightsProvider;

  const MyApp({Key key, this.highlightsProvider}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    print('build');

    return MultiProvider(
      providers: [
        ChangeNotifierProvider<HighlightsProvider>.value(
          value: highlightsProvider,
        )
      ],
      child: MaterialApp(
          title: 'tech',
          theme: ThemeData(
            primarySwatch: Colors.amber,
            brightness: Brightness.light,
          ),
          routes: <String, WidgetBuilder>{
            '/': (BuildContext context) {
              return MyHomePage(title: 'Flutter Demo Home Page');
            }
          }),
    );
  }
}

Answer 1

通常你只需用MultiProvider包装你的MaterialApp ，然后你就已经可以访问你将定义的所有Providers 。

Widget build(BuildContext context) {
return MultiProvider(
  providers: [
    StreamProvider<RecipeStreamService>.value(value: RecipeStreamService().controllerOut)
  ],
  child: MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Home Food',
        routes: {
          '/register': (BuildContext context) => RegisterPage(),
          '/login': (BuildContext context) => LoginPage()
        },
        ),
        home: HomePage(title: 'Home'),
      ),
  );
}