The flitter widget of Flutter is also very powerful. It can make the magic filter effect you want. Here we will make a ground glass effect in the way of actual combat, and learn the use of Fitler through examples.

The effect is as follows: do you know this teacher?

Implementation process:

I. preparation of main.dart file

import 'package:flutter/material.dart';
import 'Frosted_class.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Ground glass effect',
      theme: new ThemeData(
          primarySwatch: Colors.blue,
      ),
      home: new FrostedClassDemo(),
    );
  }
}

II. BackdropFilter Widget

BackdropFilter is the background filter component, which can add filter effect to the parent element. The most important attribute in it is filter. A filter component should be added to the filter attribute. In the example, we added a picture filter component and gave a blur effect.

Create a file of frozen_class.dart, and write the following code. The specific explanation has been written to the comments of the code.

import 'package:flutter/material.dart';
import 'dart:ui';  //Image filter: the package to be introduced

class FrostedClassDemo extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Stack(    //Use laminated components to overlap pictures with ground glass and fonts
          children: <Widget>[     //Array of child elements
             //The first layer puts a web photo in the constraint box.
             ConstrainedBox(       //Constraint box component, add additional constraints on child
                //constraint condition
                constraints: const BoxConstraints.expand(),//expand with constraints
                child: Image.network('http://img.wpxap.com/data/attachment/forum/201203/11/0021593jdvh2zpdd3s3dlv.jpg'),
             ),
             //Add ground glass to the second layer
             Center(
               child: ClipRect(    //Croppable rectangle
                  child: BackdropFilter(   //Background filter
                     //Introduce image filter (blur: blur setting)
                     filter: ImageFilter.blur(sigmaX: 5.0,sigmaY: 5.0),
                     child: Opacity(   //Set transparency
                         opacity: 0.5,//translucent
                         child: Container(
                           width: 500.0,
                           height: 700.0,
                           decoration: BoxDecoration(color: Colors.grey.shade200),//Box decorator
                           child: Center(
                             child: Text(
                               'Ground glass effect',
                               style: Theme.of(context).textTheme.display3,
                             ),
                           ),
                         ),
                     ),
                  ),
               ),
             )
          ],
        ),
    );
  }
}