fullscreen_transparent_dialog.dart

/// Based on the answer of Przemek Broda: 
/// https://stackoverflow.com/questions/51825779/blur-background-behind-dialog-flutter/62361699#62361699

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

void showProgressView(BuildContext context, {bool dismissible = false}) {
  showGeneralDialog(
    context: context,
    barrierColor: Theme.of(context).colorScheme.surface.withOpacity(0.5),
    barrierDismissible: dismissible,
    barrierLabel: '',
    pageBuilder: (_, __, ___) => const CustomProgressView(),
    transitionBuilder: (_, anim1, __, child) {
      return BackdropFilter(
        filter: ImageFilter.blur(
          sigmaX: 6 * anim1.value,
          sigmaY: 6 * anim1.value,
        ),
        child: FadeTransition(
          child: child,
          opacity: anim1,
        ),
      );
    },
  );
}

class CustomProgressView extends StatelessWidget {
  final AnimationController? animationController;

  const CustomProgressView({Key? key, this.animationController}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Dialog(
      shape: const CircleBorder(),
      elevation: 0,
      child: Container(
        width: 149.0,
        height: 149.0,
        alignment: Alignment.center,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.centerLeft,
            end: Alignment.centerRight,
            colors: [
              Theme.of(context).colorScheme.surfaceVariant,
              Theme.of(context).colorScheme.surface,
            ],
          ),
          shape: BoxShape.circle,
        ),
        child: Container(
          width: 148.0,
          height: 148.0,
          decoration: BoxDecoration(
            color: Theme.of(context).colorScheme.surfaceVariant,
            shape: BoxShape.circle,
          ),
          child: Container(
            alignment: FractionalOffset.center,
            height: 51.0,
            child: const CircularProgressIndicator(
              strokeWidth: 5,
              color: Colors.red,
            ),
          ),
        ),
      ),
    );
  }
}