Create styled container widget

lib/ui/screens/demo_page.dart

 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:random/ui/widgets/styles_widget.dart';
 import 'package:unicons/unicons.dart';
 
 import 'package:random/config/theme.dart';
@@ -29,6 +30,30 @@ class DemoPage extends StatelessWidget {
           fakeApiCall(),
           const SizedBox(height: 20),
           const AppHeader(text: 'BOTTOM'),
+          const StyledWidget(
+            child: SizedBox.square(
+              dimension: 40,
+              child: Center(child: Text('default')),
+            ),
+          ),
+          const SizedBox(height: 8),
+          const StyledWidget(
+            borderRadius: 0,
+            borderWidth: 12,
+            // depth: 8,
+            lowerColor: Colors.red,
+            upperColor: Colors.yellow,
+            child: Center(child: Text('custom 1')),
+          ),
+          const SizedBox(height: 8),
+          const StyledWidget(
+            borderRadius: 10,
+            borderWidth: 20,
+            depth: 20,
+            lowerColor: Colors.blueGrey,
+            upperColor: Colors.blue,
+            child: Center(child: Text('custom 2')),
+          ),
         ],
       ),
     );

lib/ui/widgets/styles_widget.dart

+import 'package:flutter/material.dart';
+
+class StyledWidget extends StatelessWidget {
+  const StyledWidget({
+    super.key,
+    required this.child,
+    this.borderWidth = 10,
+    this.borderRadius = 4,
+    this.depth = 5,
+    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.onPrimary,
+      upperColor: upperColor ?? Theme.of(context).colorScheme.onSecondary,
+    );
+  }
+}