首先通過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
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
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
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 url;
String who;
static List androidData;
}
4.最後
我要做一個比較完整的app，敬請期待
閱讀更多 程序員小新人學習 的文章
