Flutter實現網路請求

2021-09-24 07:14:50 字數 3600 閱讀 5460

flutter json資料解析是使用了json_serializable package包。它是乙個自動化源**生成器,可以為我們生成json序列化模板。由於序列化**不再由我們手寫和維護,我們將執行時產生json序列化異常的風險降至最低。

flutter網路請求資料並且展示效果圖:

資料介面 資料是使用的聚合資料的api,影訊api合集,大家可以註冊個賬號,申請使用一下,像這樣

新增依賴

在pubspec.yaml檔案中新增所需要的第三方依賴庫

environment:

sdk: ">=2.1.0 <3.0.0"

dependencies:

flutter:

sdk: flutter

json_annotation: ^2.0.0

connectivity: ^0.4.2

dio: ^2.0.15

event_bus: ^1.0.3

# use with the cupertinoicons class for ios style icons.

cupertino_icons: ^0.1.2

dev_dependencies:

flutter_test:

sdk: flutter

複製**

網路請求過程分析

static netfetch(url,params,mapheader,options option,) async 

//請求頭存放集合

mapheaders = new hashmap();

if(header != null)

//option存放請求的一些配置資訊

if(option != null) else

//超時時間15000ms

option.connecttimeout = 15000;

//建立dio物件

dio dio = new dio();

response response;

tryon dioerror catch(e)

try}catch(e)

return new resultdata(code.errorhandlefunction(response.statuscode, "", notip), false, response.statuscode);

}複製**

這個是最底層類封裝了乙個靜態的請求方法,直接呼叫dio的request方法進行網路請求,很簡單。

//如果這個是耗時方法,就會用async標記,耗時操作用await標記,表示是乙個非同步操作。

static gettodayfilmlistdao() async

//網路請求成功,進行資料解析

var response = todayfilmresponse.fromjson(data);

//返回資料

return await new dataresult(response.result,true);

}else

}複製**

獲取url方法很簡單,就是字串拼接了一下

static gettodayfilmlist() movie/movies.today?cityid=1&dtype=&key=713a408e855352d913806ef1e3ce3c33";

}複製**

下面分析一下json資料解析過程。 如上所說,json解析使用的是json_serializable package包。它是乙個自動化源**生成器,可以為我們生成json序列化模板。 網路請求獲取到的json資料是這樣的

,

複製**

todayfilmbean類

將在我們執行生成命令之後自動生成

part 'todayfilmbean.g.dart';

//這個標註是告訴生成器,這個類是要生成的model類

@jsonserializable()

class todayfilmbean

複製**

生成的todayfilmbean.g.dart類是這樣的

part of 'todayfilmbean.dart';

//json轉換為bean物件

todayfilmbean _$todayfilmbeanfromjson(mapjson)

//bean物件轉換為json

map_$todayfilmbeantojson(todayfilmbean instance) =>

;複製**

有兩種執行**生成器的方法: 1.一次性生成 通過在我們的專案根目錄下執行flutter packages pub run build_runner build,我們可以在需要時為我們的model生成json序列化**。這觸發了一次性構建,它通過我們的原始檔,挑選相關的並為它們生成必要的序列化**。

雖然這非常方便,但如果我們不需要每次在model類中進行更改時都要手動執行構建命令的話會更好。

2.持續生成 使用_watcher_可以使我們的源**生成的過程更加方便。它會監視我們專案中檔案的變化,並且在需要時自動構建必要的檔案。我們可以通過flutter packages pub run build_runner watch 在專案根目錄下執行來啟動_watcher_。

只需啟動一次觀察器,然後並讓它在後台執行,這是安全的。

執行序列化只需執行

//把json資料轉化為了bean物件

var filmbean = todayfilmbean.fromjson(json);

複製**

使用gridview最終展示結果

dataresult dataresult;

lis***ata = ;

//當statefulwiget被嵌入此view樹中,就會為此widget建立state物件

//當state物件被建立了,framework就會呼叫initstate()方法

@override

void initstate()

void gettodayfilm() async );

}複製**

上面是初始化網路請求,在請求到資料後,呼叫setstate重新整理ui

//state的build方法,呼叫setstate方法後,此方法就會被觸發

//用來重新整理ui

@override

widget build(buildcontext context) ),);}

_getwidget(int index)

_getchild(int i)

複製**

乙個自定義的carditem

class carditem extends statelesswidget);

@override

widget build(buildcontext context)

}複製**

好了,flutter網路請求並且展示資料就這樣實現的。

flutter 進行網路請求

本片部落格進行基本網路的請求,原始碼 import package flutter material.dart import package flutter shop index page test index page.dart 能套乙個方便的元件的話,就套乙個,方便以後修改 override w...

flutter 實現put請求

static future put string url,async method put dio dio createinstance data.foreach key,value data.foreach key,value para para.substring 0,para.length 1...

Flutter 七 之網路請求

在flutter中常見的網路請求方式有三種 httpclient http庫 dio庫 httpclient是dart自帶的請求類,在io包中,實現了基本的網路請求相關的操作。網路呼叫通常遵循如下步驟 建立 client.構造 uri.發起請求,等待請求,同時您也可以配置請求headers body...