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灰度内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Android DrawerLayout布局与NavigationView导航菜单应用
这篇文章主要介绍了Android DrawerLayout抽屉布局与NavigationView导航菜单应用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧2023-01-01Kotlin的Collection与Sequence操作异同点详解
这篇文章主要介绍了Kotlin的Collection与Sequence操作异同点详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-10-10Android Studio 恢复小窗口停靠模式(Docked Mode)
这篇文章主要介绍了Android Studio 恢复小窗口停靠模式(Docked Mode),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-04-04Android 中 GridView嵌套在ScrollView里只有一行的解决方法
本文给大家带来两种有关Android 中 GridView嵌套在ScrollView里只有一行的解决方法,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧2016-10-10详解Android studio 动态fragment的用法
这篇文章主要介绍了Android studio 动态fragment的用法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-10-10
最新评论