Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

When learning to create something similar to frosted-glass, the first thing that comes to mind is Gaussian blur. For native Android, gaussian blur requires a lot of effort. However, The Flutter provides a BackdropFilter Gaussian blur Widget, which is really convenient.

Source code analysis

const BackdropFilter({
    Key key,
    @required this.filter,
    Widget child
})
Copy the code

Analysis of source code, must be passed filter parameter, used to build fuzzy layer effect; Just use “BackdropFilter” to create a blur layer, and use “Stack” to set the layer above or below the layer. “DecoratedBox” is also recommended.

Blur sets the blur level from 0.0 to 10.0. The larger the value is, the higher the blur level will be. When the value exceeds 10.0, the blur level will be completely invisible.

While setting opacity color, xiaocai tries the withOpacity method, which is generally between 0.0 and 1.0, and is used to set opacity of color value. You can also use the withAlpha method, which has the same effect, usually between 0 and 255. At the same time, you can also use withRed/withGreen/withBlue to directly set the basic values of the three primary colors to achieve different effects;

Widget _imageBackWid() { return Center( child: Column(mainAxisSize: MainAxisSize.min, children: <Widget>[ Row(children: <Widget>[_itemWid(color.red. WithOpacity (0.1), 4.0), _itemWid(color.white. WithOpacity (0.1), 8.0),]), Row(children: <Widget>[_itemWid(color.white. WithOpacity (0.1), 4.0), Container(width: Width * 0.5, height: mediaQuery.of (context).size. Width * 0.5, child: BackdropFilter(filter: imagefilter.blur (sigmaX: 4.0, sigmaY: 4.0), child: Container(color: Color.white. WithOpacity (0.1), child: Padding(Padding: EdgeInsets. All (14.0), child: Image.asset('images/icon_hzw01.jpg'))))) ]) ])); } Widget _itemWid(color, blur) {return Container(width: mediaquery.of (context).size. Width * 0.5, height: Mediaquery.of (context).size. Width * 0.5, child: Stack(children: <Widget>[Padding(Padding: EdgeInsets. All (14.0), child: image. asset('images/icon_hzw01.jpg')), BackdropFilter(filter: imagefilter.blur (sigmaX: blur, sigmaY: blur), child: Container(color: color)) ])); }Copy the code

Xiao CAI tried a very imperfect small case, similar to the small window to view a screenshot, the mask layer is a blur layer; The side dish is handled in a silly way, with a gaussian blur setting at the bottom and the top passing throughCanvasShow me the exact same picture. Borrow itdrawImageRealize the small window, and then control the window position through finger coordinates; No adaptation to the model, only as an imperfect small test case;

Side dish attached to the core code for reference only, if there is a better way to please guide!

class BackDropCanvas extends CustomPainter { ui.Image background; BuildContext context; Var dx = 0.0, dy = 0.0; Static const double smallScan = 200.0; BackDropCanvas(this.context, this.background, this.dx, this.dy); @override void paint(Canvas canvas, Size size) { canvas.clipPath(Path() .. MoveTo ((screen.width - smallScan) * 0.5 + dx, (screen.height - smallScan) * 0.5 + dy).. LineTo ((screen.width + smallScan) * 0.5 + dx, (screen.height - smallScan) * 0.5 + dy).. LineTo ((screen.width + smallScan) * 0.5 + dx, (screen.height + smallScan) * 0.5 + dy).. LineTo ((screen.width - smallScan) * 0.5 + dx, (screen.height + smallScan) * 0.5 + dy)); canvas.drawImage(this.background, ui.Offset.zero, Paint()); } @override bool shouldRepaint(CustomPainter oldDelegate) { return true; } } class _BackedDropPage extends State<BackedDropPage> { ui.Image _background; bool _prepDone; Var dx = 0.0, dy = 0.0; Static const double smallScan = 200.0; @override void initState() { _prepDone = false; super.initState(); _prepare(); } @override Widget build(BuildContext context) { return Scaffold( body: Stack(children: <Widget>[ Container( width: Screen.width, height: Screen.height, child: Stack(children: <Widget>[ Center(child: Image.asset('images/icon_hzw04_1.jpg'), BackdropFilter(filter: imagefilter.blur (sigmaX: 4.0, sigmaY: 4.0), child: Container(color: color.black. WithOpacity (0.2))])), _prepDone? MediaQuery.of(context).size.width, height: MediaQuery.of(context).size.height, child: CustomPaint( painter: BackDropCanvas(context, _background, dx, dy))) : Container(color: Colors.grey), GestureDetector(onPanUpdate: (d) {if (d.globalposition. dx >= smallScan * 0.5 && d.globalposition. dx <= screen.width - smallScan * 0.5) {dx = smallScan * 0.5 D.globalposition.dx-screen.width * 0.5; } if (d.globalposition. dy >= smallScan * 0.5 && d.globalposition. dy <= screen.height - smallScan * 0.5) {dy = D.g lobalPosition. Dy - Screen. Height * 0.5;} setState (() {});}))); } _prepare() { loadImage('images/icon_hzw04_1.jpg').then((image) { _background = image; }).whenComplete(() { _prepDone = true; setState(() {}); }); }}Copy the code

BackdropFilter Gaussian blur is a practical and convenient Widget that can be used flexibly in projects. Small dish to this research is not thorough enough, if have a problem, please guide a lot!

Source: Little Monk A Ce