我试图复制我的设计师为应用程序所做的登录屏幕设计.
背景图像使用了softLight的blendMode,其结果是它与之混合的颜色是渐变颜色.其次,实际上有两层不同的渐变(一个紫色渐变,一个蓝色渐变)
原始图片:
最终的渐变图像
现在我尝试使用colorBlendMode,例如
Image.asset(
'assets/pioneer-party.jpg',
fit: BoxFit.cover,
color: Color(0xff0d69ff).withOpacity(1.0),
colorBlendMode: BlendMode.softLight,
),
Run Code Online (Sandbox Code Playgroud)
问题是颜色属性只需要一种颜色.
然后我尝试了BoxDecoration,例如
DecoratedBox(
decoration: new BoxDecoration(
color: const Color(0xff7c94b6),
image: new DecorationImage(
fit: BoxFit.cover,
colorFilter: new ColorFilter.mode(Colors.purple.withOpacity(1.0), BlendMode.softLight),
image: new NetworkImage(
'http://www.allwhitebackground.com/images/2/2582-190x190.jpg',
),
),
),
),
Run Code Online (Sandbox Code Playgroud)
这仍然让我遇到同样的问题.然后,我尝试单独堆叠每个图层,然后使用渐变来使其看起来接近设计,例如
Image.asset(
'assets/pioneer-party.jpg',
fit: BoxFit.cover,
color: Color(0xff0d69ff).withOpacity(1.0),
colorBlendMode: BlendMode.softLight,
),
DecoratedBox(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: FractionalOffset.topCenter,
end: FractionalOffset.bottomCenter,
colors: [
Color(0xff0d69ff).withOpacity(0.0),
Color(0xff0069ff).withOpacity(0.8),
],
),
),
),
DecoratedBox(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: FractionalOffset.topLeft,
end: FractionalOffset.bottomRight,
colors: [
Color(0xff692eff).withOpacity(0.8),
Color(0xff642cf4).withOpacity(0.8), …Run Code Online (Sandbox Code Playgroud)