昨晚學習了flutter實現http網絡請求的get方法，後面學習到post等其它方法再補充。爲了效果，我在eolinker上面建立了一個get接口，不知道這個虛擬url你們能不能使用，先看效果圖：
一. get的請求
1. 引入http包：
2. 模型的創建
2.1 創建bean，就是用於接收服務器返回的模型：
2.2 當模型比較複雜時，代碼慢慢打就不太好了，可以直接用json轉成dart代碼模型：
json在線轉換成dart（適用於json轉成模型）：https://javiercbk.github.io/json_to_dart/
3. 進行網絡請求（其實跟java裏面的網絡請求差不多，不過還需要進一步封裝纔行），爲了看網絡請求效果，需要提前準備一個url,且裏面返回的數據要跟定義好的BaseBean對應上。
3.1官網的請求方式
var _ipAddress = 'Unknown';
//官網的請求方法
Future<BaseBean> _getHttpData() async {
var url =
'http://192.168.0.224:8080/eolinker_os/Mock/simple?projectID=2&uri=http://www.mcl.net:8888/api/Test';
var httpClient = new HttpClient();
String result;
try {
var request = await httpClient.getUrl(Uri.parse(url));
var response = await request.close();
if (response.statusCode == HttpStatus.ok) {
var json = await response.transform(utf8.decoder).join();
var data = jsonDecode(json); //此時的data就是服務器返回的一整條json
result = data['msg']; //獲取裏面的msg
} else {
result =
'Error getting IP address:\nHttp status ${response.statusCode}';
}
} catch (exception) {
result = 'Failed getting IP address';
}
if (!mounted) return null;
setState(() {
_ipAddress = result;
});
}
3.2 另一種方法
//另一種請求方法
Future<BaseBean> getData() async {
final response = await http.get(
'http://192.168.0.224:8080/eolinker_os/Mock/simple?projectID=2&uri=http://www.mcl.net:8888/api/Test');
final result = json.decode(response.body);
return BaseBean.from(result);
}
3.3 完整代碼
注：因爲截圖時忘記把“側滑菜單”給註釋掉了，所以代碼就附上了。
import 'dart:convert';
import 'dart:io';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/bean/BaseBean.dart';
import 'package:http/http.dart' as http;
//舞蹈
class DancePage extends StatefulWidget {
_DancePageDtate createState() => _DancePageDtate();
}
class _DancePageDtate extends State<DancePage> {
//顯示返回的數據
String showResult = '';
//另一種請求方法
Future<BaseBean> getData() async {
final response = await http.get(
'http://192.168.0.224:8080/eolinker_os/Mock/simple?projectID=2&uri=http://www.mcl.net:8888/api/Test');
final result = json.decode(response.body);
return BaseBean.from(result);
}
var _ipAddress = 'Unknown';
//官網的請求方法
Future<BaseBean> _getHttpData() async {
var url =
'http://192.168.0.224:8080/eolinker_os/Mock/simple?projectID=2&uri=http://www.mcl.net:8888/api/Test';
var httpClient = new HttpClient();
String result;
try {
var request = await httpClient.getUrl(Uri.parse(url));
var response = await request.close();
if (response.statusCode == HttpStatus.ok) {
var json = await response.transform(utf8.decoder).join();
var data = jsonDecode(json); //此時的data就是服務器返回的一整條json
result = data['msg']; //獲取裏面的msg
} else {
result =
'Error getting IP address:\nHttp status ${response.statusCode}';
}
} catch (exception) {
result = 'Failed getting IP address';
}
if (!mounted) return null;
setState(() {
_ipAddress = result;
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('舞蹈',
style: new TextStyle(color: Colors.white, fontSize: 26)),
),
body: Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 15),
height: 50,
child: new RaisedButton(
color: Colors.red,
child: new Text(
'另一種HTTPS的Get請求',
style: TextStyle(fontSize: 20, color: Colors.white),
),
onPressed: () {
//按下時發起請求
getData().then((BaseBean value) {
//重置狀態
setState(() {
showResult = '請求結果：\nstatus:${value.status} '
'\n msg:${value.msg} '
'\ndata:${value.data} } ';
});
});
}),
),
Container(
margin: EdgeInsets.only(top: 15),
height: 50,
child: new RaisedButton(
color: Colors.red,
child: new Text(
'官網HTTPS的Get請求',
style: TextStyle(fontSize: 20, color: Colors.white),
),
onPressed: _getHttpData,
),
),
Container(
margin: EdgeInsets.only(top: 15),
alignment: Alignment.center,
decoration: BoxDecoration(color: Colors.black),
child: Text(
showResult,
style: TextStyle(color: Colors.white, fontSize: 26),
),
),
Container(
margin: EdgeInsets.only(top: 15),
alignment: Alignment.center,
decoration: BoxDecoration(color: Colors.black),
child: Text(
_ipAddress,
style: TextStyle(color: Colors.white, fontSize: 26),
),
),
],
),
//這個是側邊欄菜單，忽略
drawer: Drawer(
elevation: 500,
child: ListView(
children: <Widget>[
DrawerHeader(
child: Text(
'側滑標題欄',
style: TextStyle(color: Colors.white, fontSize: 20),
),
decoration: BoxDecoration(color: Colors.black), //頭部裝飾
),
ListTile(
title: Text(
'哎呀媽媽呀',
style: TextStyle(color: Colors.black, fontSize: 18),
),
onTap: () {
Navigator.pop(context);
},
),
Divider(), //分割線
ListTile(
title: Text(
'沙哈黧黑',
style: TextStyle(color: Colors.black, fontSize: 18),
),
onTap: () {
Navigator.pop(context);
},
),
Divider(), //分割線
ListTile(
title: Text(
'啥我滴卡',
style: TextStyle(color: Colors.black, fontSize: 18),
),
onTap: () {
Navigator.pop(context);
},
),
Divider(), //分割線
],
),
),
);
}
}
後續會繼續補充其它請求以及優化的，先到這裏了！