后端开发者的前端之路-模糊笔记APP版(flutter)

8,475 阅读2分钟

我是一名5+工作经验的后端程序员,但一直拥有一颗对前端向往的不死之心,在学校的时候,就开始学习css、js、juqery等技术栈,还不断的做一些小游戏,比如2048单机版、音乐盒子等, 后来就开始接触angular、react等前端框架,记得有段时间对react native也很痴迷,一直在图书馆看相关书籍,虽然没有什么成果,但当时也乐在其中。

前端之路

模糊笔记 APP版(flutter开发)

  • 白天模式
  • 黑夜模式
  • 部分源码解析(自动定位功能)

模糊笔记APP是一款记录雾霾的APP,支持定位、地图、排行榜等功能,是使用flutter开发,支持黑夜模式

白天模式 微信图片_20220807183316.jpg

黑夜模式 微信图片_20220807183323.jpg

源码解析

依赖库

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();
  }

就是这么简单