Flutter開發(fā)智慧城市相關(guān)APP具體實踐

程子清

摘要

Flutter是Ooogle開發(fā)的一套全新的跨平臺、開源UI框架，支持iOS、Android系統(tǒng)開發(fā)，并且是未來新操作系統(tǒng)Fuchsia的默認開發(fā)套件。在調(diào)研了Flutter的各項特性和實現(xiàn)原理之后，我們決定使用Flutter開發(fā)吉首市綜治中心網(wǎng)格化服務(wù)管理系統(tǒng)協(xié)同平臺移動端——賽協(xié)通APP。本文主要介紹在開發(fā)過程中用到的技術(shù)和解決方案。

【關(guān)鍵詞】Flutter 智慧城市跨平臺

1 概述

智慧城市以“智能手機十移動互聯(lián)網(wǎng)為基礎(chǔ)”，實現(xiàn)了城市“以人為中心”的高度信息化。在智慧城市建設(shè)中需要開發(fā)很多APP應(yīng)用，這些APP大多數(shù)需要跨平臺，同時項目緊，開發(fā)周期短，這就要求我們選擇一種技術(shù)方案可以夸平臺。在調(diào)研了Flutter的各項特性和實現(xiàn)原理之后，我使用Flutter框架在很短的周期開發(fā)了一款賽協(xié)通APP。在使用Flutter過程中，我們主要涉及了界面設(shè)計布局、網(wǎng)絡(luò)請求數(shù)據(jù)、本地數(shù)據(jù)存儲和路由頁而跳轉(zhuǎn)這四個方面技術(shù)。

2 界面設(shè)計布局

Flutter控件本身通常由許多小型、單用途的控件組成，結(jié)合起來產(chǎn)生強大的效果，例如，Container是一種常用的控件，由負責布局、繪畫、定位和大小調(diào)整的幾個控件組成，具體來說，Container是由LimitedBox、ConstrainedBox、Align、Padding、DecoratedBox和Transform控件組成，而不是將Container子類化來產(chǎn)生自定義效果，您可以用這種新穎的方式組合這些以及其他簡單的控件

類的層次結(jié)構(gòu)是扁平的，以最大化可能的組合數(shù)量。

在寫應(yīng)用程序時，經(jīng)常會使用StatelessWidget和StatefulWidget編寫新控件，兩者的差別在于你是否要管理控件的狀態(tài)。一個控件的主要任務(wù)是實現(xiàn)build函數(shù)，定義控件中其他較低層次的控件。build函數(shù)將依次構(gòu)建這些控件，直到底層渲染對象。

3 網(wǎng)絡(luò)請求數(shù)據(jù)

網(wǎng)絡(luò)請求是APP開發(fā)中至關(guān)重要的一步，我們在開發(fā)這款A(yù)PP采用的是dio庫，dio是Flutter中文網(wǎng)開源的一個強大的Dart Http請求庫，支持Restful API.FornData.攔截器、請求取消Cookie管理、文件上傳下載、超時等。

（1）添加依賴（如圖2所示）。

（2）一個極簡的示例（如圖3所示）。

4 本地數(shù)據(jù)存儲

在開發(fā)APP過程中，我們需要存儲一些數(shù)據(jù)在本地，比如，登錄賬戶、登錄密碼和一些配置信息。在Flutter平臺我們使用sharedpreferences庫。SharedPreferences輕量級存儲類，以鍵值對的形式保存設(shè)置，屬性和數(shù)據(jù)，同時支持Android和iOS。

（1）添加依賴（如圖4所示）。

（2）實際代碼（如圖5所示）。

5 路由頁面跳轉(zhuǎn)

Flutter里而有路由支持所有的路由場景，push、pop頁而，頁而問的參數(shù)傳遞等等。flutter里而的路由可以分成兩種，一種是直接注冊，不能傳遞參數(shù)。另一種要自己構(gòu)造實例，可以傳遞參數(shù)。我們暫時把它們規(guī)為靜態(tài)路由和動態(tài)路由。

5.1 靜態(tài)路由的注冊

在新建一個MD風格的APP的時候，可以傳入一個routes參數(shù)來定義路由。但是這里定義的路由是靜態(tài)的，它不可以向下一個頁而傳遞參數(shù)（如圖6所示）。

靜態(tài)路由的使用

在新建一個MD風格的APP的時候，可以傳入一個routes參數(shù)來定義路由。但是這里定義的路由是靜態(tài)的，它不可以向下一個頁而傳遞參數(shù)（如圖7所示）。

pop回上一個頁而（如圖8所示）。

5.2 動態(tài)路由的使用

當需要向下一個頁而傳遞參數(shù)時，要用到所謂的動態(tài)路由，自己生成頁而對象，所以可以傳遞自己想要的參數(shù)（如圖9所示）。

也可以用PageRouterBuilder來自定義打開動畫（如圖10所示）。

6 總結(jié)

Flutter目前仍處于早期階段，也還沒有發(fā)布正式的Release版本，不過我們看到Flutter團隊一直在為這一目標而努力。雖然Flutter的開發(fā)生態(tài)不如Android和iOS原生應(yīng)用那么成熟，許多常用的復(fù)雜控件還需要自己實現(xiàn)，有的甚至?xí)容^困難（比如官方尚未提供的ListView scrollTo（index）功能），但是在高性能和跨平臺方而Flutter在眾多UI框架巾還是有很大優(yōu)勢的，可以大大提供開發(fā)效率。

參考資料

[1]石磊.基于Spark技術(shù)在智慧城市系統(tǒng)中的應(yīng)用[J].電子技術(shù)與軟件工程，2018（18）.

[2]Flutter框架技術(shù)概覽.

[3]Flutter插件倉庫.