Flutter进阶实战 7-20 毛玻璃效果制作_flutter 毛玻璃效果-优快云博客

本文介绍如何使用Flutter的BackdropFilter组件实现毛玻璃效果。通过实战演示，详细解析代码配置及组件用法，帮助读者掌握背景滤镜组件的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：Flutter的Fliter Widget 也是非常强大的，它可以制作出你想要的神奇滤镜效果。这里我们就以实战的方式，制作一个毛玻璃效果，通过实例来学习Fitler 的用法。

效果如下：这位老师你认识吗？

实现过程：

一、main.dart文件编写

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: '毛玻璃效果',
      theme: new ThemeData(
          primarySwatch: Colors.blue,
      ),
      home: new FrostedClassDemo(),
    );
  }
}

二、BackdropFilter Widget

BackdropFilter就是背景滤镜组件，使用它可以给父元素增加滤镜效果，它里边最重要的一个属性是filter。 filter属性中要添加一个滤镜组件，实例中我们添加了图片滤镜组件，并给了模糊效果。

新建一个Frosted_class.dart的文件，然后写入下面的代码，具体的解释已经写到了代码的注释中。

import 'package:flutter/material.dart';
import 'dart:ui';  //图片过滤器ImageFilter需要引入的包

class FrostedClassDemo extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Stack(    //使用层叠组件，图片和毛玻璃、字体重叠在一起
          children: <Widget>[     //子元素数组
             //第一层在约束盒子里放一张网络照片
             ConstrainedBox(       //约束盒子组件，添加额外的约束条件在child上
                //约束条件
                constraints: const BoxConstraints.expand(),//随着约束条件进行扩展expand
                child: Image.network('http://img.wpxap.com/data/attachment/forum/201203/11/0021593jdvh2zpdd3s3dlv.jpg'),
             ),
             //第二层添加毛玻璃
             Center(
               child: ClipRect(    //可裁切的矩形
                  child: BackdropFilter(   //背景过滤器
                     //引入图片过虑器（blur:模糊设置）
                     filter: ImageFilter.blur(sigmaX: 5.0,sigmaY: 5.0),
                     child: Opacity(   //设置透明度
                         opacity: 0.5,//半透明
                         child: Container(
                           width: 500.0,
                           height: 700.0,
                           decoration: BoxDecoration(color: Colors.grey.shade200),//盒子修饰器
                           child: Center(
                             child: Text(
                               '毛玻璃效果',
                               style: Theme.of(context).textTheme.display3,
                             ),
                           ),
                         ),
                     ),
                  ),
               ),
             )
          ],
        ),
    );
  }
}