flutter实现app整体灰色效果的方法

发布时间:2020-08-04 15:01:47 作者:小猪
来源:亿速云 阅读:188

这篇文章主要讲解了flutter实现app整体灰色效果的方法,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。

Flutter 是 Google 开源的 UI 工具包,帮助开发者通过一套代码库高效构建多平台精美应用,支持移动、Web、桌面和嵌入式平台。Flutter 开源、免费,拥有宽松的开源协议,适合商业项目。

举国哀悼, 进入各种大厂的app也可以看到主色都变成灰色的了

作为程序员我们肯定会想怎么可以实现的, 我简单研究了10分钟, flutter中只要在整体外面套一个ShaderMask, 然后修改blendMode即可

核心代码:

class MyApp extends StatelessWidget {
 // This widget is the root of your application.
 @override
 Widget build(BuildContext context) {
  return ShaderMask(
   child: OKToast(
    child: MaterialApp(
     title: 'Pick Image Demo',
     theme: ThemeData(
      primarySwatch: Colors.lime,
     ),
     home: MyHomePage(title: 'Pick Image Demo'),
    ),
   ),
   shaderCallback: (Rect bounds) {
    return ui.Gradient.linear(Offset.zero,
      Offset(bounds.width, bounds.height), [Colors.grey, Colors.grey]);
   },
   // blendMode: BlendMode.dst,
   blendMode: BlendMode.saturation,
  );
 }
}

在最外层套一个ShaderMask,
然后返回一个shader就可以了, 这里我用的是渐变的Gradient ,还有别的方式可以用

效果:

之前:

[文件]

flutter实现app整体灰色效果的方法

之后:

flutter实现app整体灰色效果的方法

看完上述内容,是不是对flutter实现app整体灰色效果的方法有进一步的了解,如果还想学习更多内容,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. Flutter如何实现进度条效果
  2. Flutter如何实现App主题切换

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

flutter app pp

上一篇:Android studio 3+版本apk安装失败怎么办

下一篇:Python如何使用扩展库pywin32实现批量文档打印

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》