flutter高斯模糊效果(二)

2019-08-08  本文已影响0人  Victory_886
class MaoBoLiView extends StatelessWidget {
  final String imgUrl;
  const MaoBoLiView(this.imgUrl, {Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          Image.network(
            this.imgUrl,
            fit: BoxFit.cover,
          ),
          BackdropFilter(
            filter: ui.ImageFilter.blur(sigmaY: 8, sigmaX: 8),
            child: Opacity(
              opacity: 0.7,
              child: Container(
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [
                      Colors.black12,
                      Colors.black26,
                      Colors.black38,
                      Colors.black45,
                      Colors.black87,
                    ],
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}



效果如下:

高斯模糊效果图

请关注我的简书吧,以后我会写很多flutter相关的资料。

上一篇 下一篇

猜你喜欢

热点阅读