效果

类似毛玻璃，或者马赛克的效果。我们可以用它来提升app背景的整体质感，或者给关键信息打码。

源代码

import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
runApp(const MyApp());

}

class MyApp extends StatelessWidget {
const MyApp({super.key});

// This widget is the root of your application.

  @override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,

      ),
home: const MyHomePage(title: 'Flutter Demo Home Page'),

    );

  }

}

class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});

final String title;


  @override
State<MyHomePage> createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {
// 高斯模糊的第一种写法 ImageFiltered 包裹要模糊的组件

/// 将子组件进行高斯模糊
/// [child] 要模糊的子组件
Widget _imageFilteredWidget1({required Widget child, double sigmaValue = 1}) {
return ImageFiltered(
imageFilter: ImageFilter.blur(sigmaX: sigmaValue, sigmaY: sigmaValue),
child: child,

    );

  }

/// 使用第一种模糊方式的案例
Widget _demo1() {
return Container(
padding: const EdgeInsets.all(50),
color: Colors.blue.shade100,
width: double.infinity,
child: Column(
children: [
_imageFilteredWidget1(
child: SizedBox(
width: 150,
child: Image.asset(
"assets/images/bz1.jpg",
fit: BoxFit.fitHeight,

              ),

            ),

          ),

          const SizedBox(height: 100),
_imageFilteredWidget1(
child: const Text(
"测试高斯模糊",
style: TextStyle(fontSize: 30, color: Colors.blueAccent),

              ),
sigmaValue: 2)

        ],

      ),

    );

  }

/// 利用  BackdropFilter 做高斯模糊
_backdropFilterWidget2({
required Widget child,
double sigmaValueX = 1,
double sigmaValueY = 1,

  }) {
return ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: sigmaValueX, sigmaY: sigmaValueY),
child: child,

      ),

    );

  }

///
Widget _demo2() {
return SizedBox(
width: double.infinity,
height: double.infinity,
child: Stack(
alignment: Alignment.center,
children: [

          Positioned.fill(
child: Image.asset(
"assets/images/bz1.jpg",
fit: BoxFit.fill,

            ),

          ),
Positioned(
child: _backdropFilterWidget2(
sigmaValueX: _sigmaValueX,
sigmaValueY: _sigmaValueY,
child: Container(
width: MediaQuery.of(context).size.width - 100,
height: MediaQuery.of(context).size.height / 2,
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: const Color(0x90ffffff),

                  ),
child: const Text(
"高斯模糊",
style: TextStyle(fontSize: 30, color: Colors.white),

                  ),

                )),
top: 20,

          ),
_slider(
bottomMargin: 200,
themeColors: Colors.yellow,
title: '横向模糊度',
valueAttr: _sigmaValueX,
onChange: (double value) {
setState(() {

                _sigmaValueX = value;

              });

            },

          ),
_slider(
bottomMargin: 160,
themeColors: Colors.blue,
title: '纵向模糊度',
valueAttr: _sigmaValueY,
onChange: (double value) {
setState(() {

                _sigmaValueY = value;

              });

            },

          ),
_slider(
bottomMargin: 120,
themeColors: Colors.green,
title: '同时调整：',
valueAttr: _sigmaValue,
onChange: (double value) {
setState(() {

                _sigmaValue = value;

                _sigmaValueX = value;

                _sigmaValueY = value;

              });

            },

          ),

        ],

      ),

    );

  }

Widget _slider({
required String title,
required double bottomMargin,
required Color themeColors,
required double valueAttr,
required ValueChanged<double>? onChange,

  }) {
return Positioned(
bottom: bottomMargin,
child: Row(
children: [
Text(title, style: TextStyle(color: themeColors, fontSize: 18)),
SliderTheme(
data: SliderThemeData(
trackHeight: 20,
activeTrackColor: themeColors.withOpacity(.7),
thumbColor: themeColors,
inactiveTrackColor: themeColors.withOpacity(.4)

            ),
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.5,
child: Slider(
value: valueAttr,
min: 0,
max: 10,
onChanged: onChange,

              ),

            ),

          ),
SizedBox(
width: 50,
child: Text('${valueAttr.round()}',
style: TextStyle(color: themeColors, fontSize: 18)),

          ),

        ],

      ),

    );

  }

double _sigmaValueX = 10;
double _sigmaValueY = 10;

double _sigmaValue = 10;


  @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),

      ),
body: _demo2(),

    );

  }

}

实现原理

实现高斯模糊，在flutter中有两种方式：

ImageFiltered

它可以对其包裹的子组件施加高斯模糊，需要传入 ImageFilter 控制模糊程度，分为X Y两个方向的模糊，实际上就是对图片进行拉伸，数字越大，模糊效果越大。

/// 将子组件进行高斯模糊
/// [child] 要模糊的子组件

Widget _imageFilteredWidget1({required Widget child, double sigmaValue = 1}) {
return ImageFiltered(

    imageFilter: ImageFilter.blur(sigmaX: sigmaValue, sigmaY: sigmaValue),

    child: child,

  );

}

BackDropFilter

同样需要一个 ImageFilter参数控制模糊度，与 ImageFilter的区别是，它会对它覆盖的组件整体模糊。
所以如果我们需要对指定的子组件进行模糊的话，需要再包裹一个ClipRect裁切。

/// 利用  BackdropFilter 做高斯模糊

_backdropFilterWidget2({required Widget child, double sigmaValue = 1}) {
return ClipRect(

    child: BackdropFilter(

      filter: ImageFilter.blur(sigmaY: sigmaValue, sigmaX: sigmaValue),

      child: child,

    ),

  );

}

由于 BackdropFilter 会对其子组件进行图形处理，所以其子组件可能会变得更加消耗性能。因此，需要谨慎使用 BackdropFilter 组件。