问答

如何在flutter中正确使用http请求的数据?

作者:admin 2021-09-12 我要评论

问题描述 在widget中使用http请求的数据,应用显示会出红屏,widget不同提示不同,总之都是表示没有数据传入。只有在热重载两次后才能正确显示。 报错如下:Fail...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

问题描述

在widget中使用http请求的数据,应用显示会出红屏,widget不同提示不同,总之都是表示没有数据传入。只有在热重载两次后才能正确显示。
报错如下:Failed assertion:line x pos y:'data != null'
Simulator Screen Shot - iPhone 11 Pro Max - 2020-04-10 at 17.54.39.png
WechatIMG1.jpeg

问题出现的环境背景及自己尝试过哪些方法

原本我直接在statelesswidget里面返回Markdown(data:data.string,),发现问题后该用FutureBuilder来先处理http请求,等请求完成再渲染,但是这样写好像并不对,问题依旧,我甚至看不到定义的内容为loading的text widget。有考虑是不是应该用statefulwidget,但是也没有用。

相关代码

import 'package:flutter/material.dart';
import 'package:flutter_markdown/flutter_markdown.dart';
import 'package:http/http.dart' as http;

void main() => runApp(MyApp());

class DataTest {//处理http请求
  var url = 'http://xxx/tips/cardiac-arrest.md';
  var client = http.Client();
  String string;

  DataTest() {
    getClient();
  }
  Future getClient() async {
    client.get(url).then((http.Response response) {
      if (response.statusCode == 200) {
        string = response.body.toString();
      } else {
        print('erro');
      }
    });
  }
}
                                   
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter HTTP Test',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('客户端请求HTTP测试'),
        ),
        body: Center(
          child: MyStatefulWidget(),
        ),
      ),
    );
  }
}
class MyStatefulWidget extends StatefulWidget{
  @override
  MyState createState() => MyState();
}

class MyState extends State<MyStatefulWidget>{
  var data = new DataTest();

  @override
  Widget build(BuildContext context){
    return FutureBuilder(
      future: data.getClient(),
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        print('data:${snapshot.data}');
        print('connectionState:${snapshot.connectionState}');
        if (snapshot.connectionState == ConnectionState.waiting) {
          return Text('loading...');
        } else {
          return Markdown(data:data.string,);
        }
      },
    );
  }

}

你期待的结果是什么?实际看到的错误信息又是什么?

我的服务端会返回md格式的字符串,我想在页面上用markdown插件渲染出来,但是问题并不在markdown上,因为text widget也是一样的效果。

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 如何在flutter中正确使用http请求的数

    如何在flutter中正确使用http请求的数

  • js的json对象里面的一个key的值包含了

    js的json对象里面的一个key的值包含了

  • Flutter中State对象可以访问widget属性

    Flutter中State对象可以访问widget属性

  • react-native Image组件的loadingindic

    react-native Image组件的loadingindic

腾讯云代理商
海外云服务器