从api获取图像时如何获得加载屏幕?

时间:2020-06-30 08:49:24

标签: flutter dart loading

当我摇动屏幕并从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获取图像为止。

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

使用带有以下代码的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
          }
        },
      ),