一波Flutter酷炫特效来袭，持续更新

最新推荐文章于 2021-03-27 00:53:41 发布
最新推荐文章于 2021-03-27 00:53:41 发布
阅读量889 收藏 4
点赞数
分类专栏： flutter 文章标签： flutter 自定义Widget flutter effect
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/finaler001/article/details/88666328
版权
本文介绍了Flutter特效库flutter_effects，它包含多种炫酷UI特效，如差字缩放、边界线条、彩虹字体、粒子爆炸等。项目支持自定义Widget，并将持续更新更多效果。开发者可以通过参数控制动画行为，实现个性化的视觉效果。
摘要由CSDN通过智能技术生成

前言

实现UI和交互是大前端开发者的必备技能，也是掌握Flutter开发的重点；在下学习Flutter之际，实现了几种客户端上常见的酷炫UI特效，虽说是用Flutter造原生的轮子，但Flutter跨平台的特性是原生不能比拟的，更何况还有不弱的性能表现。本文主要是介绍Flutter特效库flutter_effects的基本情况和使用；

项目介绍

flutter_effects：是多个Flutter package工程组成，目标是用纯Flutter来实现炫酷的UI特效，支持android和ios运行；目前项目刚处于起步阶段，欢迎大家提出建议和问题反馈，如果你有好的想法，欢迎提出需求或者一起参与进来；

已经实现的功能：

