从 api 获取图像时如何获得加载屏幕？答案

【问题标题】：How do i get a loading screen while i fetch images from api?从 api 获取图像时如何获得加载屏幕？
【发布时间】：2020-10-20 12:47:39
【问题描述】：

当我摇动屏幕并从 api 加载另外 10 个图像时，我想要一个加载屏幕。

 void initState() {
    super.initState();
    _shakePlugin = FlutterShakePlugin(
      onPhoneShaken: (){
        //do stuff on phone shake
        setState(() {
          
          count=count+10;
           
           
        });
      },
    )..startListening();
  }

Future<String> getjsondata() async {
    try {
      
      var response = await http.get(
          'https://api.unsplash.com/search/photos?per_page=${count}&client_id=TcAQEO3JoMG90U7Rl-YUiDo1x9XbZukzMOMQhxUVCV4&query=${_search}');
      setState(() {
        var converted = json.decode(response.body);
        data = converted['results'];
      });
      
    } catch (e) {}
    return 'success';
  }

每当我将计数增加 10 时，我需要一个加载小部件来显示，直到它从 api 获取图像。

【问题讨论】：

您使用哪种语言/框架以及在哪个平台上？ Web、android、ios 还是 windows？
我正在使用 Flutter 框架。
我知道它是颤振，顺便说一句，你如何在 Windows 10 中安装颤振？你是怎么做到的？我试图在 m windows 上安装它但失败了。请告诉我如何安装它
我没有，我在 linux 上使用它来构建移动应用程序。

标签： flutter dart loading

【解决方案1】：

使用FutureBuilder 处理不同的快照条件和连接状态以显示不同的小部件

【讨论】：

【解决方案2】：

在下面的代码中使用 FutureBuillder

FutureBuilder(
        future: getjsondata(),
        builder: (_, dataSnapshot) {
          if (dataSnapshot.connectionState == ConnectionState.waiting) {
            return Center(child: CircularProgressIndicator());
          } else {
            return Container(.....) // Show your images here & take data using dataSnapshot.data
          }
        },
      ),

【讨论】：