专栏首页FlutterFlutter Widgets 之 ShaderMask
原创

Flutter Widgets 之 ShaderMask

ShaderMask可以让我们将Shader用于任何一个控件上,比如在Text上使用渐变就可以使用ShaderMask来实现:

ShaderMask(

      shaderCallback: (Rect bounds) {

        return RadialGradient(

          center: Alignment.topLeft,

          radius: 1.0,

          colors: <Color>[Colors.yellow, Colors.deepOrange],

          tileMode: TileMode.mirror,

        ).createShader(bounds);

      },

      blendMode: BlendMode.srcATop,

      child: Text('老孟,一枚有态度的程序员',style: TextStyle(fontSize: 30),),

    )

效果:

shaderCallback 需要返回一个Shader对象,可以通过渐变相关类直接生成Shader:

RadialGradient(...).createShader(rect)

blendMode属性是融合方式,child是目标图像(dst),Shader是源图像(src),融合方式介绍:

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 《Flutter 动画系列一》25种动画组件超全总结

    任何程序的动画原理都是一样的,即:视觉暂留,视觉暂留又叫视觉暂停,人眼在观察景物时,光信号传入大脑神经,需经过一段短暂的时间,光的作用结束后,视觉形象并不立即消...

    老孟Flutter
  • Flutter Widgets 之 BottomNavigationBar

    BottomNavigationBar 和 BottomNavigationBarItem配合Scaffold控件使用可以实现底部导航效果,类似于微信底部的导航...

    老孟Flutter
  • Flutter “孔雀开屏”动画效果

    老孟导读:今天分享一个类似“孔雀开屏”的动画效果,打开新的页面时,新的页面从屏幕右上角以圆形逐渐打开到全屏。

    老孟Flutter
  • jsbin 4.1版本的本地搭建

    jsbin是一种开放源码的协同Web开发调试工具(http://jsbin.com/?html,output)。其优点是可以快速的提供前端需要的各种开发环境,快...

    企鹅号小编
  • WordPress后台添加登录算术验证码

    给网站登录添加验证码功能在一定程度上可以有效减少机器人软件暴力破解暴力登录,对于wordpress程序可以有很多相关插件可以实现,不过这么简单的功能其实没有必要...

    空木白博客
  • 【玩转腾讯云】Python安装第三方库/包的一些操作

    最近在腾讯云上进行Python装包比较频繁,又碰上一些特殊情况,现就此进行简单总结。

    ZNing
  • 企业大数据价值你只发掘了1%!

    管理学上对企业定义为“以赢利为目的的组织”—这句话会在本书中多次重复以示强调—意思是通过充分利用公司的内外部资源,将资源转换,实现增值,从而赢利。就像一个黑匣子...

    明悦数据
  • 『中级篇』docker企业版本地安装之UCP(57)

    PS:详细不介绍,就是一个图形化的,没啥介绍的。下次在阿里平台是建立下用云端玩玩。

    IT故事会
  • 基于Termux打造Android手机渗透神器

    Termux是一款开源且不需要root,运行在Android终端上极其强大的linux模拟器,支持apt管理软件包,完美支持python,ruby,go,nod...

    HACK学习
  • Node 架构从三层到 N 层,实现代码重用和解耦

    三层架构通常意义上是将整个业务应用划分为:控制层、业务逻辑层以及数据访问层,三层架构在 Java Web 项目中很常见,那么这种架构能否运用在 Node 项目中...

    serena

扫码关注云+社区

领取腾讯云代金券