首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在flutter中从json API获取数据时被CircularProgressIndicator卡住

在Flutter中,当从JSON API获取数据时被CircularProgressIndicator卡住,可能是因为网络请求阻塞了UI线程,导致界面无法响应用户操作。为了解决这个问题,可以使用异步编程来处理网络请求,以确保UI线程的流畅运行。

一种常见的解决方案是使用Flutter的异步编程模型,即使用async和await关键字来处理网络请求。以下是一个示例代码,展示了如何在Flutter中使用async和await来获取JSON数据并显示加载指示器:

代码语言:txt
复制
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  bool isLoading = true;
  List<dynamic> data = [];

  @override
  void initState() {
    super.initState();
    fetchData();
  }

  Future<void> fetchData() async {
    try {
      var response = await http.get('https://api.example.com/data');
      if (response.statusCode == 200) {
        setState(() {
          data = json.decode(response.body);
          isLoading = false;
        });
      } else {
        // 处理请求失败的情况
      }
    } catch (e) {
      // 处理网络请求异常
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Data from JSON API'),
      ),
      body: isLoading
          ? Center(
              child: CircularProgressIndicator(),
            )
          : ListView.builder(
              itemCount: data.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(data[index]['title']),
                  subtitle: Text(data[index]['description']),
                );
              },
            ),
    );
  }
}

在上述示例中,我们使用了http包来发起网络请求,并使用async和await关键字来等待请求的完成。当数据加载完成后,我们使用setState方法来更新UI,并将isLoading设置为false,以便显示从JSON API获取的数据。

对于Flutter中的CircularProgressIndicator,它是一个用于显示加载指示器的小部件。当isLoading为true时,我们显示CircularProgressIndicator,表示数据正在加载中;当isLoading为false时,我们使用ListView.builder来展示从JSON API获取的数据。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云函数(SCF)。

  • 腾讯云云服务器(CVM):提供可扩展的云服务器实例,适用于各种规模的应用程序和工作负载。您可以根据需求选择不同的配置和操作系统,并灵活管理您的云服务器。
  • 腾讯云函数(SCF):是一种无服务器计算服务,可以让您在云端运行代码而无需管理服务器。您可以使用SCF来处理和响应各种事件,包括HTTP请求、定时触发器等。

您可以通过以下链接了解更多关于腾讯云云服务器和腾讯云函数的详细信息:

  • 腾讯云云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 腾讯云函数(SCF):https://cloud.tencent.com/product/scf

请注意,以上答案仅供参考,具体的解决方案可能因实际情况而异。在实际开发中,您可能需要根据具体需求和技术要求进行适当的调整和优化。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

「快速上手Flutter开发系列教程」之线程和异步UI

Android,当你想访问一个网络资源,你通常会创建一个AsyncTask,当你需要一个耗时的后台任务,你通常需要IntentService,Flutter则不需要这么繁琐。...数据③ replyTo.send(json.decode(response.body)); } } 以上代码片段的完整部分可以课程源码查找。...数据③ replyTo.send(json.decode(response.body)); } } } 关于Flutter的更多异步编程知识,可以学习《Flutter入门到进阶... iOS ,在后台运行耗时任务我们通常会使用 UIProgressView。 Android ,在后台运行耗时任务我们通常会使用 ProgressBar。...否则,当数据网络请求返回,渲染 ListView: import 'dart:convert'; import 'package:flutter/material.dart'; import '

2.1K20

Flutter 构建完整应用手册-联网 顶

互联网上获取数据 大多数应用程序获取互联网上的数据是必要的。 幸运的是,Dart和Flutter为这类工作提供了工具!...路线 使用http包发出网络请求 将响应转换为自定义Dart对象 用Flutter获取并显示数据 1.使用http包发出网络请求 http包提供了互联网获取数据的最简单方法。...在这个例子,我们将使用http.get方法JSONPlaceholder REST API获取示例文章。...现在我们有一个功能,我们可以调用互联网上获取Post! 3.用Flutter获取并显示数据 为了获取数据并将其显示屏幕上,我们可以使用FutureBuilder小部件!...Flutter附带FutureBuilder部件,可以轻松处理异步数据源。 我们必须提供两个参数: 使用的Future。 我们的例子,我们将调用我们的fetchPost()函数。

2.5K20

Flutter】Future 与 FutureBuilder 异步编程代码示例 ( FutureBuilder 构造函数设置 | 处理 Flutter 中文乱码 | 完整代码示例 )

