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

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