文档 文档版本有些老
使用 dio 来获取数据

demo

import 'dart:io';
import 'dart:convert';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Ajnauw',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var users = [];

  List<Widget> _generatorItem() {
    return users.map((u) {
      String name = u['name'];
      return ListTile(
        leading: CircleAvatar(
          backgroundColor: Colors.grey.shade800,
          child: Text('$name'[0]),
        ),
        title: Text(name),
      );
    }).toList();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('demo'),
      ),
      body: ListView(
        children: <Widget>[
          Container(
            child: Column(
              children: <Widget>[
                RaisedButton(
                  color: Theme.of(context).primaryColor,
                  onPressed: () async {
                    try {
                      // 使用端口而不是 localhost  https://github.com/hillelcoren/flutter-redux-starter/issues/16
                      var url = Uri.parse('http://192.168.150.115:5000/test');
                      var httpClient = new HttpClient();

                      var request = await httpClient.getUrl(url);
                      var response = await request.close();

                      var data =
                          await response.transform(utf8.decoder).toList();
                      String body = data.join('');
                      // print(body);
                      setState(() {
                        users = jsonDecode(body);
                      });
                      httpClient.close();
                    } catch (e) {
                      print(e);
                    }
                  },
                  child: Text('Get List'),
                ),
              ],
            ),
          ),
          Offstage(
            offstage: users.isEmpty,
            child: Container(
              child: Column(
                children: _generatorItem(),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

接口代码

  @Get('test')
  getHello(): Array<User> {
    return [new User('ajanuw'), new User('suou')];
  }

Flutter 获取服务器数据的更多相关文章

  1. XMLHTTPRequestObject获取服务器数据

    http://www.educity.cn/develop/526316.html 在Web客户端使用xmlhttp对象,可以十分方便的和服务器交换数据,我们可以获取和发送任何类型的数据,甚至二进制数 ...

  2. nodejs获取服务器数据到页面

    const Koa = require('koa'); const Router = require('koa-router'); const app = new Koa(); const route ...

  3. jsonp获取服务器数据的方式

    jsonp获取服务器的数据,有两种 一,跨域 二,不跨域 如果跨域 js的写法有两种 1, <script type="text/javascript"> $(func ...

  4. 十一、React 获取服务器数据: axios插件、 fetch-jsonp插件的使用

    react获取服务器APi接口的数据: react中没有提供专门的请求数据的模块.但是我们可以使用任何第三方请求数据模块实现请求数据 一.axios 获取Api数据 使用文档:https://www. ...

  5. Flutter获取远程数据 刷新UI界面

    import 'package:flutter/material.dart'; import 'package:http/http.dart' as http; void main() => r ...

  6. Android-----使用SoapObject获取服务器数据

    新建两个工具类ConnectWeb.java 和 ConnectMethod.java 进行对服务器进行数据交互 ConnectWeb.java代码如下: public class ConnectWe ...

  7. 【CMDB】获取服务器数据

    一.通过agent的方式 原理:服务器定制执行py文件通过subprocess模块采集数据发送给数据收集的机器 数据收集的机器:192.168.11.62 服务器:192.168.11.169 数据收 ...

  8. Flutter 获取网络数据及渲染列表

    还是通过Dio包调用远程接口获取数据,这里返回值为一个Future,这个对象支持一个等待回掉方法then. 示例代码如下: import 'package:flutter/material.dart' ...

  9. IOS开发之Post 方式获取服务器数据

    //1.创建post方式的 参数字符串url +(NSString *)createPostURL:(NSMutableDictionary *)params { NSString *postStri ...

随机推荐

  1. day10 函数的定义及函数语法详解

    """ 今日内容: (1)函数的定义及特点 (2)函数的语法及函数的四部分 (3)函数的分类 (4)函数的调用 (5)函数的return详解 一.函数的定义 1.什么是函 ...

  2. 封装selenium自动化框架中的截图功能

    对selenium自带的截图功能进行封装: 以下为封装的代码,自定义一个.py文件即可,图片路径自己设置一个. #coding:utf-8 class Screen(object): ''' 封装的截 ...

  3. webpack2 实践

    实例gif图: 目录截图: 目录介绍: dist目录(最后生成的目录,里面文件为配置webpack自动生成的): c/:css文件夹; i/:img文件夹; j/:js文件夹; src目录下(开发目录 ...

  4. 【转】iPython入门技巧

    [转]http://www.cnblogs.com/cuiyubo/p/6823478.html 学习<利用python进行数据分析> 第三章 IPython:一种交互式计算和开发环境的笔 ...

  5. echarts-饼状图默认选中高亮

    1.首页需要设置legend legend: { data: ["积极", "负面"], selectedMode: false, show: false } ...

  6. js数据结构与算法——集合

    <script> function Set(){ var items = {};//使用对象表示集合,因为js对象不允许一个键指向两个不同的值,保证集合里面的匀速唯一性 this.add ...

  7. Linux Centos7.5中的RocketMQ集群部署

    系统环境 Docker > centos7.5 此镜像已经安装了jdk1.8和maven3.6.0 如果你想知道这个基础镜像的具体情况, 参考此文: https://www.cnblogs.co ...

  8. php Excel 导入功能

    下载excel类地址 https://pan.baidu.com/s/19MqAHUn4RyZ5HEAChyC0jg  密码:mn58 本人用的thinkcmf框架 把类文件放在框架的类文件里面,下面 ...

  9. Linux时间同步问题

    一.调整时区 sudo tzselect 选择时区 Asia-> China-> Beijing Time->Yes 二.同步时间 ntpdate cn.pool.ntp.org 三 ...

  10. 开发自己的react-native组件并发布到npm[转]

    原文链接:https://www.jianshu.com/p/091a68ea1ca7 写在前面 在做react-native开发的时候,我们经常会找到一些第三方组件,并且通过npm install的 ...