flutter showBottomSheet 如何设置模糊层

要在Flutter的showBottomSheet中添加模糊层，请按照以下步骤进行操作：

1. 导入BackdropFilter和BlurFilter类：

import 'dart:ui';

import 'package:flutter/material.dart';

2. 将showBottomSheet方法包装在StatefulWidget中，并在State类中添加一个变量来跟踪是否应该显示模糊层：

class MyWidget extends StatefulWidget {
  const MyWidget({Key? key}) : super(key: key);

  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  bool _showBlurLayer = false;

  void _toggleBlurLayer() {
    setState(() {
      _showBlurLayer = !_showBlurLayer;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('My App'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showModalBottomSheet<void>(
              context: context,
              builder: (BuildContext context) {
                return Container(
                  height: 200.0,
                  color: Colors.white,
                  child: Center(
                    child: Text('This is a modal bottom sheet'),
                  ),
                );
              },
            );
            _toggleBlurLayer();
          },
          child: const Text('Show Modal Bottom Sheet'),
        ),
      ),
    );
  }
}

3. 在模态底部表单的构建器中添加一个BackdropFilter小部件，该小部件将一个模糊的图像层应用于其子元素，以创建模糊效果。您可以使用BackDropFilter的filter属性来指定要应用的滤镜，例如BlurFilter：

builder: (BuildContext context) {
  return BackdropFilter(
    filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
    child: Container(
      height: 200.0,
      color: Colors.white,
      child: Center(
        child: Text('This is a modal bottom sheet'),
      ),
    ),
  );
},

4. 最后，您需要在模态表单关闭时将_showBlurLayer变量设置为false，以便在下一次显示模态表单时不再显示模糊层：

Navigator.of(context).pop();
_toggleBlurLayer();

这样就可以在Flutter的showBottomSheet中添加模糊层了。