使BoxDecoration图像变淡/透明
问题内容:
我有以下代码片段,我想使图像褪色
,以免干扰容器中的其他物品。有没有一个
过滤器可以做到这一点?
child: new Card(
child: new Container(
decoration: new BoxDecoration(
color: const Color(0xff7c94b6),
image: new DecorationImage(
image: new ExactAssetImage('lib/images/pic1.jpg'),
)
)
)
)
问题答案:
你可以给你DecorationImage
一个ColorFilter
使背景图像灰度(用saturation
彩色滤光片)或半透明(使用
dstATop彩色滤光片)。
屏幕截图
此示例的代码如下。
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new HomePage(),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) => new Scaffold(
appBar: new AppBar(
title: new Text('Grey Example'),
),
body: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
new Card(
child: new Container(
child: new Text(
'Hello world',
style: Theme.of(context).textTheme.display4
),
decoration: new BoxDecoration(
color: const Color(0xff7c94b6),
image: new DecorationImage(
fit: BoxFit.cover,
colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.2), BlendMode.dstATop),
image: new NetworkImage(
'http://www.allwhitebackground.com/images/2/2582-190x190.jpg',
),
),
),
),
),
],
),
);
}
该Opacity
插件是另一种选择。
您也可以将效果预先应用到资产。