Flutter `IconButton` Background Builder with `RoundedSuperellipseBorder` demo

icon_button_background_builder.dart

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool isListening = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme:
            ColorScheme.fromSeed(seedColor: const Color(0xFF00FFFF), brightness: Brightness.dark),
      ),
      home: Scaffold(
        body: Center(
          child: IconButton(
              style: ButtonStyle(
                fixedSize: const WidgetStatePropertyAll<Size?>(Size(60, 60)),
                iconSize: WidgetStatePropertyAll<double>(isListening ? 20 : 40),
                iconColor: WidgetStatePropertyAll<Color>(Theme.of(context).colorScheme.onSurface),
                backgroundBuilder: (BuildContext context, Set<WidgetState> states, Widget? child) {
                  return Stack(
                    alignment: AlignmentDirectional.center,
                    children: [
                      DecoratedBox(
                        decoration: ShapeDecoration(
                          shape: const CircleBorder(),
                          color: Theme.of(context).colorScheme.onPrimary,
                        ),
                        child: const SizedBox.expand(),
                      ),
                      AnimatedContainer(
                        duration: Durations.medium1,
                        curve: Easing.emphasizedDecelerate,
                        decoration: ShapeDecoration(
                          shape: isListening
                              ? RoundedSuperellipseBorder(
                                  borderRadius: BorderRadiusGeometry.circular(4))
                              : const CircleBorder(),
                          color: Theme.of(context).colorScheme.primary,
                        ),
                        child: isListening
                            ? const SizedBox(
                                width: 24,
                                height: 24,
                              )
                            : child,
                      ),
                    ],
                  );
                },
              ),
              onPressed: () {
                setState(() {
                  isListening = !isListening;
                });
              },
              icon: const Icon(Icons.mic)),
        ),
      ),
    );
  }
}