我是一名5+工作经验的后端程序员,但一直拥有一颗对前端向往的不死之心,在学校的时候,就开始学习css、js、juqery等技术栈,还不断的做一些小游戏,比如2048单机版、音乐盒子等, 后来就开始接触angular、react等前端框架,记得有段时间对react native也很痴迷,一直在图书馆看相关书籍,虽然没有什么成果,但当时也乐在其中。
前端之路
- 2016-2017 模仿2048小游戏
- 2017-2018 模仿网易云音乐h5页面
- 2018-2019 由于特殊原因停滞一年
- 2019-2020(上) APP说 一款关于APP推荐的网站(www.appshuo.club)
- 2019-2020(下)APP说 APP版(flutter开发)
- 2020-2021(上) 模糊笔记 一款记录每个城市雾霾的网站(www.hazer.top)
- 2020-2021(下) 模糊笔记 APP版(flutter开发)
- 2021-2022(上) 亿空间低代码平台
- 2022-至今 英语Fly小程序
模糊笔记 APP版(flutter开发)
- 白天模式
- 黑夜模式
- 部分源码解析(自动定位功能)
模糊笔记APP是一款记录雾霾的APP,支持定位、地图、排行榜等功能,是使用flutter开发,支持黑夜模式
白天模式
黑夜模式
源码解析
依赖库
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。
废话不多说,我们直接上源码
主类操作
import 'package:amap_location/amap_location.dart';
MyApp({this.home, this.theme}) {
startPosition();//开启位置
Log.init();
initDio();
Routes.initRoutes();
}
复制代码
startPosition方法
开启定位
startPosition()async{
await AMapLocationClient.startup(new AMapLocationOption( desiredAccuracy:CLLocationAccuracy.kCLLocationAccuracyHundredMeters ));
}
复制代码
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是否开启!');
}
}
复制代码
关闭定位
@override
void dispose() {
//这里可以停止定位
AMapLocationClient.stopLocation();
}
复制代码
就是这么简单