How do I blur a widget in Flutter
7,190
Solution 1
You can create a Stack like:
First child: What you want to blur (in your case: Container)
Second child: BackdropFilter
And within the second child (BackdropFilter), there is the parameter child, which is used to insert a widget into the tree, that will not be affected by the BackdropFilter.
In your BackdropFilter, set filter: ImageFilter.blur(5.0, 5.0)
5.0 is amount of blur you wish.
Solution 2
Here is sample code:
import 'dart:ui' as ui;
Widget backdropFilterExample(BuildContext context, Widget child) {
return Stack(
fit: StackFit.expand,
children: <Widget>[
child,
BackdropFilter(
filter: ui.ImageFilter.blur(
sigmaX: 8.0,
sigmaY: 8.0,
),
child: Container(
color: Colors.transparent,
),
)
],
);
}
Google also has sample code on:
https://api.flutter.dev/flutter/widgets/BackdropFilter-class.html
Solution 3
I use BackdropFilter
and Position.fill
examples:
import 'dart:ui' as ui;
Widget buildBlur({@required BuildContext context, @required Widget child}) {
return Stack(
children: <Widget>[
child, // Your child
Positioned.fill(
child: BackdropFilter(
filter: ui.ImageFilter.blur(
sigmaX: 1.0,
sigmaY: 1.0,
),
child: Center(
child: XedProgress.indicator(), // replace your loading widget
),
),
)
],
);
}
Solution 4
blur filter widget
import 'dart:ui';
import 'package:flutter/material.dart';
class BlurFilter extends StatelessWidget {
final Widget child;
final double sigmaX;
final double sigmaY;
BlurFilter({this.child, this.sigmaX = 5.0, this.sigmaY = 5.0});
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
child,
ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: sigmaX,
sigmaY: sigmaY,
),
child: Opacity(
opacity: 0.01,
child: child,
),
),
),
],
);
}
}
usage
import 'package:flutter/material.dart';
import 'package:my_app/widgets/blur_filter.dart';
class WidgetToImage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('blur filter'),
),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Text('123'),
Text('999'),
BlurFilter(
child: Text('1000'),
),
Text('888'),
],
),
),
);
}
}
Solution 5
We need 3 things to make blur widget
- 1.Stack
- 2.BackdropFilter
- 3.ImageFilter.blur
Stack( children: <Widget>[ Container(child: Text( "Hello")), // First child BlurryEffect(0.5,0.1,Colors.grey.shade200) // Second Child ], )
and,
class BlurryEffect extends StatelessWidget {
final double opacity;
final double blurry;
final Color shade;
BlurryEffect(this.opacity,this.blurry,this.shade);
@override Widget build(BuildContext context) {
return Container(
child: ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX:blurry, sigmaY:blurry),
child: Container(
width: double.infinity,
height: double.infinity,
decoration: BoxDecoration(color: shade.withOpacity(opacity)),
),
),
),
);
}
}
![Pooja Patil](https://i.stack.imgur.com/BdFcr.jpg?s=256&g=1)
Author by
Pooja Patil
Updated on December 03, 2022Comments
-
Pooja Patil over 1 year
I need to blur a widget, for example, a simple Container. How do I blur it?
new Container( child: new Text('hello I am here'), height: 100.0, width: 100.0, color: Colors.red, )
Consider the above Container.