Flutter配置网络

见图&＃xff1a;

1&＃xff0c;添加的依赖关系&＃xff0c;在pubspec.yaml文件里

2&＃xff0c;打开文件pubspec.yaml

在环境下的第一个依赖里里里写http&＃xff1a;0.12.0&＃xff0c;然后点击右上角的包得到&＃xff0c;这样就会去下载http包

大约2秒就好了&＃xff0c;这样的话我们的网络HTTP包就导入进来了&＃xff0c;这样就可以访问网络了。

新建一个networkbackground.dart文件

导入以下代码

import &＃39;dart:convert&＃39;;import &＃39;package:flutter/material.dart&＃39;;
import &＃39;package:http/http.dart&＃39; as http;
import &＃39;dart:async&＃39;;
import &＃39;dart:isolate&＃39;;void main() {runApp(SampleApp());
}class SampleApp extends StatelessWidget {&＃64;overrideWidget build(BuildContext context) {return MaterialApp(title: &＃39;Sample App&＃39;,theme: ThemeData(primarySwatch: Colors.blue,),home: SampleAppPage(),);}
}class SampleAppPage extends StatefulWidget {SampleAppPage({Key key}) : super(key: key);&＃64;override_SampleAppPageState createState() &＃61;> _SampleAppPageState();
}class _SampleAppPageState extends State {List widgets &＃61; [];&＃64;overridevoid initState() {super.initState();loadData();}showLoadingDialog() {if (widgets.length &＃61;&＃61; 0) {return true;}return false;}getBody() {if (showLoadingDialog()) {return getProgressDialog();} else {return getListView();}}getProgressDialog() {return Center(child: CircularProgressIndicator());}&＃64;overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("Sample App"),),body: getBody());}ListView getListView() &＃61;> ListView.builder(itemCount: widgets.length,itemBuilder: (BuildContext context, int position) {return getRow(position);});Widget getRow(int i) {return Padding(padding: EdgeInsets.all(10.0), child: Text("Row ${widgets[i]["title"]}"));}loadData() async {ReceivePort receivePort &＃61; ReceivePort();await Isolate.spawn(dataLoader, receivePort.sendPort);// The &＃39;echo&＃39; isolate sends its SendPort as the first messageSendPort sendPort &＃61; await receivePort.first;List msg &＃61; await sendReceive(sendPort, "https://jsonplaceholder.typicode.com/posts");setState(() {widgets &＃61; msg;});}// the entry point for the isolatestatic dataLoader(SendPort sendPort) async {// Open the ReceivePort for incoming messages.ReceivePort port &＃61; ReceivePort();// Notify any other isolates what port this isolate listens to.sendPort.send(port.sendPort);await for (var msg in port) {String data &＃61; msg[0];SendPort replyTo &＃61; msg[1];String dataURL &＃61; data;http.Response response &＃61; await http.get(dataURL);// Lots of JSON to parsereplyTo.send(json.decode(response.body));}}Future sendReceive(SendPort port, msg) {ReceivePort response &＃61; ReceivePort();port.send([msg, response.sendPort]);return response.first;}
}


3&＃xff0c;点击运行&＃xff0c;网络获取的数据就完成了

如果您没有导入http库的话&＃xff0c;那么将&＃39;package&＃xff1a;http / http.dart&＃39;作为http;会报错&＃xff0c;找不到网络库。

如果你的http包引入的位置有错误的话&＃xff0c;也会报这个错&＃xff1a;这里不允许映射值。你早些时候错过了结肠吗&＃xff1f;

集成HTTP库

https://pub.dartlang.org/packages/http
添加依赖
dependencies:http: ^0.12.0
安装
flutter packages get
导入
import &＃39;package:http/http.dart&＃39; as http;


常用方法

get(dynamic url, { Map headers }) → Future


• &＃xff08;必须&＃xff09;网址&＃xff1a;请求地址
• &＃xff08;可选&＃xff09;标头&＃xff1a;请求头

