网页地址:网页演示
(网页比较慢)
参考文章:
// 参考:
// http
// https://fantasy.blog.csdn.net/article/details/88386470
// dio
// https://www.jianshu.com/p/6398f9971a36
// https://zhuanlan.zhihu.com/p/146170269
聚合数据申请免费新闻头条api
https://www.juhe.cn/docs/api/id/235
一. 创建项目
flutter create example011_net
二. AS打开
三. 添加依赖、放入资源文件
pubspec.yaml
http: ^0.12.0
dio: ^3.0.10
四. 编写代码
main.dart
import 'package:flutter/material.dart';
import 'dart:io';
import 'dart:convert';
import 'package:http/http.dart' as http;
// import 'package:http_parser/http_parser.dart';
import 'package:dio/dio.dart';
// 参考:
// http
// https://fantasy.blog.csdn.net/article/details/88386470
// dio
// https://www.jianshu.com/p/6398f9971a36
// https://zhuanlan.zhihu.com/p/146170269
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({
Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
// 填写聚合申请的api
String _apiKey = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
String _result = "";
void _get1() async {
var httpClient = new HttpClient();
print("get请求");
var url = 'https://jsonplaceholder.typicode.com/posts/1';
String result;
try {
var request = await httpClient.getUrl(Uri.parse(url));
var response = await request.close();
print("响应码----${response.statusCode}");
if (response.statusCode == HttpStatus.ok) {
var responseBody = await response.transform(utf8.decoder).join();
var json = responseBody;
var data = jsonDecode(json);
print(data.toString());
print("数据内容:----$data");
result = 'HttpStatus.ok';
_result = data.toString();
setState(() {
});
} else {
result = '出错,状态码:${response.statusCode}';
}
} catch (exception) {
result = '获取ip地址错误';
}
print("结果:$result");
}
_post1() async {
print("_post---");
var httpClient = new HttpClient();
String result;
try {
var url = "http://v.juhe.cn/toutiao/index";
var request = await httpClient.postUrl(Uri.parse(url));
Map<String, String> map1 = new Map();
request.headers.contentType =
ContentType("application", "x-www-form-urlencoded");
request.write("key=$_apiKey&type=top");
HttpClientResponse response = await request.close();
String responseBody = await response.transform(utf8.decoder).join();
print("statusCode----${response.statusCode}");
if (response.statusCode == HttpStatus.ok) {
print('请求成功');
print(response.headers); //打印头部信息
print("post------$responseBody");
result = 'HttpStatus.ok';
_result = responseBody;
setState(() {
});
} else {
result = '错误状态码: ${response.statusCode}';
}
} catch (exception) {
result = '异常' + exception.toString();
}
print("result----$result");
}
var _client = http.Client();
_get2() async {
//发送GET请求
var url = 'https://jsonplaceholder.typicode.com/posts/1';
_client.get(Uri.parse(url)).then((http.Response response) {
//处理响应信息
if (response.statusCode == 200)
{
print(response.body);
_result = response.body;
setState(() {
});
} else {
print('error');
}
});
}
_post2() async
{
var url = "http://v.juhe.cn/toutiao/index";
//设置header
Map<String, String> headersMap = new Map();
headersMap["content-type"] = "application/x-www-form-urlencoded";
//设置body参数
Map<String, String> bodyParams = new Map();
bodyParams["key"] = _apiKey;
bodyParams["type"] = "top";
_client
.post(Uri.parse(url), headers: headersMap, body: bodyParams, encoding: Utf8Codec())
.then((http.Response response) {
if (response.statusCode == 200) {
print(response.body);
_result = response.body;
setState(() {
});
} else {
print('error');
}
}).catchError((error) {
print('error');
});
}
Dio _dio = Dio();
_get3() async
{
_dio.get("https://jsonplaceholder.typicode.com/posts/1").then((value){
print(value);
_result = value.toString();
setState(() {
});
});
}
_post3() async
{
FormData formData = FormData.fromMap({
"key": _apiKey, "type": "top"});
_dio.post("http://v.juhe.cn/toutiao/index",data: formData).then((value) {
print(value);
setState(() {
});
_result = value.toString();
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(_result,maxLines: 5,),
ElevatedButton(
onPressed: () {
print("点了GET1");
_get1();
},
child: Text("HttpClient GET")),
ElevatedButton(
onPressed: () {
print("点了POST1");
_post1();
},
child: Text("HttpClient POST1")),
ElevatedButton(
onPressed: () {
print("点了GET2");
_get2();
},
child: Text("http GET2")),
ElevatedButton(
onPressed: () {
print("点了POST2");
_post2();
},
child: Text("http POST2")),
ElevatedButton(
onPressed: () {
print("点了GET3");
_get3();
},
child: Text("dio GET3")),
ElevatedButton(
onPressed: () {
print("点了POST3");
_post3();
},
child: Text("dio POST3")),
],
),
),
);
}
}
5. 修改网络权限及透明传输
Android
android/app/src/main/AndroidManifest.xml
<!-- 开启网络访问权限 -->
<uses-permission android:name="android.permission.INTERNET">
</uses-permission>
<application
android:label="example011_net"
android:usesCleartextTraffic="true"
iOS
ios/Runner/info.plist 添加
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
macOS
macos/Runner/DebugProfile.entitlements添加
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>com.apple.security.app-sandbox</key>
<true/>
<key>com.apple.security.cs.allow-jit</key>
<true/>
<key>com.apple.security.network.server</key>
<true/>
<key>com.apple.security.network.client</key>
<true/>
</dict>
</plist>
6. 调试运行
AS中先打开Android或者iOS模拟器，点运行按钮。
或在命令行中运行:
flutter run
7. 打包web
flutter build web
源码
https://gitee.com/ruik2080/example-flutter