Blur Portion of Background Flutter

Question

I am trying to blur only a certain portion of my background in Flutter but my entire background gets blurred. I have a SizedBox in the center of my screen and i would like the background portion of where the SizedBox is laid out to be blurred out.

Here is my code:

return new Container(
      decoration: new BoxDecoration(
        image: new DecorationImage(
            image: new ExactAssetImage("images/barber.jpeg"),
            fit: BoxFit.cover
        )
      ),
      child: new SizedBox(
        height: 200.0,
        width: 200.0,
        child: new BackdropFilter(
          filter: new ui.ImageFilter.blur(
            sigmaX: 5.0,
            sigmaY: 5.0,
          ),
          child: new Center(
            child: new Text("Hi"),
          ),
        ),
      ),
    );
  }

Here is what happens instead:

I am not even sure why my text is red and has a yellow underlining. What I want is the area of the sizedBox to be blurred only.

Answer 1

Your SizedBox will essentially be ignored right now, because you don't tell flutter where to render it within its parent. So you need to wrap it in a center (or other alignment).

You also need to use a ClipRect to wrap your SizedBox, so that the BackdropFilter effect is clipped to that size.

import 'dart:ui' as ui;

import 'package:flutter/material.dart';

/// This is just so that you can copy/paste this and have it run.
void main() => runApp(new MyApp());

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      home: new Container(
        decoration: new BoxDecoration(
            image: new DecorationImage(
                image: new NetworkImage(
                    "https://images.pexels.com/photos/668196/pexels-photo-668196.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"),
                fit: BoxFit.cover)),
        child: new Center(
          child: new ClipRect(
            child: new SizedBox(
              height: 200.0,
              width: 200.0,
              child: new BackdropFilter(
                filter: new ui.ImageFilter.blur(
                  sigmaX: 5.0,
                  sigmaY: 5.0,
                ),
                child: new Center(
                  child: new Text("Hi"),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

This is very tangential, but as to why the text is yellow and underlined, I believe that's the default if you don't specify a theme but I could be wrong about that.