Search code examples
fluttertextwidgetblur

FLUTTER: How make a blurry text?

I tried to make a blurry text using backdropfilter like this:

BackdropFilter( filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5), child: Text('Hello FLUTTTTER') ),

I have a problem, the text is not blur but I did like in this video: https://www.youtube.com/watch?v=dYRs7Q1vfYI

Solution

  • From the video:

    Note that the child won't be affected by the filter, only those widgets beneath it.

    So you'd want to use a Stack:

    Stack(
  children: <Widget>[
    Center(child: Text('Hello FLUTTTTER')),
    BackdropFilter(
      filter: ImageFilter.blur(
        sigmaX: 5,
        sigmaY: 5,
      ),
      child: Container(
        color: Colors.black.withOpacity(0.5),
      ),
    ),
  ],
);