CODEWITHSUNDEEP
fluttertextwidgetblur
luc
luc

Reputation: 1539

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

Upvotes: 3

Views: 7932

Answers (3)

linxie
linxie

Reputation: 2167

if you wanna blur the text or the whole container, use the ImageFiltered widget to wrap your widget,

ImageFiltered(
    imageFilter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
    child: Container(child: Text('your text')),
  )

Container(
child: ImageFiltered(
    imageFilter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
    child: Text('your text'),
  ))

if you wanna blur the container except it's content, use BackdropFilter to wrap your text widget

Container(
   child: BackdropFilter(
    imageFilter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
    child: Text('your text'),
  ))

Upvotes: 15

YAO ALEX DIDIER AKOUA
YAO ALEX DIDIER AKOUA

Reputation: 249

CustomPaint(
              foregroundPainter: RectBlurPainter(
                   rectWidth: 15,
                   blurSigma: 3.5,
                   ),
              child: Text("my blur text"),
            )

My RectBlurPainter is this:

class RectBlurPainter extends CustomPainter {
  double rectWidth;
  double blurSigma;
  RectBlurPainter({@required this.rectWidth, this.blurSigma});

  @override
  void paint(Canvas canvas, Size size) {
   // This is the flutter_screenutil library
   ScreenUtil.init(width: 750.0, height: 1334.0, allowFontScaling: true);

   Paint paint = new Paint()
    ..color = OurColor.green
    ..strokeCap = StrokeCap.square
    ..style = PaintingStyle.stroke
    ..strokeWidth = rectWidth
    ..maskFilter = MaskFilter.blur(BlurStyle.normal, blurSigma);
    Offset center = new Offset(0, 6);

   canvas.drawRect(center & Size(180.w, 5), paint);
 }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
   return true;
  }
 }

Upvotes: 0

Jordan Davies
Jordan Davies

Reputation: 10881

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),
      ),
    ),
  ],
);

Upvotes: -1

Related Questions