Blur image with text overlaid in 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 :))