Blur image with text overlaid in flutter - flutter

Question

I need to blur the pictures in the background, and make the text clear overlay, but for some reason the text is also blurry, and, as I have the GridView in two columns, then the last image in the second column is correct, with clear text, but all the rest are incorrect.
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),
),
)
],
)
),
)))

Answer 1

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 ")
],
),
),
);
}
try this
Happy Coding :))

Answer 2

Result:
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: <Widget>[
ClipRRect(
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image:
NetworkImage(items[index].get_photoUrl),
),
),
child: new BackdropFilter(
filter: new ImageFilter.blur(
sigmaX: 1.5, sigmaY: 1.5),
child: Container(
color: Colors.white.withOpacity(0.0)),
),
),
borderRadius: BorderRadius.circular(30),
),
Center(child: Text(items[index].get_title))
],
),
),
)))