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

Posted 2023-02-23

【中文标题】Flutter：如何在加载页面之前从 Api 获取数据 [关闭]

【英文标题】：Flutter:How to get data from Api before loading page [closed]

【发布时间】：2021-01-24 11:41:41

【问题描述】：

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

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

【问题讨论】：

请提供您的代码到目前为止您尝试了什么。

【参考方案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

【讨论】：

谢谢，很好的解释..像魅力一样工作..

真的很高兴能提供帮助。 @MohammadArman

@Maz341 如果在颤振中显示带有 api 数据获取的加载器

是的，您可以使用相同的方法。当点击 api 时将 isLoading 的值设置为 true (isLoading = true)，然后在收到响应后设置 isLoading = false;