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.

Possible duplicate of [How do I do the "frosted glass" effect in Flutter?](https://stackoverflow.com/questions/43550853/how-do-i-do-the-frosted-glass-effect-in-flutter) — creativecreatorormaybenot, May 03 '18 at 17:25
for the underlined part make sure you have an instance of theme or you can simply wrap your text around Material Widget originally answered here. https://stackoverflow.com/questions/47114639/yellow-lines-under-text-widgets-in-flutter — Mahesh Jamdade, Mar 04 '19 at 06:09

score 15 · Accepted Answer · answered May 03 '18 at 21:27

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.

score 0 · Answer 2 · edited Feb 03 '20 at 04:06

0

to delete the yellow lines, you need to wrap the text in a Material Widget

BackdropFilter(
  filter: ImageFilter.blur(
      sigmaX: 4.0,
      sigmaY: 4.0,
      ),
        child: new Center(
          child: Center(
            child: Material (
                child: Text("  "),
              color: Colors.blue.withOpacity(0.0),
            )
          ),
        ),
      ),

edited Feb 03 '20 at 04:06

Simas Joneliunas

2,890
20
28
35

answered Feb 03 '20 at 01:00

Sebastian Alberto Bordi

105
1
2
5

Blur Portion of Background Flutter

2 Answers2