Flutter Shadow with CustomPainter

main.dart

import 'package:flutter/material.dart';
//Flutter Shadow with CustomPainter

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Shadow Button Demo',
      theme: ThemeData(
        useMaterial3: true,
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
      ),
      home: const HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Shadow Button Demo')),
      body: Center(
        child: GestureDetector(
          onTap: () {
            ScaffoldMessenger.of(
              context,
            ).showSnackBar(const SnackBar(content: Text('Button tapped')));
          },
          child: Column(
            children: [
              SizedBox(height: 50),

              CustomPaint(
                size: const Size(140, 140),
                painter: ShadowButtonPainter(),
                child: SizedBox(
                  width: 140,
                  height: 140,
                  child: Center(
                    child: const Text(
                      'Mein Text',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),
              ),
              //SizedBox(height:50),
              Text('im Shadow'),
              SizedBox(height: 50),

              /*
              BackdropFilter(
                filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 50.0),
                child: Container(
                  //color: Colors.black54,
                  child: Text('ABC'),
                ),
              ),
              Text("BLUR")
              */
            ],
          ),
        ),
      ),
    );
  }
}

class ShadowButtonPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final center = Offset(size.width / 2, size.height / 2);
    final radius = size.shortestSide / 2;

    // Schatten als radialer Gradient (weiche Kante)
    final shadowPaint = Paint()
      ..shader =
          RadialGradient(
            colors: [
              Colors.black.withOpacity(0.25),
              Colors.black.withOpacity(0.0),
            ],
          ).createShader(
            Rect.fromCircle(
              center: center.translate(4, 5),
              radius: radius * 1.6,
            ),
          );

    canvas.drawCircle(center.translate(4, 4), radius * 1.3, shadowPaint);

    // Button selbst
    final buttonPaint = Paint()..color = Colors.blue;
    canvas.drawCircle(center, radius, buttonPaint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}