![SimplicityWeather](https://socialify.git.ci/xiaweizi/SimplicityWeather/image?description=1&font=Inter&forks=1&logo=https%3A%2F%2Favatars2.githubusercontent.com%2Fu%2F18526994%3Fs%3D460%26u%3Dfafc0ba23c151498268487e2244b57ab042b729a%26v%3D4&owner=1&pattern=Circuit%20Board&stargazers=1&theme=Light)
# 简悦天气
*简约不简单,丰富不复杂*
一款简约风格的 flutter 天气项目,提供实时、多日、24 小时、台风路径以及生活指数等服务,支持定位、删除、搜索,语音播报等操作。
作为 flutter 实战项目,包含状态管理、网络请求、数据缓存、自定义 view、自定义动画,三方统计,事件管理等技术点,实用且丰富。
如果图片看不到,请前往 [『Flutter』一款风格简约功能丰富的天气](http://xiaweizi.cn/article/f7f8/)
### 体验
点击[下载链接](http://xiaweizi.top/SimplicityWeather-2_6.apk)下载
或者直接扫描二维码抢先体验
![第三组](/images/qrcode.png)
### 功能介绍
目前已支持的功能如下
- [x] 自动定位
- [x] 添加&删除城市
- [x] 实时信息
- [x] 24小时&多日预报
- [x] 丰富的生活指数
- [x] 台风路径
- [x] 背景高斯模糊
- [x] 动态降雨卡片
- [x] 自动更新
- [x] 丰富多样的天气背景效果(雷暴效果)
- [x] 自动升级
- [x] 语音播报
- [x] **一键换天**,做天气之子
接下来多图警告
![第一组](/images/weather1.png)
![第二组](/images/weather2.png)
![第三组](/images/weather3.png)
#### 一键换天
天气背景效果分为三层:
- 背景颜色层。从上到下的渐变效果
- 云层。只有一种图片,对其位移、数量、染色做不同变化达到不同效果
- 雨雪层。为雨雪天气单独做了动画,很炫酷。
目前支持多达 **12** 种不同的天气类型,其中包括:晴、多云、阴天、小中大雨、小中大雪、雾、霾、浮尘,为了更好,在关于页面有上角添加切换天气类型的入口,实时查看不同气象下不同的背景效果。下面用一种 GIF 图展示效果,鉴于 GIF 本身的局限,可能会模糊低帧,请下载 apk 自行体验。
![home](/images/home.gif)
![page](/images/page.gif)
![list](/images/list.gif)
![grid](/images/grid.gif)
![check](/images/check.gif)
### 技术介绍
虽然这个项目简单,但是涵盖的 flutter 技术点却不少,可以满足日常开发小项目的需求。
其实从入门 flutter 到完成这个项目,也只是花了两个周末,加上平时下班的时间,代码写的略微有点仓促,很多可以封装,和一些绘制的逻辑还有很大的优化空间,后面抽时间进行优化一波。
大致整理一下其技术点:
- 网络请求&数据缓存
- 高德 SDK 以及自动定位
- 自定义 View,动画以及 widget
- 三方统计接入,插件接入
- 状态管理,数据同页面以及跨页面传输
- 屏幕适配,公共组件封装
这里特地把自自定义 View &动画拉出来说说,从项目可以看到很多的图表,包括空气质量&湿度比例圆弧图,日出日落弧线图,以及24小时&多日折线图。其实绘制原理跟 Android 的绘制很像,包括接口的设计也异曲同工。同样有 canvas 画布和 paint 画笔,这样写起来就方便很多。
有了 Android 绘制基础,写起来就非常快了,这几个图加在一起一共不到一天的时间就可以完成。无非是先装载好数据,根据获取到的数据进行绘制。后面有时间会单独介绍一下这这块的绘制逻辑。
### 三方库依赖
Fluter 为什么目前这么火热,以及开发的效率如此之高,除了因为 Google 这个大佬作为靠山,更多的还是活跃的开源社区,[pub.dev](https://pub.flutter-io.cn/) 上提供了很多稳定而又多样的插件,省去不必要的开发时间,根据自己的实际情况进行选择,结合 Mac 上 Alfred 工具,搜索起来得心应手。
同样,简悦天气项目中也引用不少依赖插件,特此进行说明和感谢。
| 插件名称 | 插件说明 |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| [flutter_weather_bg](https://pub.flutter-io.cn/packages/flutter_weather_bg) | 本人开发的炫酷的天气动态背景 |
| [flutter_bloc](https://pub.flutter-io.cn/packages/flutter_bloc) | 不多说,很强大,作为新手再也不用担心数据共享与更新 |
| [shared_preferences](https://pub.flutter-io.cn/packages/shared_preferences) | 很常用,持久化保存数据 |
| [dio](https://pub.flutter-io.cn/packages/dio) | 网络请求当然离不开一个好的网络框架,项目只是用到了基础的 GET 请求 |
| [amap_location_fluttify](https://pub.flutter-io.cn/packages/amap_location_fluttify) | 高德定位插件,虽然有坑,但是满足基础需求 |
| [location_permissions](https://pub.flutter-io.cn/packages/location_permissions) | 定位权限判断已经申请插件 |
| [event_bus](https://pub.flutter-io.cn/packages/event_bus) | 事件更新 |
| [flutter_slidable](https://pub.flutter-io.cn/packages/flutter_slidable) | 强大的侧滑插件 |
| [umeng_analytics_plugin](https://pub.flutter-io.cn/packages/umeng_analytics_plugin) | 友盟统计插件 |
| [flutter_screenutil](https://pub.flutter-io.cn/packages/flutter_screenutil) | 屏幕适配工具插件 |
| [modal_bottom_sheet](https://pub.flutter-io.cn/packages/modal_bottom_sheet) | 底部弹窗 |
| [path_drawing](https://pub.flutter-io.cn/packages/path_drawing) | 绘制虚线 path 用到 |
| [url_launcher](https://pub.flutter-io.cn/packages/url_launcher) | 通用跳转工具 |
| [package_info](https://pub.flutter-io.cn/packages/package_info) | 获取包相关信息 |
| [ota_update](https://pub.flutter-io.cn/packages/ota_update) | apk 自动升级 |
| [flutter_tts](https://pub.flutter-io.cn/packages/flutter_tts) | 语音播报 |
### 总结
对 Flutter 两周的学习和开发下来后的感受,代码写起来是真快,在 Android 如果想实现,点击按钮并更新 TextView 的逻辑,首先创建 xml 布局,其次 java 代码中初始化 View 并给 button 添加点击事件,然后,还需要有单独的变量保存状态的更新,最后在变量发生变化时更新 TextView 的值。
而 Flutter 的核心就是 widget,很多功能都封装在 widget 中,在 Flutter 中如果想实现该功能,只需创建两个 widget,在相应 click 事件时只需关系变量值改变,调用 setState,后续的 View 更新可以完全不用管,有点类似 Android 的 databinding。
不过,由于全部都是 widget,你会发现如果把所有页面写在一个文件,那么嵌套的画面绝对会让你崩溃。这就需要,对功能进行拆解,尽量做到逻辑最小化,代码阅读性和维护性也会很高。还有就是插件,虽然社区的插件已经相当丰富,但还是有些需求没有找到合适的插件,这就需要广大开发者,积极燃烧开源热血,为社区贡献自己的成果。
总的来说,开发效率上确实提高不少,因为入坑时间短,原理和性能上没有细致研究,所以可能导致看法�
传奇开心果编程
- 粉丝: 1w+
- 资源: 454
最新资源
- 西电微机原理实验-西安电子科技大学微机原理课程实验概述与指导
- 智慧校园(校园AI 产品) 校园安全 智慧校园 教育数字化 AI校园
- 西电微机原理实验四:8255可编程并行接口的应用
- 基于 Go+Echo 开发的多房间实时通讯系统。详细文档+优秀项目+全部资料.zip
- 基于 Go + Vue 的现代化博客系统详细文档+优秀项目+全部资料.zip
- 基于 go + grpc + consul 的微服务系统详细文档+优秀项目+全部资料.zip
- 基于 golang goframe + vue3 的、前后端分离的后台管理系统快捷使用模板,支持按钮级别的 RBAC。详细文档+优秀项目+全部资料.zip
- 基于 goframe2 和vue3 开发的全栈前后端分离的后台管理系统,详细文档+优秀项目+全部资料.zip
- 基于 Golang 的 容器管理系统 API详细文档+优秀项目+全部资料.zip
- 基于 React 实现的电商后台管理系统的前端项目详细文档+优秀项目+全部资料.zip
- 基于 Golang开发的微服务网关,能够实现高性能 HTTP API 转发、服务编排、多租户管理、API 访问权限控制等目的,拥有强大的自定义插件系统可以自行扩展详细文档+优秀项目+全部资料.zip
- 基于 Vue + Go 实现客户关系管理系统,,主要功能有仪表盘、客户管理、合同管理、产品管理、配置、订阅等功能详细文档+优秀项目+全部资料.zip
- 基于beego v2.0.1框架和AdminLte前端框架,开发的go语言通用后台系统,详细文档+优秀项目+全部资料.zip
- 基于 SpringBoot + Spring + SpringMvc + Mybatis + Shiro+ Redis 开发单点登录管理系统详细文档+优秀项目+全部资料.zip
- 基于beego的简易blog系统详细文档+优秀项目+全部资料.zip
- 基于Beego开发的可切换模板的 BBS 社交博客系统、它安装简单便捷,页面简介优美。前端是HTML+JS+CSS,不需要掌握一些前端技术栈也能轻松自定义页面。详细文档+优秀项目+全部资料.zip
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