模糊图像，文本在颤动中重叠

Question

我需要模糊背景中的图片，并使文字清晰叠加，但由于某种原因，文字也模糊了，而且，由于我的 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),
                                  ),
                                )
                              ],
                            )
                    ),
                  )))

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 ")
      ],
     ),
    ),
  );
 }

试试这个

  Happy Coding :))

Answer 2

结果：

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))
                        ],
                      ),
                    ),
                  )))

模糊图像，文本在颤动中重叠

Blur image with text overlaid in flutter

blurry

dart

flutter