From d3d14c3d417c5dcc058581b7198a76679f83003c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Beno=C3=AEt=20Harrault?= <benoit@harrault.fr>
Date: Fri, 20 Sep 2024 22:01:39 +0200
Subject: [PATCH] Create styled container widget
---
lib/ui/screens/demo_page.dart | 25 ++++++++++++
lib/ui/widgets/styles_widget.dart | 66 +++++++++++++++++++++++++++++++
2 files changed, 91 insertions(+)
create mode 100644 lib/ui/widgets/styles_widget.dart
diff --git a/lib/ui/screens/demo_page.dart b/lib/ui/screens/demo_page.dart
index 06b0cbe..c72ebf1 100644
--- a/lib/ui/screens/demo_page.dart
+++ b/lib/ui/screens/demo_page.dart
@@ -1,5 +1,6 @@
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')),
+ ),
],
),
);
diff --git a/lib/ui/widgets/styles_widget.dart b/lib/ui/widgets/styles_widget.dart
new file mode 100644
index 0000000..72f3670
--- /dev/null
+++ b/lib/ui/widgets/styles_widget.dart
@@ -0,0 +1,66 @@
+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,
+ );
+ }
+}
--
GitLab