From 842b53028c2cbe3eeace00d59ca875770924114b 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
---
android/gradle.properties | 4 +-
lib/ui/screens/demo_page.dart | 25 ++++++++++++
lib/ui/widgets/styles_widget.dart | 66 +++++++++++++++++++++++++++++++
pubspec.yaml | 2 +-
4 files changed, 94 insertions(+), 3 deletions(-)
create mode 100644 lib/ui/widgets/styles_widget.dart
diff --git a/android/gradle.properties b/android/gradle.properties
index e848b20..0d6ab80 100644
--- a/android/gradle.properties
+++ b/android/gradle.properties
@@ -1,5 +1,5 @@
org.gradle.jvmargs=-Xmx1536M
android.useAndroidX=true
android.enableJetifier=true
-app.versionName=1.0.53
-app.versionCode=54
+app.versionName=1.0.54
+app.versionCode=55
diff --git a/lib/ui/screens/demo_page.dart b/lib/ui/screens/demo_page.dart
index 06b0cbe..94dcb72 100644
--- a/lib/ui/screens/demo_page.dart
+++ b/lib/ui/screens/demo_page.dart
@@ -6,6 +6,7 @@ import 'package:random/config/theme.dart';
import 'package:random/cubit/data_cubit.dart';
import 'package:random/cubit/settings_cubit.dart';
import 'package:random/ui/widgets/header_app.dart';
+import 'package:random/ui/widgets/styles_widget.dart';
class DemoPage extends StatelessWidget {
const DemoPage({super.key});
@@ -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,
+ );
+ }
+}
diff --git a/pubspec.yaml b/pubspec.yaml
index 7c22ee5..7e90b14 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -3,7 +3,7 @@ description: A random application, for testing purpose only.
publish_to: "none"
-version: 1.0.53+54
+version: 1.0.54+55
environment:
sdk: "^3.0.0"
--
GitLab