flutter图片预览_Flutter绘制篇实现炫酷的雨雪特效

本文作者：xiaweizi

链接：https://juejin.im/post/6867489001809379335

本文由作者授权发布。

前言

前不久，利用周末时间学习并完成一个简单的 Flutter 项目 -  简悦天气，简约不简单，丰富不复杂，这是一款简约风格的 flutter 天气项目，提供实时、多日、24 小时、台风路径以及生活指数等服务，支持定位、删除、搜索等操作。

下图为主页效果：

开始

项目中很多自定义 widget，今天的主角是 背景层，不同的天气气象有不一样的呈现效果，一共实现了 12 种类别，其中有 晴、多云、阴天、小中大雨、小中大雪、雾、霾、浮尘，而背景层又分为三层：

• 背景颜色层。从上到下的渐变效果
• 云层。只有一种图片，对其位移、数量、染色做不同变化达到不同效果
• 雨雪层。为雨雪天气单独做了动画，很炫酷。

好，真正的主角就是这个雨雪层，为了更好的预览效果，在关于页面有上角添加切换天气类型的入口，实时查看不同气象下不同的背景效果。如下图，为雨雪的最终效果(gif 效果看起来会失真，请下载 apk 自行体验)：