首先通过API获取网络数据这个过程是耗时的,所以我们需要进行异步操作,使用Dart语言完成异步可以参考如下的文章
https://www.jianshu.com/p/f2f7634b602c
1.网络请求
直接进入正题,首先我进行网络请求是通过一个工具类,大家可以直接使用
import 'package:http/http.dart' as http;
import 'dart:convert';
class NetUtils {
static void get(String url, Function callback, {Map<String, String> params, Function errorCallback}) async {
if (params != null && params.isNotEmpty) {
StringBuffer sb = new StringBuffer("?");
params.forEach((key, value) {
sb.write("$key" + "=" + "$value" + "&");
});
String paramStr = sb.toString();
paramStr = paramStr.substring(0, paramStr.length - 1);
url += paramStr;
}
// print("$url");
try {
http.Response res = await http.get(url);
if (callback != null) {
callback(res.body);
}
} catch (exception) {
if (errorCallback != null) {
errorCallback(exception);
}
}
}
static void post(String url, Function callback, {Map<String, String> params, Function errorCallback}) async {
try {
http.Response res = await http.post(url, body: params);
if (callback != null) {
callback(res.body);
}
} catch (e) {
if (errorCallback != null) {
errorCallback(e);
}
}
}
}
我现在使用一下,这个data就是返回的Gson字段
NetUtils.get(url, (data) {
}, errorCallback: (e) {
print("network error: $e");
});
2.解析Gson字段
虽然获取了Gson字段,但是我们还不能获取我们想要的数据,这样和java一样,需要解析Gson字段,这个flutter有相关的API实现了,我们需要导一下包,虽然这个包在NetUtil导入过,但是flutter不能间接导包
import 'dart:convert';
然后使用
NetUtils.get(url, (data) {
if (data != null) {
var obj = json.decode(data);
if (obj['error'] == false) {
//print(obj);
setState(() {
MyApp.text = obj['results'][0]['desc'];
if (MyApp.text==null){
MyApp.text=' ';
}
});
}
}
}, errorCallback: (e) {
print("network error: $e");
});
3.完整的例子
就是通过干货集中营的API获取网络数据,将其中一个分享的标题显示出来。
这里要注意的是非交互型控件StatelessWidget是不能刷新的,而网络数据获取后需要刷新控件显示,所以我们需要自己自定义一个交互型控件,这个可以参考如下文章
https://blog.csdn.net/z979451341/article/details/80817609
好了,大家看代码
import 'dart:async';
import 'package:flutter/material.dart';
import 'dart:convert';
import 'NetUtils.dart';
import 'AndroidBean.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
static String text='Hello World';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
body: Center(
child: ParentWidget(),
),
),
);
}
}
class ParentWidget extends StatefulWidget {
@override
_ParentWidgetState createState() => new _ParentWidgetState();
}
class _ParentWidgetState extends State<ParentWidget> {
bool _active = false;
@override
Widget build(BuildContext context) {
getNetData();
return new Container(
child: new Text(MyApp.text)
);
}
getNetData() async {
var url = 'http://gank.io/api/data/Android/10/1';
NetUtils.get(url, (data) {
if (data != null) {
var obj = json.decode(data);
if (obj['error'] == false) {
//print(obj);
setState(() {
MyApp.text = obj['results'][0]['desc'];
if (MyApp.text==null){
MyApp.text=' ';
}
});
}
}
}, errorCallback: (e) {
print("network error: $e");
});
}
}
AndroidBean.dart
class AndroidBean{
String desc;
List<String> images;
String url;
String who;
static List androidData;
}
4.最后
我要做一个比较完整的app,敬请期待