Gaussian blur should now be used in many places. I almost died implementing it on Android, but how about implementing it in Flutter?
What is BackdropFilter and how to use it
Flutter provides BackdropFilter to achieve gaussian blur effect.
class BackdropFilter extends SingleChildRenderObjectWidget {
/// Creates a backdrop filter.
///
/// The [filter] argument must not be null.
const BackdropFilter({
Key key,
@required this.filter,
Widget child,
}) : assert(filter ! =null),
super(key: key, child: child);
/// The image filter to apply to the existing painted content before painting the child.
///
/// For example, consider using [ImageFilter.blur] to create a backdrop
/// blur effect
final ui.ImageFilter filter;
}
Copy the codeYou can see that you have to pass an ImageFilter filter, and that’s in the comment
For example, consider using [ImageFilter.blur] to create a backdrop blur effect
For example, consider using Imagefilter. blur to create a background blur effect.
Also, there is a long comment at the top of the class:
/// A widget that applies a filter to the existing painted content and then
/// paints [child].
///
/// The filter will be applied to all the area within its parent or ancestor
/// widget's clip. If there's no clip, the filter will be applied to the full
/// screen.
///
/// {@youtube 560 315 https://www.youtube.com/watch?v=dYRs7Q1vfYI}
///
/// {@tool sample}
/// If the [BackdropFilter] needs to be applied to an area that exactly matches
/// its child, wraps the [BackdropFilter] with a clip widget that clips exactly
/// to that child.
///
/// ```dart
/// Stack(
/// fit: StackFit.expand,
/// children:
[
/// Text('0' * 10000),
/// Center(
/// child: ClipRect( // <-- clips tothe 200x200 [Container] below
/// child: BackdropFilter(
/// filter: ui.ImageFilter.blur(
/ / / sigmaX: 5.0.
/ / / sigmaY: 5.0.
/ / /),
/// child: Container(
/// alignment: Alignment.center,
/ / / width: 200.0.
/ / / height: 200.0.
/// child: Text('Hello World'),
/ / /),
/ / /),
/ / /),
/ / /),
/ / /,
/ / /)
/ / / ` ` `
Copy the codeIf you do not set the size, this component will be full-screen.
Then! He put up a YouTube video! I have another Demo
Without further ado, let’s run the official Demo and see what it looks like:
I almost went blind when this string of zeros came up in front of me.
But you can see how easy it is to achieve gaussian blur using BackdropFilter.
Custom Gaussian blur components
Then we can follow the idea of Demo to encapsulate several background gaussian blur controls:
class BlurOvalWidget extends StatelessWidget {
final Widget _widget;
double _padding = 10;
BlurOvalWidget(this._widget, {double padding = 0{})if(padding ! =0) this._padding = padding;
}
@override
Widget build(BuildContext context) {
return ClipOval(
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 10,
sigmaY: 10, ), child: Container( color: Colors.white10, padding: EdgeInsets.all(_padding), child: _widget, ), ), ); }}Copy the codeWe are using stateless widgets, and we need to pass in a widget in the constructor to put it on top of a blurred background.
Our build method then returns a circular blur background with a value of 10 for horizontal and vertical blur, and the larger the value, the greater the blur effect.
Can’t just have a circular blur background, and then a rounded rectangle:
class BlurRectWidget extends StatelessWidget {
final Widget _widget;
double _padding = 10;
BlurRectWidget(this._widget, {double padding = 0{})if(padding ! =0) this._padding = padding;
}
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.symmetric(horizontal: 50),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(10)),
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 20,
sigmaY: 20, ), child: Container( color: Colors.white10, padding: EdgeInsets.all(_padding), child: _widget, ), ), ), ); }}Copy the codeThe code is basically the same, except that the ClipOval is replaced by the ClipRRect
Now let’s implement a relatively simple page with two encapsulated widgets:
The text above uses our definition of rounded rectangle, and the text below uses our definition of circle.
The code is as follows, relatively simple, is a common build page:
class _BackdropFilterPageState extends State<BackdropFilterPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('BackdropFilterPageState'),
),
body: Stack(
fit: StackFit.expand,
children: <Widget>[
Image.asset(
'images/bg.jpg',
fit: BoxFit.cover,
),
Center(
child: BlurRectWidget(
Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'BackdropFilter class',
style: TextStyle(
fontSize: 16,
color: Colors.white,
),
),
Padding(
padding: const EdgeInsets.only(top: 5.0),
child: Text(
'A widget that applies a filter to the existing painted content and then paints child.'
'The filter will be applied to all the area within its parent or ancestor widget\'s clip. If there\'s no clip, the filter will be applied to the full screen.',
style: TextStyle(fontSize: 14, color: Colors.black87),
textAlign: TextAlign.justify,
),
),
],
),
),
),
Container(
alignment: Alignment.bottomCenter,
margin: EdgeInsets.only(bottom: 150),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
BlurOvalWidget(
IconButton(
onPressed: (){
Navigator.of(context).push(MaterialPageRoute(builder: (context){
return BlurImagePage();
}));
},
icon: Icon(
Icons.favorite,
color: Colors.white,
),
iconSize: 30,
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 50.0),
child: BlurOvalWidget(
Icon(
Icons.share,
color: Colors.white,
size: 30,
),
),
),
BlurOvalWidget(
Icon(
Icons.bookmark,
color: Colors.white,
size: 30() [[() [[() [[() [() [() [() }}Copy the codeHow to use Gaussian blur as foreground
So at this point someone asks, can we only put blur in the background, not in the foreground?
Of course. Why else would I bother talking?
Take a look at the renderings:
How, the feeling that you want 🌝, have a kind of impulse that wants to fill money!
Of course, this effect is very simple to implement, just set the BackdropFilter child to a Container(), set the color (I’m using colors.white10), and place it on the Stack.
The code is as follows:
class BlurImagePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
alignment: Alignment.center,
child: Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.symmetric(horizontal: 20),
child: Image.asset(
'images/wanimal.png',
fit: BoxFit.cover,
),
),
Positioned.fill(
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 15,
sigmaY: 15,
),
child: Container(
color: Colors.white10,
),
),
),
RaisedButton(
textColor: Colors.white,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(5))),
color: Colors.orangeAccent,
child: Text('Charge to see more', style: TextStyle(fontSize: 16),), onPressed: (){}, ) ], )), ); }}Copy the codeFirst put in the widgets we want covered, then put in our blur widgets, and then let the user charge.
summary
BackdropFilter can be used not only for Gaussian blur, but also for rotations, tilts, etc.
Except we usually use Gaussian blur, which works the same way.
Learn more about Flutter at Flutter. Dev /
Giuhub: github.com/wanglu1209/…
I won’t upload the picture. 23333.
