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)，融合方式介紹：

• 英文官方介紹
• 中文 不錯的翻譯

更多相關閱讀：

• Flutter系列文章總覽
• Flutter Widgets 之 Expanded和Flexible
• Flutter Widgets 之 AnimatedList
• Flutter Widgets 之 SliverAppBar

如果這篇文章有幫助到您，希望您來個“贊”並關注我的公眾號，非常謝謝。