文章详情

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

请输入下面的图形验证码

提交验证

短信预约提醒成功

Flutter将整个App变为灰色的简单实现方法

2024-04-02 19:55

关注

前言

为了让更多的人永远记住12月13日,各大厂都在这一天将应用变灰了。

image-20211213081824100

那么接下来我们看一下Flutter是如何实现的。

Flutter中实现整个App变为灰色

在Flutter中实现整个App变为灰色是非常简单的,

只需要在最外层的控件上包裹ColorFiltered,用法如下:

ColorFiltered(颜色过滤器)

看名字就知道是增加颜色滤镜效果的,


ColorFiltered(
      colorFilter:ColorFilter.mode(Colors.grey, BlendMode.color),
      child: child,
    );

将上面代码放到全局根widget下,即可设置全部页面颜色变灰

通过colorFilter可设置某种颜色过滤,比如变灰设置灰色即可,以及颜色混合模式
ColorFiltered 小部件继承SingleChildRenderObjectWidget,因此会提供一个child子布局,这里可以放置想要过滤颜色的页面;

最终我们就合成一张这样带滤镜效果

追踪源码

我我们持续追踪源码到 RenderImage 类中,可以看到最终也是创建了一个 ColorFilter


class ColorFiltered extends SingleChildRenderObjectWidget {
  /// Creates a widget that applies a [ColorFilter] to its child.
  ///
  /// The [colorFilter] must not be null.
  const ColorFiltered({required this.colorFilter, Widget? child, Key? key})
      : assert(colorFilter != null),
        super(key: key, child: child);

  /// The color filter to apply to the child of this widget.
  final ColorFilter colorFilter;

  @override
  RenderObject createRenderObject(BuildContext context) => _ColorFilterRenderObject(colorFilter);

  @override
  void updateRenderObject(BuildContext context, RenderObject renderObject) {
    (renderObject as _ColorFilterRenderObject).colorFilter = colorFilter;
  }

  @override
  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
    super.debugFillProperties(properties);
    properties.add(DiagnosticsProperty<ColorFilter>('colorFilter', colorFilter));
  }
}

设置前

image-20211213081150413

设置后

image-20211213081202975

功能就这样实现了,功能简单,意义不凡。

附:ColorFiltered还可以实现类似“滤镜”效果,让一张图片和color进行融合:


Row(

      children: <Widget>[

        Expanded(

          child: Image.asset('images/1.png'),

        ),

        Expanded(

            child: ColorFiltered(

          colorFilter: ColorFilter.mode(Colors.pink[200], BlendMode.modulate),

          child: Image.asset('images/1.png'),

        ))

      ],

    )

总结

到此这篇关于Flutter将整个App变为灰色的文章就介绍到这了,更多相关Flutter App变为灰色内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

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

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

软考中级精品资料免费领

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

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

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

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

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

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

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