我有以下代码片段,我想使图像褪色,以免它干扰容器中的其他项目.
是否有可以实现此目的的过滤器？
是否有可以实现此目的的过滤器？
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,使背景图像变为灰色(使用饱和度滤色器)或半透明(使用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',],);
}
不透明度小部件是另一种选择.
您也可以预先将效果应用于资产.
