Flutter 获取服务器数据
文档 文档版本有些老
使用 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 获取服务器数据的更多相关文章
- XMLHTTPRequestObject获取服务器数据
http://www.educity.cn/develop/526316.html 在Web客户端使用xmlhttp对象,可以十分方便的和服务器交换数据,我们可以获取和发送任何类型的数据,甚至二进制数 ...
- nodejs获取服务器数据到页面
const Koa = require('koa'); const Router = require('koa-router'); const app = new Koa(); const route ...
- jsonp获取服务器数据的方式
jsonp获取服务器的数据,有两种 一,跨域 二,不跨域 如果跨域 js的写法有两种 1, <script type="text/javascript"> $(func ...
- 十一、React 获取服务器数据: axios插件、 fetch-jsonp插件的使用
react获取服务器APi接口的数据: react中没有提供专门的请求数据的模块.但是我们可以使用任何第三方请求数据模块实现请求数据 一.axios 获取Api数据 使用文档:https://www. ...
- Flutter获取远程数据 刷新UI界面
import 'package:flutter/material.dart'; import 'package:http/http.dart' as http; void main() => r ...
- Android-----使用SoapObject获取服务器数据
新建两个工具类ConnectWeb.java 和 ConnectMethod.java 进行对服务器进行数据交互 ConnectWeb.java代码如下: public class ConnectWe ...
- 【CMDB】获取服务器数据
一.通过agent的方式 原理:服务器定制执行py文件通过subprocess模块采集数据发送给数据收集的机器 数据收集的机器:192.168.11.62 服务器:192.168.11.169 数据收 ...
- Flutter 获取网络数据及渲染列表
还是通过Dio包调用远程接口获取数据,这里返回值为一个Future,这个对象支持一个等待回掉方法then. 示例代码如下: import 'package:flutter/material.dart' ...
- IOS开发之Post 方式获取服务器数据
//1.创建post方式的 参数字符串url +(NSString *)createPostURL:(NSMutableDictionary *)params { NSString *postStri ...
随机推荐
- day10 函数的定义及函数语法详解
""" 今日内容: (1)函数的定义及特点 (2)函数的语法及函数的四部分 (3)函数的分类 (4)函数的调用 (5)函数的return详解 一.函数的定义 1.什么是函 ...
- 封装selenium自动化框架中的截图功能
对selenium自带的截图功能进行封装: 以下为封装的代码,自定义一个.py文件即可,图片路径自己设置一个. #coding:utf-8 class Screen(object): ''' 封装的截 ...
- webpack2 实践
实例gif图: 目录截图: 目录介绍: dist目录(最后生成的目录,里面文件为配置webpack自动生成的): c/:css文件夹; i/:img文件夹; j/:js文件夹; src目录下(开发目录 ...
- 【转】iPython入门技巧
[转]http://www.cnblogs.com/cuiyubo/p/6823478.html 学习<利用python进行数据分析> 第三章 IPython:一种交互式计算和开发环境的笔 ...
- echarts-饼状图默认选中高亮
1.首页需要设置legend legend: { data: ["积极", "负面"], selectedMode: false, show: false } ...
- js数据结构与算法——集合
<script> function Set(){ var items = {};//使用对象表示集合,因为js对象不允许一个键指向两个不同的值,保证集合里面的匀速唯一性 this.add ...
- Linux Centos7.5中的RocketMQ集群部署
系统环境 Docker > centos7.5 此镜像已经安装了jdk1.8和maven3.6.0 如果你想知道这个基础镜像的具体情况, 参考此文: https://www.cnblogs.co ...
- php Excel 导入功能
下载excel类地址 https://pan.baidu.com/s/19MqAHUn4RyZ5HEAChyC0jg 密码:mn58 本人用的thinkcmf框架 把类文件放在框架的类文件里面,下面 ...
- Linux时间同步问题
一.调整时区 sudo tzselect 选择时区 Asia-> China-> Beijing Time->Yes 二.同步时间 ntpdate cn.pool.ntp.org 三 ...
- 开发自己的react-native组件并发布到npm[转]
原文链接:https://www.jianshu.com/p/091a68ea1ca7 写在前面 在做react-native开发的时候,我们经常会找到一些第三方组件,并且通过npm install的 ...