在小部件上方找不到正确的提供者

如何解决在小部件上方找不到正确的提供者

对于Flutter来说，我是一个相对较新的人，并且正在构建一个应用程序，该应用程序从API提取数据并将其显示在整个应用程序的不同小部件上。我正在使用提供程序执行API调用，并将反序列化的json存储在一个属性中，然后在initState函数中进行访问。下面是main.dart的小部件树，我想访问“仪表板”页面上此处提供的提供程序，因为这是需要该值的地方。我知道我在做什么错了，但是我错了多少呢？

  runApp(MaterialApp(
    home: LoginPage(),routes: routes,));
}

class SampleApp extends StatefulWidget {
  @override
  SampleAppState createState() => SampleAppState();
}

class SampleAppState extends State<SampleApp> {
  int currentIndex = 0;
  final List<Widget> childPages = [
    Page1(),Page2(),Page3(),Page4()
  ];

  void onTapped(int index) {
    setState(() {
      currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (context) => APIProvider())
      ],child: Scaffold(
        body: childPages[currentIndex],bottomNavigationBar: BottomNavigationBar(
          onTap: onTapped,currentIndex: currentIndex,fixedColor: Colors.lightBlue,backgroundColor: Colors.white,type: BottomNavigationBarType.fixed,items: [
            BottomNavigationBarItem(
                icon: new Icon(Icons.dashboard),title: new Text('Page 1'),activeIcon: new Icon(
                  Icons.dashboard,color: Colors.lightBlue,)),BottomNavigationBarItem(
                icon: new Icon(Icons.list),title: new Text('Page 2'),activeIcon: new Icon(
                  Icons.list,BottomNavigationBarItem(
                icon: new Icon(Icons.collections_bookmark),title: new Text('Page 3'),activeIcon: new Icon(
                  Icons.collections_bookmark,BottomNavigationBarItem(
                icon: new Icon(Icons.person),title: new Text('Page 4'),activeIcon: new Icon(
                  Icons.person,],),);
  }
}

然后我尝试像这样访问Page1中的提供程序值：

@override
  void initState() {
    valueFromProvider =
        Provider.of<APIProvider>(context).providerValue;
    super.initState();
  }

这可能是由于我尝试在Page1小部件中尝试访问的提供程序值为null造成的，因此可以通过预加载我的提供程序来解决此问题？

解决方法

您没有在正确的时间提供提供者。在您的情况下，您在第1页上添加了MultiProvider，但是您的上下文已经初始化，因此您无法访问它。为了正确访问它，必须将MultiProvider移至初始化应用程序的位置，如下所示：

runApp(

MaterialApp(
    home: MultiProvider(
    providers: [
        ChangeNotifierProvider(create: (context) => APIProvider())
      ],child:LoginPage()
     ),routes: routes,));

这应该可以解决您的问题。