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灰度内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Flutter下载更新App的方法示例

    1. 说明 iOS 和Android 更新是完全不一样的. iOS 只能跳转到 AppStore,比较好实现 Android则需要下载apk包,由于Android机型较多,这里我们用 dart 连接第三方(这里)的原生 android 下载库. 更新界面和下载更新分开处理的. iOS 没得下载进度这一说,Android 则有. 2. 代码 2.1 iOS 直接采用url_launcher就可以了 if (Platform.isIOS) { final url = "https://itunes.

  • 如何使用Flutter开发一款电影APP详解

    如何使用Flutter开发一款电影APP详解

    前言 使用Flutter开发一款App是一件非常愉快的事情,其出色的性能.跨多端以及数量众多的原生组件都是我们选择Flutter的理由!今天我们就来使用Flutter开发一款电影类的App,先看下App的截图. 从main.dart开始 在Flutter里main.dart是应用开始的地方: import 'package:flutter/material.dart'; import 'package:movie/utils/router.dart' as router; void main()

  • flutter BottomAppBar实现不规则底部导航栏

    flutter BottomAppBar实现不规则底部导航栏

    本文实例为大家分享了flutter实现不规则底部导航栏的具体代码,供大家参考,具体内容如下 实现底部导航栏并点击切换页面可简述为有三种方式 TabBar + TabBarView BottomNavigationBar + BottomNavigationBarItem 自定义 BottomAppBar 在这里 使用 BottomAppBar 来实现 /** * 有状态StatefulWidget * 继承于 StatefulWidget,通过 State 的 build 方法去构建控件 */

  • Flutter 实现整个App变为灰色的方法示例

    在Flutter中实现整个App变为灰色是非常简单的,只需要在最外层的控件上包裹ColorFiltered,用法如下: @override Widget build(BuildContext context) { return ColorFiltered( colorFilter: ColorFilter.mode(Colors.grey, BlendMode.color), child: Scaffold( appBar: _appBar, body: IndexedStack( index:

  • Flutter 滚动监听及实战appBar滚动渐变的实现

    介绍 在 Flutter 中滚动监听一般可以采用两种方式来实现,分别是ScrollController和NotificationListener这两种方式. ScrollController介绍 ScrollController 介绍一下ScrollController常用的属性和方法: offset:可滚动组件当前的滚动位置. jumpTo(double offset)跳转到指定位置,offset为滚动偏移量. animateTo(double offset,@required Duratio

  • flutter 怎么实现app整体灰色效果

    Flutter 是 Google 开源的 UI 工具包,帮助开发者通过一套代码库高效构建多平台精美应用,支持移动.Web.桌面和嵌入式平台.Flutter 开源.免费,拥有宽松的开源协议,适合商业项目. 举国哀悼, 进入各种大厂的app也可以看到主色都变成灰色的了 作为程序员我们肯定会想怎么可以实现的, 我简单研究了10分钟, flutter中只要在整体外面套一个ShaderMask, 然后修改blendMode即可 核心代码: class MyApp extends StatelessWidg

  • Flutter将整个App变为灰色的简单实现方法

    Flutter将整个App变为灰色的简单实现方法

    目录 前言 Flutter中实现整个App变为灰色 ColorFiltered(颜色过滤器) 追踪源码 总结 前言 为了让更多的人永远记住12月13日,各大厂都在这一天将应用变灰了. 那么接下来我们看一下Flutter是如何实现的. Flutter中实现整个App变为灰色 在Flutter中实现整个App变为灰色是非常简单的, 只需要在最外层的控件上包裹ColorFiltered,用法如下: ColorFiltered(颜色过滤器) 看名字就知道是增加颜色滤镜效果的, ColorFiltered

  • 如何利用Flutter仿写微信搜索页效果

    如何利用Flutter仿写微信搜索页效果

    目录 效果图 顶部搜索栏 SearchBar 实现细节 左边搜索框实现 右边取消按钮实现 内容的检索 内容的传递 内容的检索 搜索列表实现 总结 效果图 如上图所示,我们用 Flutter 来仿写搜索页面,这里聊天首页点击搜索栏会跳转到搜索页,搜索页面包含顶部搜索框跟底部 ListView,在搜索框内我们输入搜索词会检索聊天列表模型中 name 属性中包含搜索词的模型,并在底部列表中展示,且搜索词高亮显示.下面我们分别来介绍下这些功能的实现. 顶部搜索栏 class SearchBar exte

  • 如何利用Flutter实现酷狗流畅Tabbar效果

    如何利用Flutter实现酷狗流畅Tabbar效果

    目录 前言 效果图 分析效果 开发思路 FlutterTabbar解析源码 实现步骤 业务使用 写在最后 实现源码 前言 在2021年末,酷狗发布了最新版11.0.0版本,这是一次重大的UI重构,更新完打开着实让我耳目一新.在原有风格上,整个App变得更加清爽,流畅.其中Tabbar的风格让我非常感兴趣,如果用Flutter来实现,或许是一个很有趣的事情. 效果图 分析效果 研究酷狗Tabbar的动画可以发现,默认状态下在当前Tab的中心处展示圆点,滑动时的效果拆分成两个以下部分: 从单个Tab

  • JS模拟的腾讯微博app撕纸效果的实例代码

    腾讯微博app撕纸效果 body{margin:0;padding:0;font-size:14px;line-height:22px;} .content,content_mack{width:300px;height:400px;overflow:hidden;font-size:12px;line-height:20px;background:#f2eee3;cursor:pointer;} .content_mack{position:absolute;top:0px;left:0;}

  • Flutter实现可循环轮播图效果

    效果图 壹.控件分解图 贰.代码实现 贰点壹.构建根布局 新建AdPictureWidget继承自StatefulWidget,新建_AdPictureWidgetState类继承自State<AdPictureWidget>,根布局为Stack,代码如下: class AdPictureWidget extends StatefulWidget { @override _AdPictureWidgetState createState() => _AdPictureWidgetStat

  • Flutter 实现酷炫的3D效果示例代码

    此文讲解3个酷炫的3D动画效果. 下面是要实现的效果: Flutter 中3D效果是通过 Transform 组件实现的,没有变换效果的实现: class TransformDemo extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('3D 变换Demo'), ), body: Container( alignm

  • 利用Flutter实现“孔雀开屏”的动画效果

    前言 今天分享一个类似"孔雀开屏"的动画效果,打开新的页面时,新的页面从屏幕右上角以圆形逐渐打开到全屏. 先来看下具体的效果 不知道这种效果大家叫什么名字?如果有更合适的名字可以在评论处告诉我,下面来说下如何实现此效果. 在使用Navigator进入一个新的页面时,通常用法如下: Navigator.of(context).push(MaterialPageRoute( builder: (context){ return PageB(); } )); MaterialPageRout

  • iOS整个APP实现灰色主题的示例代码

    iOS整个APP实现灰色主题的示例代码

    灰色主题 背景 在一些哀悼日,清明节的时候app会实现一些灰色主题功能,部分app需求是tab首页实现灰色模式就可以,但一些需求是直接整个app都变为灰色模. 普通UI界面 web页面 xib界面 attributeText加载的htmlString页面 attachment挂件页面 实现方式 基本的实现方式1,普通页面用hook颜色方式2.web页面用注入灰色js实现方式 图片变灰 重新绘制图片变为灰色代码实现 //image类别 - (UIImage *)getGrayImage { con

随机推荐