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

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'),
      ),
  );
}