Preface:

Hello, everyone. Since I couldn’t sleep at night, I got up and wrote a small demo (the implementation of the frozed glass effect of Flutter) for everyone. I hope it can help everyone to learn

Preparations:

Need to install the flutter development environment: everyone can look at the previous tutorial: 1 win flutter system development environment installed tutorial: www.jianshu.com/p/152447bc8… 2 MAC flutter development environment installed tutorial: www.jianshu.com/p/bad2c35b4…

Effect:

Concrete implementation:

First we load an image component with a constrained box component to display the bottom image

ConstrainedBox(constraints: const BoxConstraints. Expand (), child: Image.network("http://yanxuan.nosdn.127.net/65091eebc48899298171c2eb6696fe27.jpg"), ),Copy the code

We then used the ClipRect component to implement the frosted glass effect and nested the BackdropFilter component inside the ClipRect component to handle the background filter effect

Blur (filter: ImageFilter. Blur (sigmaX: 5.0,sigmaY: 5.0), child: Opacity(Opacity: 0.2, child: Container(width: 500.0, height: 700.0, decoration: BoxDecoration) Color.grey.shade200), child: Center(child: Text), style:TextStyle(fontSize: 40,color: Colors.black),), ), ), ), ), ),Copy the code

And then we set the sigma value of the filter property in the BackdropFilter component to 5.0 on the x axis and 5.0 on the y axis depending on the UI effect, Setting Opacity effect on frosted glass: 0.2, the value of which is a decimal number, is used in our code according to the UI effect. Then, we nest a Container in Opacity to set the width and height of the displayed area and set the color of decoration

decoration: BoxDecoration(
                color: Colors.grey.shade200
            ),
Copy the code

This way we achieve the frosted glass effect of the text displayed on the Container box component by adding a Center display component to the Container box component and nesting a Text component. To this flutter simple frosted glass effect we are done. Frosted glass display widget

import 'package:flutter/material.dart'; import 'dart:ui'; /** ** Founder: xuqing * Created on October 8, 2020 * */ class FrostedGlassDemo extends StatelessWidget {FrostedGlassDemo({Key Key}) : super(Key: Key); @override Widget build(BuildContext context) { // TODO: implement build return Scaffold( body: Stack( children: <Widget>[// Constraint box ConstrainedBox(constraints: const BoxConstraints. Expand (), child: Image.net work (" http://yanxuan.nosdn.127.net/65091eebc48899298171c2eb6696fe27.jpg "),), Center (/ / can be cut rectangular child: ClipRect(// Background filter child: BackdropFilter(filter: ImageFilter. Blur (sigmaX: 5.0,sigmaY: 5.0), child: Opacity(Opacity: 0.2, child: Container(width: 500.0, height: 700.0, decoration: BoxDecoration(color: color.grey.shade200), /* child: Center (child: Text (" tianhe district carry traverse to the child, "style: TextStyle (fontSize: 40, color: Colors. Black),),), * /),),),),),),); }}Copy the code

Conclusion:

The common frosted glass effect of Flutter is relatively easy to implement. The Flutter SDK provides many properties that we need to use in combination to achieve the desired effect. This frosted glass effect is relatively simple to implement, and the amount of code is not large. Finally, I hope my article can help you solve the problem, and I will contribute more useful codes to share with you in the future. If you think the article is good, please pay attention and star. Thank you

Project Address:

Yards cloud: gitee.com/qiuyu123/fr…