case ConnectionState.done: /// 请求结束 , 如果出现错误 , 则返回错误信息 /// 如果请求成功 , 返回网络请求的数据...的中文乱码 ---- 数据是以 UTF-8 格式进行编码的 , 只能以 UTF-8 格式进行解码 ; 创建 Utf8Decoder 解码器 , /// 处理中文乱码 Utf8Decoder...; 完整代码示例 : /// 调用 Http Get 方法 , 获取服务器的 json 数据 Future httpGet() async { //var url...case ConnectionState.done: /// 请求结束 , 如果出现错误 , 则返回错误信息 /// 如果请求成功 , 返回网络请求的数据.../ Dart 中文文档 : https://dart.cn/ Dart 开发者官网 : https://api.dart.dev/ Flutter 中文网 : https://flutterchina.club

1.7K20

Flutter】Image 组件 ( cached_network_image 网络图片缓存插件 )

, 可以缓存下来 , 如果再次获取该图片就直接从缓存获取该图片 , 类似 Glide 的三级缓存机制 ; 缓存图片可以使用 cached_network_image 插件实现 ; 安装 cached_network_image...插件 : 搜索插件 : https://pub.dev/packages 搜索 cached_network_image 插件 ; 插件地址 : https://pub.dev/packages.../cached_network_image 配置插件 : pubspec.yaml 配置插件 ; dependencies: cached_network_image: ^2.5.1 获取插件...cached_network_image 加载网络图片 ---- cached_network_image 网络图片缓存插件 , 提供了一个可供加载网络图片的组件 CachedNetworkImage , 该组件可以设置加载图片过程显示的...://dart.cn/ Dart 开发者官网 : https://api.dart.dev/ Flutter 中文网 ( 非官方 , 翻译的很好 ) : https://flutterchina.club

1.3K40

初学者的 Flutter bloc

当我们使用 Flutter Bloc,我们要在应用创建事件触发交互,然后 Bloc 会发射 emit 请求数据,存在在 state 真实的场景,它会像这样: 用户点击按钮来获取游戏列表 事件触发...,然后它会告知 Bloc 用户想获取游戏列表 Bloc 将会请求数据(比如从一个存储库,该存储库负责连接到 API获取数据) 当 Bloc 有数据,它将决定数据是否成功,然后 emit 发射一个状态...我们了解这些后,下面可以应用到案例 真实项目中使用 Flutter Bloc 在这个项目中,我们将从 games API 消费数据获取关于游戏的信息并在页面展示出来。...mapGetCategoriesEventToState:这个方法调用一个存储库 API 获取数据。当存储库返回数据或者抛出错误,bloc 会发射对应状态。...AllGamesWidget AllGamesEvent 我们创建一个 API 获取所有游戏的事件。

9710

Flutter】Image 组件 ( 配置本地 gif 图片资源 | 本地资源加载 placeholder )

