Flutter：如何在加载页面之前从 Api 获取数据 [关闭]

Question

我试图从 Api 获取数据以显示在屏幕上，因此我创建了一个函数并从小部件构建函数中调用它，或者我也尝试从构造函数中调用它，但它最终会调用该函数，因此列出空错误来了。

我想在屏幕加载之前调用 api 并将数据存储在 List 中。

Answer 1

你可以通过下面的代码来实现：

首先，您必须在类似 Button 的按钮中使用 onPressed 或 onTap 方法点击 Api

onPressed: () {
  getNutritionDetails(context,"2");
  getDataFromMyApi(context);
},

然后创建一个函数，让代码更干净，更易阅读，这里我将函数命名为getDataFromMyApi

void getDataFromMyApi(BuildContext context) {
    //Getting data from API and store it in String or Model or List whatever you required.
    String myData;

    //and then pass the data to your second activity
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) =>
            MyStatefulWidget(myData), // Your Api response myData is Passing to Stateful Widget
      ),
    );
  }

然后我制作了一个有状态的小部件，您希望在其中传递数据并希望它在打开之前加载数据，并且您可以在页面加载之前将数据放入myData var。

class MyStatefulWidget extends StatefulWidget {
  String myData;

  MyStatefulWidget(this.myData, {Key key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: double.infinity,
        width: double.infinity,
      child: Text(widget.myData),
    );
  }
}

或

您可以使用 Future Builder

问题：Future Builder 是做什么的？

回答：它调用future函数来等待结果，一旦它产生结果，它就会调用我们构建widget的builder函数。

class _ExampleState extends State<Example> {

@override
Widget build(BuildContext context) {
  return FutureBuilder<String>(
    future: downloadData(), // function where you call your api
    builder: (BuildContext context, AsyncSnapshot<String> snapshot) {  // AsyncSnapshot<Your object type>
      if( snapshot.connectionState == ConnectionState.waiting){
          return  Center(child: Text('Please wait its loading...'));
      }else{
          if (snapshot.hasError)
            return Center(child: Text('Error: ${snapshot.error}'));
          else
            return Center(child: new Text('${snapshot.data}'));  // snapshot.data  :- get your object which is pass from your downloadData() function
      }
    },
  );
}
Future<String> downloadData()async{
  //   var response =  await http.get('https://getProjectList');    
  return Future.value("Data download successfully"); // return your response
}
}