後端開發者的前端之路-模糊筆記APP版(flutter)

語言: CN / TW / HK

我是一名5+工作經驗的後端程式設計師,但一直擁有一顆對前端嚮往的不死之心,在學校的時候,就開始學習css、js、juqery等技術棧,還不斷的做一些小遊戲,比如2048單機版、音樂盒子等, 後來就開始接觸angular、react等前端框架,記得有段時間對react native也很痴迷,一直在圖書館看相關書籍,雖然沒有什麼成果,但當時也樂在其中。

前端之路

模糊筆記 APP版(flutter開發)

  • 白天模式
  • 黑夜模式
  • 部分原始碼解析(自動定位功能)

模糊筆記APP是一款記錄霧霾的APP,支援定位、地圖、排行榜等功能,是使用flutter開發,支援黑夜模式

白天模式 微信圖片_20220807183316.jpg

黑夜模式 微信圖片_20220807183323.jpg

原始碼解析

依賴庫

js dependencies: | | | ------------- | ----------------------------------------------------------------------------------- | | | flutter: | | | sdk: flutter | | | flutter_localizations: | | | sdk: flutter | | | # Localization https://github.com/dart-lang/intl | | | intl: ^0.16.1 | | | # Toast外掛 https://github.com/OpenFlutter/flutter_oktoast | | | oktoast: ^2.3.2 | | | # 網路庫 https://github.com/flutterchina/dio | | | dio: ^3.0.10 | | | # Dart 常用工具類庫 https://github.com/Sky24n/common_utils | | | common_utils: 1.2.1 | | | # Flutter 常用工具類庫 https://github.com/Sky24n/flustars | | | flustars: ^0.3.3 | | | # Flutter shared_preferences plugin util https://github.com/Sky24n/sp_util | | | sp_util: ^1.0.1 | | | # Flutter 輪播圖 https://github.com/best-flutter/flutter_swiper | | | flutter_swiper: ^1.1.6 | | | # 啟動URL的外掛 https://github.com/flutter/plugins/tree/master/packages/url_launcher | | | url_launcher: 5.7.8 | | | # 側滑刪除 https://github.com/letsar/flutter_slidable | | | flutter_slidable: ^0.5.7 | | | # WebView外掛 https://github.com/flutter/plugins/tree/master/packages/webview_flutter | | | webview_flutter: 1.0.7 | | | # 處理鍵盤事件 https://github.com/diegoveloper/flutter_keyboard_actions | | | keyboard_actions: ^3.3.1+1 | | | # 列表懸浮頭 https://github.com/fluttercommunity/flutter_sticky_headers | | | sticky_headers: ^0.1.8+1 | | | # 城市選擇列表 https://github.com/flutterchina/azlistview | | | azlistview: ^1.0.2 | | | # 手勢識別 https://github.com/aleksanderwozniak/simple_gesture_detector | | | # simple_gesture_detector: ^0.1.4 | | | # 路由框架 https://github.com/theyakka/fluro | | | fluro: ^1.7.8 | | | # 圖片快取 https://github.com/renefloor/flutter_cached_network_image | | | cached_network_image: ^2.4.1 | | | # 格式化String https://github.com/Naddiseo/dart-sprintf | | | sprintf: ^5.0.0 | | | # 狀態管理 https://github.com/rrousselGit/provider | | | provider: ^4.3.2+2 | | | # 高德2D地圖外掛 https://github.com/simplezhli/flutter_2d_amap | | | #flutter_2d_amap: ^0.0.1 | | | charts_flutter: ^0.10.0 | | | amap_location: ^0.2.0 | | | permission_handler: ^3.2.0 主要講解一下定位功能

定位功能是使用高德地圖的api,具體賬號申請獲取key的操作可以自行google,這裡定位功能主要使用了amap_location: ^0.2.0。

廢話不多說,我們直接上原始碼

主類操作

js import 'package:amap_location/amap_location.dart'; MyApp({this.home, this.theme}) { startPosition();//開啟位置 Log.init(); initDio(); Routes.initRoutes(); }

startPosition方法

開啟定位

js startPosition()async{ await AMapLocationClient.startup(new AMapLocationOption( desiredAccuracy:CLLocationAccuracy.kCLLocationAccuracyHundredMeters )); }

js getLocation()async{ print("準備 獲取 GPS"); AMapLocation d = await AMapLocationClient.getLocation(true); var lat = d.latitude; var lng = d.longitude; if(lat!=null&&lng!=null){ SpUtil.putString("location", lng.toString()+','+lat.toString()); }else{ Toast.show('獲取位置失敗,請檢測GPS是否開啟!'); } }

關閉定位

js @override void dispose() { //這裡可以停止定位 AMapLocationClient.stopLocation(); }

就是這麼簡單