根目录下的 images 目录下 ; pubspec.yaml 目录配置 images/waiting.gif 图片资源 ; flutter: assets: - images/waiting.gif...images/sidalin2.png - images/waiting.gif 二、本地资源加载 Placeholder ---- Placeholder 是一个占位控件 , 图片还没有就绪..., 如从网络获取图片 , 先使用 Placeholder 占据图片组件的位置 ; FadeInImage.assetNetwork 创建一个渐变图像组件 , 图片网络获取 , Placeholder...图片资源获取 ; 代码示例 : Stack( children: [ Center( // 网络加载显示本地的资源图片 child: FadeInImage.assetNetwork...: https://api.dart.dev/ Flutter 中文网 ( 非官方 , 翻译的很好 ) : https://flutterchina.club/ , http://flutter.axuer.com

1.3K40

Flutter 探索 StreamBuilderimage

偶尔,周期结束之前可能会发出一些值。 Dart ,您可以创建一个返回 Stream 的容量,该容量可以异步进程处于活动状态发射一些值。...A stream 构建器,它可以将流的多个组件更改为小部件 Stream 像一条线。当您从一端输入值而另一端输入侦听器,侦听器将获得该值。...然后,在这一点上,您可以 AsyncSnapshot 的数据属性获取信息。 由于上面属性的值,您可以计算出应该在屏幕上呈现什么。...在下面的代码,当 connectionState 值正在等待,将显示一个 CircularProgressIndicator。...如果传递的值不为空,那么当 connectionState 等待,hasData 属性在任何事件首先都将为 true StreamBuilder( initialData: 0, //

2.5K00

「程序员」Flutter网络获取数据遇到的坑

背景 ---- 今天继续学习Flutter,学习至通过Http获取网络数据一节,跟着Flutter官方文档写demo,遇到以下问题。...后来我“pubspec.yaml”文件里发现fluwx正好在我添加的http依赖库上边,我怀疑是我添加的依赖库影响了,把http: 0.12.0删掉,再次运行。——结果还是报同样的错误。...根据Flutter doctor的指示,多次安装必要插件,最后运行成功了。 运行成功之后页面内容如下↓↓↓: ? 页面上展示的内容就是获取到网络上的内容(获取成功)。...(); }, ), ), ), ); } } 代码里看: if (snapshot.hasData...ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto" } 可见title字段内容就是屏幕上显示的内容,即——网络获取数据成功

2.1K10

【 源码之间 - Flutter 】 FutureBuilder源码分析

一、前言: 1.先简单说下源码之间吧 1 】: 源码之间是张风捷特烈bilibili的直播间,版权所有。 2 】: 源码之间直播和产出的所有视频资源都将是免费的,允许录制、加工和随意传播。...---- 2.示例demo效果 主要就是请求网络api,返回数据,展业界面。根据不同的状态显示不同的界面。 ? ? ?...---- 一、示例demo详述: 1.关于异步请求 FutureBuilder需要一个异步任务作为构造入参 通过wanandroid的开发api进行文章列表的获取, Api.fetch(int page...,也就是源码的这里 可以看出回调中会将异步返回的数据放在_snapshot这个瓶子里,并setState 这样_snapshot更新后,会重新执行build方法,又会回调外界的_builderList...父组件刷新的_FutureBuilderState的行为 点击加号,更新异步方法,获取下一页数据,然后父组件执行setState void _doAdd() { setState(() {

1.9K10

Flutter实现下拉刷新与上拉加载更多

其基本的实现方法是该组件添加onRefresh事件,当用户下拉刷新时会触发该事件,该事件可以用调用一个延时任务Future.delayed( ),延时任务的回调重新请求数据即可。 2....上拉加载更多 Flutter主要通过使用 ListView.builder( ) 添加控制器来实现上拉加载更多。...其基本的实现方法是该组件里添加控制器,组件初始化时实例化ScrollController类型控制器,然后初始化的initState( ),给控制器添加addListener( )监听事件,事件的回调函数可以获得滚动的下拉距离及整个页面的高度...,然后判断这两个值的相差距离值,其值快接近触发数据请求。...,index){ Widget tip = Text(""); // 当渲染到最后一条数据

3K10

基于 Flutter + 百度人工智能 开发出的一款测颜值的 App

Flutter 颜值大师 基于 Flutter + 百度人工智能 开发出的一款测颜值的 App。...使用第三方插件实现选择照片的功能 一些特殊的功能,可以插件商店搜索对应的插件,从而轻松实现,插件商店的地址为 https://pub.dev/flutter pubspec.yaml 的 dependencies.../image_picker.dart'; _MyHomePageState 这个状态管理类,定义 _image 私有数据,用来存储用户选择的照片: class _MyHomePageState...按钮 填写对应的应用信息后,点击 立即创建 按钮,最终获取到对应的 API Key 和 Secret Key 6....实现 loading 效果 _MyHomePageState 状态管理类,定义 isloading 数据如下: class _MyHomePageState extends State<MyHomePage

2.6K20

基于 Flutter + 百度人工智能 开发出的一款测颜值的 App

Flutter 颜值大师 基于 Flutter + 百度人工智能 开发出的一款测颜值的 App。...使用第三方插件实现选择照片的功能 一些特殊的功能,可以插件商店搜索对应的插件,从而轻松实现,插件商店的地址为 https://pub.dev/flutter pubspec.yaml 的 dependencies.../image_picker.dart'; _MyHomePageState 这个状态管理类,定义 _image 私有数据,用来存储用户选择的照片: class _MyHomePageState extends...按钮 填写对应的应用信息后,点击 立即创建 按钮,最终获取到对应的 API Key 和 Secret Key 6....实现 loading 效果 _MyHomePageState 状态管理类,定义 isloading 数据如下: class _MyHomePageState extends State<MyHomePage

2.4K30
领券