styled_container.dart

import 'package:flutter/material.dart';

class StyledContainer extends StatelessWidget {
  const StyledContainer({
    super.key,
    required this.child,
    this.borderWidth = 20,
    this.borderRadius = 6,
    this.depth = 7,
    this.lowerColor,
    this.upperColor,
  });

  final Widget child;
  final double borderWidth;
  final double borderRadius;
  final int depth;
  final Color? lowerColor;
  final Color? upperColor;

  Widget nestedContainers({
    required Widget child,
    required int containerDepth,
    required Color lowerColor,
    required Color upperColor,
  }) {
    final double singleBorderWidth = borderWidth / depth;
    final Color borderColor =
        Color.lerp(upperColor, lowerColor, (containerDepth / depth - 0.5).abs() * 2) ??
            Colors.white;

    final double radius = borderRadius + borderRadius * (containerDepth / depth);

    return Container(
      decoration: BoxDecoration(
        color: borderColor,
        border: Border.all(
          color: borderColor,
          width: singleBorderWidth,
        ),
        borderRadius: BorderRadius.circular(radius),
      ),
      child: containerDepth == 0
          ? Padding(
              padding: const EdgeInsets.all(8),
              child: child,
            )
          : nestedContainers(
              child: child,
              containerDepth: containerDepth - 1,
              lowerColor: lowerColor,
              upperColor: upperColor,
            ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return nestedContainers(
      child: child,
      containerDepth: depth,
      lowerColor: lowerColor ?? Theme.of(context).colorScheme.surface,
      upperColor: upperColor ?? Theme.of(context).colorScheme.onSurface,
    );
  }
}