Flutter web ImageFilter.blur effect is not resizing when changing window size in browser

user_10456190 0
Viewed 462

So I tried to add blur effect to my website, but when testing the blur doesn't resize. On large screen it works, but if starting with small screen and then going to bigger it doesn't. Am I doing something wrong here?

Image after resizing from small screen:

Image after resizing from small screen

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-web flutter
1 Answers

I've come across the same issue, which also occurs when transitioning to a new screen using the Navigator. While I don't know why this occurs, I have found a workaround. Initially I tried significantly increasing the size of the area being blurred in the hope that when you resize the window there's enough "blurred image" to expand into. However, while doing so I noticed that setting the size of the containing widget anything above 100% (e.g. 101%) simply solves this problem altogether.

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")),
    ],
  ),
user_118824130
Related