『Flutter』一款風格簡約功能豐富的天氣

最近利用兩週的週末和下班時間入坑了 Flutter，簡單的學了一下基礎的 widget 後，就準備拿一個項目練練手。什麼項目既實用，有不乏技術，當時是寫一個天氣 app 了，所以 簡悅天氣 所以誕生。java

簡約不簡單，豐富不復雜git

一款簡約風格的 flutter 天氣項目，提供實時、多日、24 小時、颱風路徑以及生活指數等服務，支持定位、刪除、搜索等操做。github

做爲 flutter 實戰項目，包含狀態管理、網絡請求、數據緩存、自定義 view、自定義動畫，三方統計，事件管理等技術點，實用且豐富。canvas

體驗

點擊下載連接下載緩存

或者直接掃描二維碼搶先體驗markdown

功能介紹

目前已支持的功能以下網絡

接下來多圖警告 app

一鍵換天

天氣背景效果分爲三層：框架

背景顏色層。從上到下的漸變效果
雲層。只有一種圖片，對其位移、數量、染色作不一樣變化達到不一樣效果
雨雪層。爲雨雪天氣單獨作了動畫，很炫酷。

目前支持多達 12 種不一樣的天氣類型，其中包括：晴、多雲、陰天、小中大雨、小中大雪、霧、霾、浮塵，爲了更好，在關於頁面有上角添加切換天氣類型的入口，實時查看不一樣氣象下不一樣的背景效果。下面用一種 GIF 圖展現效果，鑑於 GIF 自己的侷限，可能會模糊低幀，請下載 apk 自行體驗。工具

技術介紹

雖然這個項目簡單，可是涵蓋的 flutter 技術點卻很多，能夠知足平常開發小項目的需求。

其實從入門 flutter 到完成這個項目，也只是花了兩個週末，加上平時下班的時間，代碼寫的略微有點倉促，不少能夠封裝，和一些繪製的邏輯還有很大的優化空間，後面抽時間進行優化一波。

大體整理一下其技術點：

網絡請求&數據緩存
高德 SDK 以及自動定位
自定義 View，動畫以及 widget
三方統計接入，插件接入
狀態管理，數據同頁面以及跨頁面傳輸
屏幕適配，公共組件封裝

這裏特意把自自定義 View &動畫拉出來講說，從項目能夠看到不少的圖表，包括空氣質量&溼度比例圓弧圖，日出日落弧線圖，以及24小時&多日折線圖。其實繪製原理跟 Android 的繪製很像，包括接口的設計也殊途同歸。一樣有 canvas 畫布和 paint 畫筆，這樣寫起來就方便不少。

有了 Android 繪製基礎，寫起來就很是快了，這幾個圖加在一塊兒一共不到一天的時間就能夠完成。無非是先裝載好數據，根據獲取到的數據進行繪製。後面有時間會單獨介紹一下這這塊的繪製邏輯。

三方庫依賴

Fluter 爲何目前這麼火熱，以及開發的效率如此之高，除了由於 Google 這個大佬做爲靠山，更多的仍是活躍的開源社區，pub.dev 上提供了不少穩定而又多樣的插件，省去沒必要要的開發時間，根據本身的實際狀況進行選擇，結合 Mac 上 Alfred 工具，搜索起來駕輕就熟。

一樣，簡悅天氣項目中也引用很多依賴插件，特此進行說明和感謝。

插件名稱	插件說明
flutter_bloc	很少說，很強大，做爲新手不再用擔憂數據共享與更新
shared_preferences	很經常使用，持久化保存數據
dio	網絡請求固然離不開一個好的網絡框架，項目只是用到了基礎的 GET 請求
amap_location_fluttify	高德定位插件，雖然有坑，可是知足基礎需求
location_permissions	定位權限判斷已經申請插件
event_bus	事件更新
flutter_slidable	強大的側滑插件
umeng_analytics_plugin	友盟統計插件
flutter_screenutil	屏幕適配工具插件
modal_bottom_sheet	底部彈窗
path_drawing	繪製虛線 path 用到
url_launcher	通用跳轉工具
package_info	獲取包相關信息

總結

對 Flutter 兩週的學習和開發下來後的感覺，代碼寫起來是真快，在 Android 若是想實現，點擊按鈕並更新 TextView 的邏輯，首先建立 xml 佈局，其次 java 代碼中初始化 View 並給 button 添加點擊事件，而後，還須要有單獨的變量保存狀態的更新，最後在變量發生變化時更新 TextView 的值。

而 Flutter 的核心就是 widget，不少功能都封裝在 widget 中，在 Flutter 中若是想實現該功能，只需建立兩個 widget，在相應 click 事件時只需關係變量值改變，調用 setState，後續的 View 更新能夠徹底不用管，有點相似 Android 的 databinding。

不過，因爲所有都是 widget，你會發現若是把全部頁面寫在一個文件，那麼嵌套的畫面絕對會讓你崩潰。這就須要，對功能進行拆解，儘可能作到邏輯最小化，代碼閱讀性和維護性也會很高。還有就是插件，雖然社區的插件已經至關豐富，但仍是有些需求沒有找到合適的插件，這就須要廣大開發者，積極燃燒開源熱血，爲社區貢獻本身的成果。

總的來講，開發效率上確實提升很多，由於入坑時間短，原理和性能上沒有細緻研究，因此可能致使見解有點片面，不事後面會努力補上知識點。

感謝

天氣數據來源於彩雲科技

定位功能來自高德地圖

統計來自友盟統計

天氣 icon 來自阿里icon