Flutter 毛玻璃效果案例实现

最新推荐文章于 2024-03-11 20:23:09 发布
最新推荐文章于 2024-03-11 20:23:09 发布
阅读量601 收藏
点赞数
分类专栏： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xq610928/article/details/108970863
版权
本文介绍了如何在Flutter中实现毛玻璃效果，通过使用可约束性盒子组件、ClipRect、BackdropFilter和Opacity等组件，详细讲解了具体步骤和关键参数设置，提供了一段完整的毛玻璃效果代码，并分享了项目源码链接及QQ交流群信息。
摘要由CSDN通过智能技术生成

前言：

各位同学大家好,因为晚上睡不着 就起来给大家写了一个小案例 demo（Flutter 毛玻璃效果案例实现），希望能帮助到各位同学学习，那么废话不多说我们正式开始

准备工作 ：

需要安装flutter的开发环境：大家可以去看看之前的教程：
1 win系统flutter开发环境安装教程: https://www.jianshu.com/p/152447bc8718
2 mac系统flutter开发环境安装教程：https://www.jianshu.com/p/bad2c35b41e3

效果图 ：

QQ截图20201009000247.png

具体实现：

首先我们用可约束性盒子组件 来装载一个 image组件显示底部图片

     //约束性盒子
了解本专栏 订阅专栏 解锁全文 超级会员免费看
xq9527--
关注
专栏目录
订阅专栏
Flutter 实现背景图片毛玻璃效果
Flutter 跨平台技术研究
08-04 2239
我们来看看如何使用 CustomPaint 实现毛玻璃背景图效果。毛玻璃背景图其实就是将图片进行一定程度的模糊，背景图经过模糊后更加虚幻，使得前景和后景就会有层次感。
Flutter桌面应用开发之毛玻璃效果
qq_26585943的博客
11-26 1338
毛玻璃效果是一种模糊化的视觉效果，常用于图像处理和界面设计中。它可以通过在图像或界面元素上应用高斯模糊来实现。使用毛玻璃效果可以增加图像或界面元素的柔和感，同时减少细节的清晰度。
探索Flutter中的模糊毛玻璃滤镜效果：ImageFilter介绍使用和深入解析
m0_69332898的博客
03-11 2219
在Flutter中，通过`BackdropFilter`和`ImageFilter.blur`实现图像模糊效果简单而高效。本文介绍了如何动态调整模糊程度，以及如何利用`TileMode`参数改变模糊效果的边缘行为，增强用户交互和视觉体验。通过添加滑动条和下拉菜单，用户可以实时调整模糊效果，并选择`clamp`、`mirror`或`repeated`模式以探索不同的视觉效果。这些技术不仅提升了应用的美观性，也增加了应用的互动性，为用户提供了丰富的定制选项，使Flutter应用开发更具创意和灵活性。
flutter毛玻璃效果
androidhyf的博客
09-07 245
flutter毛玻璃效果
Flutter实例-毛玻璃效果
小小熊的博客
09-30 931
Flutter实例-毛玻璃效果 /// 毛玻璃效果 class FrostedGlass extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("毛玻璃效果"),), body: ...
flutter毛玻璃效果实现
兔子零
01-10 1065
import 'package:flutter/material.dart'; import 'frosted_glass_demo.dart'; void main()=> runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return MaterialApp( .
Flutter模糊滤镜效果完整代码 《探索Flutter中的模糊毛玻璃滤镜效果：ImageFilter介绍使用和深入解析》
最新发布
03-11
《探索Flutter中的模糊毛玻璃滤镜效果：ImageFilter介绍使用和深入解析》的完整代码下载链接 https://blog.csdn.net/m0_69332898/article/details/136633981?spm=1001.2014.3001.5502
flutter学习--毛玻璃制作效果
pgg_cold的博客
05-24 3519
Flutter的Fliter Widget 也是非常强大的，它可以制作出你想要的神奇滤镜效果。这节我们就以实战的方式，制作一个毛玻璃效果 BackdropFilter Widget BackdropFilter就是背景滤镜组件，使用它可以给父元素增加滤镜效果，它里边最重要的一个属性是filter。 filter属性中要添加一个滤镜组件，实例中我们添加了图片滤镜组件，并给了模糊效果。 import ...
Flutter进阶实战 7-20 毛玻璃效果制作
dpl12的博客
07-22 1619
前言：Flutter的Fliter Widget 也是非常强大的，它可以制作出你想要的神奇滤镜效果。这里我们就以实战的方式，制作一个毛玻璃效果，通过实例来学习Fitler 的用法。 效果如下：这位老师你认识吗？ 实现过程： 一、main.dart文件编写 import 'package:flutter/material.dart'; import 'Frosted_class.dar...
flutter 背景图片毛玻璃效果
weixin_43294560的博客
04-27 3557
1、引入图片滤镜文件 import 'dart:ui'; 2、在Stack组件中堆叠，产生图标毛玻璃效果 若不使用图片毛玻璃，仅仅是背景模糊透明，用Opacity组件就可实现 第一个组件为图片 第二个组件为图片产生毛玻璃效果，并设置图片上的组件 BackdropFilter( 背景过滤器 filter: ImageFilter.blur(s...
Flutter 之毛玻璃效果
Coding_Physical的专栏
12-12 366
import 'package:flutter/material.dart'; import 'dart:ui'; class FrostedClassDemo extends StatelessWidget { const FrostedClassDemo({Key key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( body: Stack( .
Flutter教程之Flutter 中的磨砂玻璃效果
iCloudEnd的博客
11-06 820
Flutter 中的 BackdropFilter() 小部件也用于模糊图像、容器或许多其他小部件。它用于突出需要更多关注的内容和模糊需要较少关注的内容。现在添加背景滤镜的属性，滤镜：ImageFilter.blur，并添加sigma X，sigmaY。磨砂玻璃效果是flutter中一个很酷的UI概念，让我们的UI看起来更有吸引力。它基本上是一个具有降低不透明度的模糊叠加层，以区分或减少某个视图。现在，我们可以看到图像上的模糊效果。那么，让我们看看如何在 Flutter 中实现磨砂玻璃效果。
flutter 实现 “信用卡毛玻璃渐变新拟物设计卡片”
qq_37149096的博客
01-26 1122
flutter 实现 “信用卡毛玻璃渐变新拟物设计卡片” 在即时设计上看见了这样的一个信用卡毛玻璃渐变风格设计 决定把这个风格的设计用flutter实现一下并且加一些新拟物风格的阴影设计
容器组件示例
weixin_30520015的博客
08-18 108
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget ...
一波Flutter酷炫特效来袭，持续更新
weixin_34255055的博客
03-18 2066
前言 实现UI和交互是大前端开发者的必备技能，也是掌握Flutter开发的重点；在下学习Flutter之际，实现了几种客户端上常见的酷炫UI特效，虽说是用Flutter造原生的轮子，但Flutter跨平台的特性是原生不能比拟的，更何况还有不弱的性能表现。本文主要是介绍Flutter特效库flutter_effects的基本情况和使用； 项目介绍 flutter_effects：是多个Flutte...
Flutter 实现背景高斯模糊并拦截手势
m0_37194191的博客
06-19 2616
Flutter 实现背景高斯模糊并拦截手势 在flutter中可以通过一个Widget直接实现背景模糊效果：BackdropFilter 源码介绍如下（例子被我省略了，大家可以直接查看源码的时候去看一下）： /// A widget that applies a filter to the existing painted content and then /// paints [child]. ...
flutter 中实现磨砂玻璃效果
会煮咖啡的猫咪
11-06 789
flutter 中实现磨砂玻璃效果 前言 磨砂玻璃效果是一个很酷的用户界面概念，使我们的用户界面看起来更有吸引力。它基本上是一个模糊的覆盖与减少不透明度，以区分或减少某一观点。这个功能看起来确实不错，但是它会影响应用程序的性能。 正文 那么，让我们看看如何在 Flutter 中实现磨砂玻璃效果。 编写代码 通过使用 BackdroFilter () widget 和 ImageFilter 类，可以非常容易地在 Flutter 中实现它。用于模糊图像、 container 或许多其他 widget 。它可
Flutter学习 ---- 屏幕截图和高斯模糊
weixin_33717117的博客
05-22 1446
废话不多说，先上本次要实现的效果图。 Gif格式是渣像素，实际效果要自然的多。这个项目其实是看到小池记账小程序后实现的一个类似效果，小池比较闪光的一点就是这个主界面的动态高斯模糊效果，不过小池的动态模糊效果就不如Flutter可以做的这么自然流畅了，模糊时还是有肉眼可见的卡顿的。大家可以搜索小池记账对比一下，下面进入正文。 知识点 Flutter中如何截取当前屏幕的Widget图片。 Flut...
flutter 图片跑马灯效果怎么实现
05-14
要实现 Flutter 中的图片跑马灯效果，可以使用 `ListView` 和 `PageView` 两种方式。 ## 使用 ListView 使用 `ListView` 组件来实现图片的跑马灯效果，只需要将 `ListView` 的 `scrollDirection` 属性设置为 `Axis.horizontal`，然后将列表项设置为横向排列即可。 示例代码： ```dart ListView.builder( scrollDirection: Axis.horizontal, itemCount: images.length, itemBuilder: (BuildContext context, int index) { return Container( margin: EdgeInsets.all(8.0), child: Image.network(images[index]), ); }, ); ``` ## 使用 PageView 使用 `PageView` 组件来实现图片的跑马灯效果，通过设置 `PageView` 的 `scrollDirection` 属性为 `Axis.horizontal` 来实现横向滑动，同时可以设置 `PageView` 的 `pageSnapping` 属性为 `true` 来实现滑动后自动对齐到页面边缘。 示例代码： ```dart PageView.builder( scrollDirection: Axis.horizontal, itemCount: images.length, itemBuilder: (BuildContext context, int index) { return Container( margin: EdgeInsets.all(8.0), child: Image.network(images[index]), ); }, pageSnapping: true, ); ``` 注意：这两种方式的实现方式不同，`ListView` 会根据内容的大小自动计算滚动范围，而 `PageView` 则需要指定页面数量。另外，如果需要实现循环滚动，可以将 `PageView` 的 `controller` 属性设置为 `PageController(initialPage: images.length)`，并在页面到达边缘后重新跳转到第一张图。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xq9527--

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值