I am making an app project in Flutter, where I want a blurred background Bottom Navigation Bar. How can I implement a bottom navigation bar in scaffold with blurred background property?

My code of Scaffold in Flutter

CodePudding user response：

You can use the below one as widget and change background as image or color you wish and remove unwanted params as per you need.

class GlassBox extends StatelessWidget {
  final double blurRadius, cornerRadius, width, height;
  final Border outline;
  final BoxShadow shadow;
  final Color backgroundColor;
  final Widget child;

  const GlassBox({
    Key? key,
    this.width = 100,
    this.height = 100,
    this.blurRadius = 4.0,
    this.cornerRadius = 10,
    required this.child,
    required this.outline,
    required this.shadow,
    this.backgroundColor = const Color(0x44ffffff),
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final double blurSigma = blurRadius * 0.57735   0.5;
    final borderRadius = BorderRadius.circular(cornerRadius);

    return Container(
      width: width,
      height: height,
      child: Stack(
        clipBehavior: Clip.none,
        children: [
          ClipPath(
            clipper: _InvRRectClipper(cornerRadius),
            child: Container(
              decoration: BoxDecoration(
                borderRadius: borderRadius,
                boxShadow: [
                  if (shadow != null) shadow,
                ],
              ),
            ),
          ),
          Container(
            decoration: BoxDecoration(borderRadius: borderRadius),
            clipBehavior: Clip.antiAlias,
            child: BackdropFilter(
              filter: ImageFilter.blur(sigmaX: blurSigma, sigmaY: blurSigma),
              child: Container(color: const Color(0x0), child: child),
            ),
          ),
          Container(
            foregroundDecoration:
            BoxDecoration(border: outline, borderRadius: borderRadius),
            decoration: BoxDecoration(
              color: backgroundColor,
              borderRadius: borderRadius,
            ),
          ),
        ],
      ),
    );
  }
}

class _InvRRectClipper extends CustomClipper<Path> {
  final double radius;

  _InvRRectClipper([this.radius = 12]);

  @override
  Path getClip(Size size) {
    final p = Path()
      ..addRRect(RRect.fromLTRBR(
        0,
        0,
        size.width,
        size.height,
        Radius.circular(radius),
      ))
      ..addRect(Rect.largest)
      ..fillType = PathFillType.evenOdd;
    return p;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) => true;
}