在浏览器中更改窗口大小时，Flutter web ImageFilter.blur 效果未调整大小答案

【问题标题】：Flutter web ImageFilter.blur effect is not resizing when changing window size in browser在浏览器中更改窗口大小时，Flutter web ImageFilter.blur 效果未调整大小
【发布时间】：2020-07-06 06:58:11
【问题描述】：

所以我尝试向我的网站添加模糊效果，但是在测试模糊时不会调整大小。在大屏幕上它可以工作，但如果从小屏幕开始，然后再变大，它就不行了。我在这里做错了吗？

从小屏幕调整大小后的图像：

import 'dart:ui';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        image: DecorationImage(
          image: ExactAssetImage(
            'assets/background2.jpg',
          ),
          fit: BoxFit.cover,
        ),
      ),
      child: BackdropFilter(
        filter: ImageFilter.blur(
          sigmaX: 2,
          sigmaY: 2,
        ),
        child: Container(
          decoration: BoxDecoration(color: Colors.white.withOpacity(0.0)),
        ),
      ),
    );
  }
}

【问题讨论】：

标签： flutter flutter-web

【解决方案1】：

我遇到了同样的问题，在使用导航器转换到新屏幕时也会出现这种问题。虽然我不知道为什么会发生这种情况，但我找到了一种解决方法。最初，我尝试显着增加被模糊区域的大小，希望在调整窗口大小时有足够的“模糊图像”可以展开。但是，在这样做的同时，我注意到将包含小部件的大小设置为 100% 以上（例如 101%）可以完全解决这个问题。

Stack(
    children: [
      Positioned(
        width: screenSize.width * 1.01,
        height: screenSize.height * 1.01,
        child: Container(
            width: screenSize.width,
            height: screenSize.height,decoration: BoxDecoration(
            image: DecorationImage(
              image: NetworkImage("your image url"),
              fit: BoxFit.cover,
            ),
          ),
          child: BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 80.0, sigmaY: 80.0),
            child: Container(
              width: screenSize.width,
              height: screenSize.height,decoration: BoxDecoration(color: Colors.white.withOpacity(0.0)),
            ),
          ),
        ),
      ),
     Container(child: Text("Non blurry widgets go here")),
    ],
  ),

【讨论】：