flutter:实现毛玻璃效果

一，代码：

import 'dart:ui';

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

class NextPage extends StatefulWidget {
  @override
  State<NextPage> createState() => _NextPageState();
}

class _NextPageState extends State<NextPage>  {
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text("next页面"),
      ),

      body:Stack(
        fit: StackFit.expand,
        children: [
          //背景图
          Image.network('https://wx4.sinaimg.cn/mw690/008AUO3Hly1i0gct3fmzqj31400u0agu.jpg'),
      //毛玻璃层
      Center(
        child: ClipRect(
          child: BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 8.0,sigmaY: 8.0),
            child: Opacity(
              opacity: 0,
              child: Container(
                width: 300.0,
                height: 200.0,
                decoration: BoxDecoration(
                    color: Colors.grey.shade200,
                    //color: Colors.blue,
                ),
              ),
            ),

            ),
          ),
      ),
          //最上层的文字
          Center(
              child:Text(
                  'Car',
                  style: Theme.of(context).textTheme.displayMedium
              )
          ),
        ],
      ),
    );
  }
  
}

说明：

ImageFilter.blur接收两个参数：sigmaX和sigmaY，它们分别控制水平和垂直方向上的模糊程度。

TileMode的选择与效果

TileMode参数定义了模糊效果超出源图像边界时的填充模式，为模糊效果提供了更多的控制。
通过让用户选择不同的TileMode，我们可以提供不同的视觉体验：

clamp：默认模式，超出部分使用边缘颜色填充。
mirror：边缘处镜像反射，创造对称的模糊效果。
repeated：重复源图像来填充超出部分，创造连续图案效果

二，测试效果: