我需要使背景中的图片模糊，并使文本清晰地覆盖，但是由于某些原因，文本也很模糊，并且由于我在两列中都有GridView，所以第二列中的最后一张图像是正确的，明文，但其余所有都不正确。
Expanded(
child: SmartRefresher(
enablePullDown: true,
header: WaterDropHeader(),
controller: _refreshController,
onRefresh: _refreshNews,
child: GridView.count(
crossAxisCount: 2,
childAspectRatio: 1.5,
crossAxisSpacing: 1.5,
mainAxisSpacing: 1,
padding:
EdgeInsets.only(left: 1, top: 0, right: 1, bottom: 60),
children: List.generate(
items.length,
(index) =>
Stack(
children: [
ClipRRect(
child:
Image.network(items[index].get_photoUrl),
borderRadius: BorderRadius.circular(30),
),
BackdropFilter(
filter: prefix0.ImageFilter.blur(
sigmaY: 1,
sigmaX: 1,
),
child: Container(
color: Colors.black.withOpacity(0)),
),
Center(
child: Text(
items[index].get_title,
style: prefix1.TextStyle(
fontSize: 12, color: Colors.white),
),
)
],
)
),
)))
最佳答案
1.you can use Stack to show picture and text in the same container.
e.g -> new BackdropFilter(
filter: new ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
child: new Container(
decoration: new BoxDecoration(color:
Colors.white.withOpacity(0.0)),
),
)
Full example ->
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Stack(
children: <Widget>[
new Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new ExactAssetImage('assets/dog.png'),
// NetworkImage("url")
fit: BoxFit.cover,
),
),
child: new BackdropFilter(
filter: new ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
child: new Container(
decoration: new BoxDecoration(color: Colors.white.withOpacity(0.0)),
),
),
),
Text("hello flutter ")
],
),
),
);
}
试试这个
Happy Coding :))
关于flutter - 图片模糊不清，文字模糊不清，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58321189/