Flutter ShaderMask 使用详情

• Flutter 从入门 到精通系列文章在这里
• 当然也必需是要有源码的 在这里了
• github 有点慢 不妨来看看码云的源码吧
• 系列学习教程在这里

本文章实现的效果图

核心代码

ShaderMask(
   blendMode: BlendMode.srcATop,
       shaderCallback: (Rect bounds) {
         return const LinearGradient(
           colors: [Colors.orange, Colors.yellow],
         ).createShader(bounds);
       },
       child: Image.asset(
         'assets/images/qq_icon.png',
         width: 40,
       ),
    )

页面代码

class Exam220HomePage extends StatefulWidget {
  const Exam220HomePage({Key? key}) : super(key: key);

  @override
  State<Exam220HomePage> createState() => _Exam220HomePageState();
}

class _Exam220HomePageState extends State<Exam220HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //页面的主内容区
      body: Center(
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Image.asset(
              'assets/images/qq_icon.png',
              width: 40,
            ),
            SizedBox(
              width: 0100,
            ),

            ///代码清单2-28
            ShaderMask(
              blendMode: BlendMode.srcATop,
              shaderCallback: (Rect bounds) {
                return const LinearGradient(
                  colors: [Colors.orange, Colors.yellow],
                ).createShader(bounds);
              },
              child: Image.asset(
                'assets/images/qq_icon.png',
                width: 40,
              ),
            )
          ],
        ),
      ),
    );
  }
}

如果你迷茫 不妨来此 每日分享 先积累着再说
更多Widget 的应用，小编已总结在书中

• 手机点击查看 # 电脑点击查看
  

• 手机点击查看 # 电脑点击查看