style: limit abstract background to exactly 3 large solid shapes

This commit is contained in:
ssbg04 committed 2026-07-21 23:57:11 +08:00
1 parent 9baf3d5b15
commit f9706eb740
1 file changed
+7 -35
@@ -2,7 +2,7 @@ import 'dart:math' as math;
import 'package:flutter/material.dart';
import '../../../core/constants/app_colors.dart';
/// A lightweight, static abstract background decorator featuring large, solid shapes (no outlines).
/// A lightweight, static abstract background decorator featuring exactly 3 large, solid shapes (no outlines).
/// Fully responsive across Mobile, Web, and Desktop platforms.
class AbstractBackground extends StatelessWidget {
final Widget child;
@@ -45,7 +45,7 @@ class _AbstractShapesCanvas extends StatelessWidget {
// Base background tint
Container(color: AppColors.pageBackground),
// Shape 1: Top-Right Extra Large Solid Circle
// Shape 1 (Top-Right): Large Solid Circle
Positioned(
top: -height * 0.12,
right: -width * 0.10,
@@ -59,7 +59,7 @@ class _AbstractShapesCanvas extends StatelessWidget {
),
),
// Shape 2: Top-Left Large Solid Tilted Block
// Shape 2 (Top-Left): Large Solid Tilted Rect Block
Positioned(
top: height * 0.08,
left: -width * 0.12,
@@ -76,46 +76,18 @@ class _AbstractShapesCanvas extends StatelessWidget {
),
),
// Shape 3: Middle-Right Large Solid Circle
Positioned(
top: height * 0.35,
right: -width * 0.08,
child: Container(
width: math.max(220, width * 0.38),
height: math.max(220, width * 0.38),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColors.primaryGreen.withValues(alpha: 0.065),
),
),
),
// Shape 4: Bottom-Left Extra Large Solid Blob
Positioned(
bottom: -height * 0.15,
left: -width * 0.12,
child: Container(
width: math.max(340, width * 0.60),
height: math.max(340, width * 0.60),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColors.primaryGreen.withValues(alpha: 0.07),
),
),
),
// Shape 5: Bottom-Right Large Solid Tilted Pill Capsule
// Shape 3 (Bottom-Right): Large Solid Tilted Pill Capsule
Positioned(
bottom: height * 0.05,
right: -width * 0.06,
child: Transform.rotate(
angle: math.pi / 5,
child: Container(
width: math.max(280, width * 0.48),
height: math.max(120, width * 0.20),
width: math.max(280, width * 0.50),
height: math.max(120, width * 0.22),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(60),
color: AppColors.darkGreen.withValues(alpha: 0.06),
color: AppColors.primaryGreen.withValues(alpha: 0.065),
),
),
),