post(dynamic url, { Map headers, dynamic body, Encoding encoding }) → Future


• &＃xff08;必须&＃xff09;网址&＃xff1a;请求地址
• &＃xff08;可选&＃xff09;标头&＃xff1a;请求头
• &＃xff08;可选&＃xff09;体&＃xff1a;参数
• &＃xff08;编码&＃xff09;编码&＃xff1a;编码例子

http.post(&＃39;https://flutter-cn.firebaseio.com/products.json&＃39;,body: json.encode(param),encoding: Utf8Codec()).then((http.Response response) {final Map responseData &＃61; json.decode(response.body);//处理响应数据}).catchError((error) {print(&＃39;$error错误&＃39;);});


返回值都用到Dart Futures&＃xff0c;类似Javascript中的promise官方推荐使用async/await来调用网络请求

void addProduct(Product product) async {Map param &＃61; {&＃39;title&＃39;: product.title,&＃39;description&＃39;: product.description,&＃39;price&＃39;: product.price};try {final http.Response response &＃61; await http.post(&＃39;https://flutter-cn.firebaseio.com/products.json&＃39;,body: json.encode(param),encoding: Utf8Codec());final Map responseData &＃61; json.decode(response.body);print(&＃39;$responseData 数据&＃39;);} catch (error) {print(&＃39;$error错误&＃39;);}}


用  try catch来捕获错误两种写法都可以&＃xff0c;个人觉得第二种语法思路更明确。

附上一些常用库

name: stocksenvironment:# The pub client defaults to an <2.0.0 sdk constraint which we need to explicitly overwrite.sdk: ">&＃61;2.0.0-dev.68.0 <3.0.0"dependencies:flutter:sdk: flutterflutter_localizations:sdk: flutterintl: 0.15.7intl_translation: 0.17.2http: 0.12.0isolate: 2.0.2analyzer: 0.33.6&＃43;1 # THIS LINE IS AUTOGENERATED - TO UPDATE USE "flutter update-packages --force-upgrade"args: 1.5.1 # THIS LINE IS AUTOGENERATED - TO UPDATE USE "flutter update-packages --force-upgrade"async: 2.0.8 # THIS LINE IS AUTOGENERATED - TO UPDATE USE "flutter update-packages --force-upgrade"charcode: 1.1.2 # THIS LINE IS AUTOGENERATED - TO UPDATE USE "flutter update-packages --force-upgrade"collection: 1.14.11 # THIS LINE IS AUTOGENERATED - TO UPDATE USE "flutter update-packages --force-upgrade"convert: 2.1.1 # THIS LINE IS AUTOGENERATED - TO UPDATE USE "flutter update-packages --force-upgrade"crypto: 2.0.6 # THIS LINE IS AUTOGENERATED - TO UPDATE USE "flutter update-packages --force-upgrade"csslib: 0.14.6 # THIS LINE IS AUTOGENERATED - TO UPDATE USE "flutter update-packages --force-upgrade"dart_style: 1.2.0 # THIS LINE IS AUTOGENERATED - TO UPDATE USE "flutter update-packages --force-upgrade"front_end: 0.1.6&＃43;9 # THIS LINE IS AUTOGENERATED - TO UPDATE USE "flutter update-packages --force-upgrade"glob: 1.1.7 # THIS LINE IS AUTOGENERATED - TO UPDATE USE "flutter update-packages --force-upgrade"html: 0.13.3&＃43;3 # THIS LINE IS AUTOGENERATED - TO UPDATE USE "flutter update-packages --force-upgrade"http_parser: 3.1.3 # THIS LINE IS AUTOGENERATED - TO UPDATE USE "flutter update-packages --force-upgrade"kernel: 0.3.6&＃43;9 # THIS LINE IS AUTOGENERATED - TO UPDATE USE "flutter update-packages --force-upgrade"logging: 0.11.3&＃43;2 # THIS LINE IS AUTOGENERATED - TO UPDATE USE "flutter update-packages --force-upgrade"meta: 1.1.6 # THIS LINE IS AUTOGENERATED - TO UPDATE USE "flutter update-packages --force-upgrade"package_config: 1.0.5 # THIS LINE IS AUTOGENERATED - TO UPDATE USE "flutter update-packages --force-upgrade"path: 1.6.2 # THIS LINE IS AUTOGENERATED - TO UPDATE USE "flutter update-packages --force-upgrade"petitparser: 2.0.2 # THIS LINE IS AUTOGENERATED - TO UPDATE USE "flutter update-packages --force-upgrade"plugin: 0.2.0&＃43;3 # THIS LINE IS AUTOGENERATED - TO UPDATE USE "flutter update-packages --force-upgrade"pub_semver: 1.4.2 # THIS LINE IS AUTOGENERATED - TO UPDATE USE "flutter update-packages --force-upgrade"source_span: 1.4.1 # THIS LINE IS AUTOGENERATED - TO UPDATE USE "flutter update-packages --force-upgrade"string_scanner: 1.0.4 # THIS LINE IS AUTOGENERATED - TO UPDATE USE "flutter update-packages --force-upgrade"typed_data: 1.1.6 # THIS LINE IS AUTOGENERATED - TO UPDATE USE "flutter update-packages --force-upgrade"utf: 0.9.0&＃43;5 # THIS LINE IS AUTOGENERATED - TO UPDATE USE "flutter update-packages --force-upgrade"vector_math: 2.0.8 # THIS LINE IS AUTOGENERATED - TO UPDATE USE "flutter update-packages --force-upgrade"watcher: 0.9.7&＃43;10 # THIS LINE IS AUTOGENERATED - TO UPDATE USE "flutter update-packages --force-upgrade"yaml: 2.1.15 # THIS LINE IS AUTOGENERATED - TO UPDATE USE "flutter update-packages --force-upgrade"dev_dependencies:flutter_test:sdk: flutterflutter_driver:sdk: flutterboolean_selector: 1.0.4 # THIS LINE IS AUTOGENERATED - TO UPDATE USE "flutter update-packages --force-upgrade"file: 5.0.7 # THIS LINE IS AUTOGENERATED - TO UPDATE USE "flutter update-packages --force-upgrade"json_rpc_2: 2.0.9 # THIS LINE IS AUTOGENERATED - TO UPDATE USE "flutter update-packages --force-upgrade"matcher: 0.12.3&＃43;1 # THIS LINE IS AUTOGENERATED - TO UPDATE USE "flutter update-packages --force-upgrade"quiver: 2.0.1 # THIS LINE IS AUTOGENERATED - TO UPDATE USE "flutter update-packages --force-upgrade"stack_trace: 1.9.3 # THIS LINE IS AUTOGENERATED - TO UPDATE USE "flutter update-packages --force-upgrade"stream_channel: 1.6.8 # THIS LINE IS AUTOGENERATED - TO UPDATE USE "flutter update-packages --force-upgrade"term_glyph: 1.0.1 # THIS LINE IS AUTOGENERATED - TO UPDATE USE "flutter update-packages --force-upgrade"test_api: 0.2.1 # THIS LINE IS AUTOGENERATED - TO UPDATE USE "flutter update-packages --force-upgrade"vm_service_client: 0.2.6 # THIS LINE IS AUTOGENERATED - TO UPDATE USE "flutter update-packages --force-upgrade"web_socket_channel: 1.0.9 # THIS LINE IS AUTOGENERATED - TO UPDATE USE "flutter update-packages --force-upgrade"flutter:uses-material-design: true# PUBSPEC CHECKSUM: 1b58


参考链接&＃xff1a;dart中的http包讲解&＃xff0c;flartter官方网站&＃xff0c;Dart语言官方网站