时间戳

首页 > 解决方案 > 我无法制作带有清晰边框的模糊项目

flutter - 我无法制作带有清晰边框的模糊项目

问题描述

我有类似以下的问题： 链接

我一直在寻找几个小时，还没有找到一种方法来实现它。

这是代码：

import 'dart:ui';

import 'package:flutter/material.dart';

void main() async {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:
      Scaffold(body: FractionallySizedBox(
          widthFactor: 1,
          heightFactor: 0.5,
          child: Stack(
          fit: StackFit.expand,
          children: <Widget>[
            Image.network("http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Aatrox_0.jpg", fit: BoxFit.cover,),
            ClipRect(
              child: Container(
                child: BackdropFilter(
                  filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
                  child: Container(
                    decoration: BoxDecoration(color: Colors.white.withOpacity(0)),
                  )
                )
              ),
            )
          ],
        ),
      ),)
    );
  }
}

代码结果 和 期望结果

如果屏幕上的图像已满，我可以看到它看起来很正常，但我想让它看起来即使它没有满。

我怎样才能做到这一点？谢谢阅读。

标签： flutter

解决方案

使用堆栈小部件。这是一个例子

Stack(
    alignment: Alignment.center,
    children: <Widget>[
      // background profilePic start
      Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.only(
            topRight: const Radius.circular(15),
            topLeft: const Radius.circular(15),
          ),
          image: DecorationImage(
            fit: BoxFit.cover,
            image: AssetImage(
              "assets/images/profileDummy.png",
            ),
          ),
        ),
      ),

      // blur filter start
      Container(
        child: ClipRRect(
          borderRadius: BorderRadius.only(
            topRight: const Radius.circular(15),
            topLeft: const Radius.circular(15),
          ),
          child: BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0),
            child: Container(
              decoration: BoxDecoration(
                color: Colors.black.withOpacity(0.15),
              ),
            ),
          ),
        ),
      ),
      // blur filter end
      // background profilePic end
    ],
  )

推荐阅读