Flutter ShaderMask 使用详情

喜欢ヅ旅行 2023-10-07 18:20 4阅读 0赞

> 志在巅峰的攀登者，不会陶醉在沿途的某个脚印之中，在码农的世界里，优美的应用体验，来源于程序员对细节的处理以及自我要求的境界，年轻人也是忙忙碌碌的码农中一员，每天、每周，都会留下一些脚印，就是这些创作的内容，有一种执着，就是不知为什么，如果你迷茫，不妨来瞅瞅码农的轨迹。

如果你有兴趣 你可以关注一下公众号 biglead 来获取最新的学习资料。

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

--------------------

本文章实现的效果图

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16]

核心代码

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 的应用，小编已总结在书中

*  [点击查看][Link 3]  
    ![请添加图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16]

--------------------

*  [点击查看][Link 4]

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]

[Flutter _]: https://blog.csdn.net/zl18603543572/article/details/93532582
[Link 1]: https://gitee.com/android.long/flutter-ho/blob/279b5185f50a3379c71a74fc6c51b421f59c0354/lib/src/pages/demo/demo18/demo_DateRangPage.dart
[github _]: https://github.com/zhaolongs
[Link 2]: https://study.163.com/instructor/1021406098.htm?_trace_c_p_k2_=09d88ef1f37645abadcc2b58620d4b00
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/badce373775b4e0bb310c225b2a887b0.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pep6LW355qE5bm06L275Lq6,size_20,color_FFFFFF,t_70,g_se,x_16
[Link 3]: https://item.jd.com/13495868.html
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/ed9ecf4aacc84e5cb17d5b486e431083.jpg?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5pep6LW355qE5bm06L275Lq6,size_20,color_FFFFFF,t_70,g_se,x_16
[Link 4]: https://item.jd.com/13009851.htmll
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: https://img-blog.csdnimg.cn/0b0016200df2484aa2029c1b20224fee.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pep6LW355qE5bm06L275Lq6,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center