Create Frosted Glass Style Container with Flutter

banner.dart

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:valorant_geoguessr/config/theme.dart';

class BannerGlass extends StatelessWidget {
  final double height;
  final double width;
  final Widget child;

  const BannerGlass({
    super.key,
    required this.height,
    required this.width,
    required this.child,
  });

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: height + 2,
      width: width + 2,
      child: Stack(
        children: [
          Align(
            alignment: Alignment.bottomRight,
            child: ClipPath(
              clipper: ClipBanner(),
              child: Container(
                height: height,
                width: width,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(15),
                  boxShadow: [
                    BoxShadow(
                      color: AppColor.darkBlueColor.withOpacity(0.4),
                      offset: const Offset(2, 2),
                      blurRadius: 10,
                    ),
                  ],
                ),
              ),
            ),
          ),
          Align(
            alignment: Alignment.topLeft,
            child: Container(
              height: height - 2,
              width: width - 2,
              decoration: BoxDecoration(
                border: Border.all(
                  width: 1,
                  color: AppColor.whiteColor.withOpacity(0.3),
                ),
                borderRadius: BorderRadius.circular(15),
                gradient: LinearGradient(
                  colors: [
                    AppColor.whiteColor.withOpacity(0.1),
                    AppColor.whiteColor.withOpacity(0.3),
                    AppColor.whiteColor.withOpacity(0.1),
                    AppColor.whiteColor.withOpacity(0.19),
                    AppColor.whiteColor.withOpacity(0.12),
                    AppColor.whiteColor.withOpacity(0.05),
                  ],
                  stops: const [0, 0.2, 0.4, 0.6, 0.8, 1],
                  begin: Alignment.topRight,
                  end: Alignment.bottomLeft,
                ),
              ),
              child: Center(child: child),
            ),
          ),
        ],
      ),
    );
  }
}

class ClipBanner extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path1 = Path();
    path1.addRRect(RRect.fromRectAndRadius(
      Rect.fromLTRB(0, 0, size.width, size.height),
      const Radius.circular(15),
    ));

    Path path2 = Path();
    path2.addRRect(RRect.fromRectAndRadius(
      Rect.fromLTRB(0, 0, size.width - 2, size.height - 2),
      const Radius.circular(15),
    ));

    Path combine = Path.combine(
      PathOperation.difference,
      path1,
      path2,
    );
    return combine;
  }

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