类型 支持子widget 备注
差字缩放 文本 仅支持字符，不支持富文本
边界线条 所有 -
彩虹字体 文本 当前仅支持文本，富文本待定
粒子爆炸 所有 支持所有widget，包括图片
狠狠砸地 所有 -
刮刮卡 所有
最低0.47元/天 解锁文章
HitenDev
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
『Flutter-绘制篇』实现炫酷的雷电特效
下位子的博客
09-19 576
前言 前不久，利用周末时间学习并完成一个简单的 Flutter 项目 - 简悦天气，简约不简单，丰富不复杂，这是一款简约风格的 flutter 天气项目，提供实时、多日、24 小时、台风路径、语音播报以及生活指数等服务，支持定位、删除、搜索等操作。 下图为主页效果，点击下载 进行体验： 项目中运用了大量的自定义绘制 widget，首页丰富的 自定义 chart 效果和炫酷的天气背景动效。天气背景动效在不同的天气气象下展示不同的效果。目前一共实现了 15 种类别，其中有，晴、晴晚、多云、多云晚、阴天、小中
开源探索： Flutter旋转轮盘——flutter_spinning_wheel
最新发布
gitblog_00074的博客
06-23 450
开源探索： Flutter旋转轮盘——flutter_spinning_wheel 项目地址:https://gitcode.com/davidanaya/flutter-spinning-wheel 在无数的移动应用和游戏设计中，旋转轮盘以其独特的互动性和趣味性占有一席之地。今天，我们要推荐的是一个专为Flutter框架量身打造的开源项目——flutter_spinning_wheel。这是一款...
flutter offset_给 Flutter 界面切换来点特效
weixin_39853131的博客
11-30 486
本文微信公众号「AndroidTraveler」首发。背景我们知道页面之间如果直接切换，会比较生硬，还会让用户觉得很突兀，用户体验不是很好。因此一般情况下，页面之间的切换为了达到平滑过渡，都会添加动画。另外，有时候我们不喜欢系统的默认动画，希望能够自定义动画。基于此，本篇主要讲述如何给 Flutter 的页面切换增加自定义动画。默认效果首先我们看看默认效果是怎样的？看起来似乎还不错。代码如下：im...
给 Flutter 界面切换来点特效
weixin_30493401的博客
09-09 369
本文微信公众号「AndroidTraveler」首发。 背景 我们知道页面之间如果直接切换，会比较生硬，还会让用户觉得很突兀，用户体验不是很好。 因此一般情况下，页面之间的切换为了达到平滑过渡，都会添加动画。 另外，有时候我们不喜欢系统的默认动画，希望能够自定义动画。 基于此，本篇主要讲述如何给 Flutter 的页面切换增加自定义动画。 默认效果 首先我们看看默认效果是怎样的？ 看起...
Flutter 实现酷炫的3D效果示例代码
08-18
一、标题："Flutter 实现酷炫的3D效果示例代码" 标题介绍了本文的主要内容，即使用 Flutter 实现酷炫的 3D 效果，并提供了示例代码。 二、描述："主要介绍了Flutter 实现酷炫的3D效果，本文通过实例代码给大家介绍...
flutter菜鸟踩坑之旅–持续更新中
01-03
首先来一些基础的资源信息，比如官网、环境变量配置、基本命令与检测方式。 1、flutter中文网下载flutter，点击地址下载，选择自己需要的版本，下载到目标文件夹然后解压就行了。  2、配置环境变量 //在终端输入...
flutter项目框架（后期会持续更新）
05-21
这个项目框架的创建者显然旨在提供一个完整的解决方案，帮助开发者快速搭建Flutter应用，并且随着时间的推移，还会不断更新以包含最新的技术和最佳实践。 1、**项目基础框架和分类**：在Flutter项目中，基础框架...
一个Flutter实现的炫酷flippanel
08-10
在本项目中，我们将深入探讨如何使用Flutter来实现这种翻转面板效果，以及这一过程涉及的关键技术点。 首先，Flutter的基石是其Dart编程语言，它支持面向对象、函数式以及命令式编程风格，语法简洁，易于学习。在...
Flutter下载更新App的方法示例
08-25
用户可以通过应用程序商店来更新应用程序，但是对于移动应用程序开发者来说，如何使用Flutter实现下载更新App是一个非常重要的技术问题。 二、Flutter下载更新App的方法示例 Flutter下载更新App的方法示例可以分为...
flutter实现常用特效的案例效果代码
04-06
作者iotjin，源码jh_flutter_demo，实现的一些效果UI相关ListView相关(上下拉刷新、分组上下拉刷新、分组吸顶)GridView相关弹框封装(中间、底部、toast、自定义弹框)仿微信右上角弹框时间、日期、单列、多列、底部选择器拍照、本地图片多选、九宫格展示、全屏查看图片JhForm 表单录入(选择样式、输入样式、登录样式)dio封装、分页上下拉加载数据、传值和回传、网络状态获取baseNav、baseAppBar、BaseTabBar、BaseWebView 封装导航条搜索框chart相关(多图表动态加载、渐变折线图、折线柱状图混合图表)JhTopTabBar(导航条分页切换)小红点二维码扫描与生成轮播(全屏、缩放)Animation(标签云)列表侧滑按钮城市选择列表富文本屏幕适配倒计时按钮登录注册版本新特性检查更新路由分模块管理AES加解密、MD5加密、base64编码解码本地数据AES加密存储仿微信UI（首页，通讯录，发现和个人中心等）导航条图片下拉放大和渐变效果(微信运动排行榜，个人主页)微信朋友圈和图片浏览 flutter ios
flutter 动画_一大波Flutter酷炫动画来袭，持续更新。。。
weixin_39723655的博客
11-30 686
前言实现UI和交互是大前端开发者的必备技能，也是掌握Flutter开发的重点；在下学习Flutter之际，实现了几种客户端上常见的酷炫UI特效，虽说是用Flutter造原生的轮子，但Flutter跨平台的特性是原生不能比拟的，更何况还有不弱的性能表现。本文主要是介绍Flutter hub特效库ifgyong/flutter_easyHub​github.com的基本情况和使用；项目介绍ifgyon...
『Flutter-绘制篇』实现炫酷的雨雪特效
下位子的博客
09-01 545
前言 前不久，利用周末时间学习并完成一个简单的 Flutter 项目 - 简悦天气，简约不简单，丰富不复杂，这是一款简约风格的 flutter 天气项目，提供实时、多日、24 小时、台风路径以及生活指数等服务，支持定位、删除、搜索等操作。 下图为主页效果： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FdKPCMM6-1598962223360)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/76bdbd8781d64
flutter图片预览_Flutter绘制篇实现炫酷的雨雪特效
weixin_33315077的博客
12-31 334
本文作者：xiaweizi链接：https://juejin.im/post/6867489001809379335本文由作者授权发布。前言 前不久，利用周末时间学习并完成一个简单的 Flutter 项目 - 简悦天气，简约不简单，丰富不复杂，这是一款简约风格的 flutter 天气项目，提供实时、多日、24 小时、台风路径以及生活指数等服务，支持定位、删除、搜索等操作。下图为主页效果...
Flutter CodePen 本周挑战 | 动画特效！
谷歌开发者
07-23 330
本周挑战:动画特效在 Flutter 中，有一类动画可借助库内置的动画 widget 自动实现不同的动画效果，这种动画被称为 "隐式动画" (implicit anim...
reflect动画,Flutter Animations动画效果合集(全网最全)
weixin_42161497的博客
03-27 1101
CurvedAnimation(曲线动画)Tween(补间动画/伸缩动画)Loading加载动画(ProgressDialog)Fade 渐入淡出动画AnimatedBuilder(曲线动画)StaggerAnimation(交错动画)AnimatedSwitcher(切换动画)1.CurvedAnimation(曲线动画)效果图曲线.gif关键代码import 'package:flutter/...
flutter 自定义一个带水波纹的listtile
05-30
要实现一个带水波纹的自定义 ListTile，可以按照以下步骤进行： 1. 创建一个自定义的 ListTile Widget，可以继承自 StatelessWidget 或 StatefulWidget。 2. 在 ListTile 中添加一个 InkWell Widget，用于实现水波纹效果。 3. 在 InkWell 中添加一个 Container Widget，用于包裹 ListTile 的内容，并设置宽度和高度。 4. 在 Container 中添加一个 Stack Widget，用于实现 ListTile 左侧的图标和右侧的箭头。 5. 在 Stack 中添加一个 Positioned Widget，用于定位图标和箭头的位置。 6. 在 Positioned 中添加一个 Icon Widget，用于显示图标。 7. 在 Stack 中添加一个 Align Widget，用于定位箭头的位置。 8. 在 Align 中添加一个 Icon Widget，用于显示箭头。 9. 在 InkWell 中添加一个 onTap 回调函数，用于处理用户的点击事件。 下面是一个示例代码，实现了一个带水波纹的自定义 ListTile： ```dart class CustomListTile extends StatelessWidget { final IconData icon; final String title; final String subtitle; CustomListTile({this.icon, this.title, this.subtitle}); @override Widget build(BuildContext context) { return InkWell( onTap: () {}, child: Container( height: 60.0, child: Stack( children: [ Positioned( left: 16.0, top: 12.0, child: Icon(icon), ), Align( alignment: Alignment.centerRight, child: Icon(Icons.arrow_forward_ios), ), Container( margin: EdgeInsets.only(left: 72.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( title, style: TextStyle(fontSize: 18.0), ), Text( subtitle, style: TextStyle(fontSize: 14.0), ), ], ), ), ], ), ), ); } } ``` 使用时，只需要将 CustomListTile 添加到 ListView 中即可： ```dart ListView( children: [ CustomListTile( icon: Icons.home, title: 'Home', subtitle: 'Go to home page', ), CustomListTile( icon: Icons.settings, title: 'Settings', subtitle: 'Go to settings page', ), ], ); ``` 希望这个示例能够帮助你实现自己的带水波纹的自定义 ListTile。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值