文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

flutter实现磨砂玻璃效果实例详解

2022-11-13 19:29

关注

flutter 中实现磨砂玻璃效果

磨砂玻璃效果是一个很酷的用户界面概念,使我们的用户界面看起来更有吸引力。它基本上是一个模糊的覆盖与减少不透明度,以区分或减少某一观点。这个功能看起来确实不错,但是它会影响应用程序的性能。

那么,让我们看看如何在 Flutter 中实现磨砂玻璃效果。

编写代码

通过使用 BackdroFilter () widget 和 ImageFilter 类,可以非常容易地在 Flutter 中实现它。用于模糊图像、 container 或许多其他 widget 。它可以在 iOS 和 android 上运行。它用于突出需要更多焦点的内容,模糊需要较少焦点的内容。

创建一个 container 并使用 BackdroFilter 和 ClipRect 将其包装起来。现在添加背景滤镜的属性: ImageFilter.素,然后添加 sigmaX,sigmaY。SigmaX 和 sigmaY 越高,模糊度越高。

import 'dart:ui';
import 'package:flutter/material.dart';
class FrostedGlassLookDemo extends StatefulWidget {
  const FrostedGlassLookDemo({super.key});
  @override
  @override_FrostedGlassLookDemoState
  createState() => _FrostedGlassLookDemoState();
}
class _FrostedGlassLookDemoState extends State<FrostedGlassLookDemo> {
  @override
  @overrideWidget
  build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        elevation: 1,
        centerTitle: true,
        title: const Text("Frosted Glass Look Demo"),
        backgroundColor: Colors.blueGrey,
      ),
      body: Stack(
        children: [
          Center(
              child: Container(
            height: MediaQuery.of(context).size.height / 3,
            width: MediaQuery.of(context).size.width / 1,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20.0),
            ),
            child: const FlutterLogo(),
          )),
          Center(
            child: ClipRect(
              child: BackdropFilter(
                filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
                child: Container(
                  height: MediaQuery.of(context).size.height / 3,
                  width: MediaQuery.of(context).size.width / 1.5,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(20.0),
                      color: Colors.grey.shade200.withOpacity(0.5)),
                  child: const Center(
                      child: Text(
                    "Glass Effect Container",
                    style: TextStyle(fontSize: 15),
                  )),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

输出效果

注意: 我将这个 widget 块堆叠在一个 Image 上方,以查看工作效果。我用 Flutter 的标志作为一个图像。现在,我们可以看到我们的图像模糊效果。

以上就是flutter实现磨砂玻璃效果实例详解的详细内容,更多关于flutter 磨砂玻璃的资料请关注编程网其它相关文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