aefril/enaklo-flutter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: home page

Browse Source
This commit is contained in:
efrilm
2025-08-28 00:40:18 +07:00
parent c3eb62077f
commit 627de219cb
9 changed files with 1333 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/presentation/components/image/image.dart
+1
View File
@@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'dart:math' as math;
import '../../../common/theme/theme.dart';
import '../assets/assets.gen.dart';
lib/presentation/components/image/image_placeholder.dart
+154 -67
View File
@@ -1,79 +1,166 @@
part of 'image.dart';
class ImagePlaceholder extends StatelessWidget {
const ImagePlaceholder({super.key});
const ImagePlaceholder({
super.key,
this.width,
this.height,
this.showBorderRadius = true,
this.backgroundColor,
});
final double? width;
final double? height;
final bool showBorderRadius;
final Color? backgroundColor;
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
decoration: const BoxDecoration(
color: Color(0x4DD9D9D9), // Light gray with opacity
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(20),
bottomRight: Radius.circular(20),
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// Hand holding coffee illustration
Container(
width: 120,
height: 160,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(60),
return LayoutBuilder(
builder: (context, constraints) {
// Determine the size based on available space or provided dimensions
final containerWidth = width ?? constraints.maxWidth;
final containerHeight = height ?? constraints.maxHeight;
// Calculate the minimum dimension to determine if we should show simple or detailed version
final minDimension = math.min(
containerWidth == double.infinity ? containerHeight : containerWidth,
containerHeight == double.infinity ? containerWidth : containerHeight,
);
return Container(
width: containerWidth == double.infinity
? double.infinity
: containerWidth,
height: containerHeight == double.infinity ? null : containerHeight,
decoration: BoxDecoration(
color: backgroundColor ?? const Color(0x4DD9D9D9),
borderRadius: showBorderRadius
? const BorderRadius.only(
bottomLeft: Radius.circular(20),
bottomRight: Radius.circular(20),
)
: null,
),
child: Center(
child: minDimension < 100
? _buildSimpleVersion(minDimension)
: _buildDetailedVersion(minDimension),
),
);
},
);
}
// Simple version for small sizes (< 100px)
Widget _buildSimpleVersion(double size) {
final iconSize = (size * 0.4).clamp(16.0, 32.0);
final fontSize = (size * 0.12).clamp(8.0, 12.0);
return Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: iconSize * 1.5,
height: iconSize * 1.5,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(iconSize * 0.75),
),
child: Center(
child: Assets.images.logo.image(
width: iconSize,
height: iconSize,
fit: BoxFit.contain,
),
child: Stack(
children: [
// Hand
Positioned(
bottom: 20,
left: 30,
child: Container(
width: 60,
height: 80,
decoration: BoxDecoration(
color: const Color(0xFFFFDBB3),
borderRadius: BorderRadius.circular(30),
),
),
),
),
if (size > 50) ...[
SizedBox(height: size * 0.05),
Text(
'Enaklo',
style: TextStyle(
color: AppColor.primary,
fontSize: fontSize,
fontWeight: FontWeight.bold,
),
),
],
],
);
}
// Detailed version for larger sizes (>= 100px)
Widget _buildDetailedVersion(double minDimension) {
final scaleFactor = minDimension / 200; // Base scale factor
// Proportional sizes
final illustrationSize = (120 * scaleFactor).clamp(80.0, 120.0);
final illustrationHeight = (160 * scaleFactor).clamp(100.0, 160.0);
final handWidth = (60 * scaleFactor).clamp(30.0, 60.0);
final handHeight = (80 * scaleFactor).clamp(40.0, 80.0);
final cupWidth = (70 * scaleFactor).clamp(35.0, 70.0);
final cupHeight = (90 * scaleFactor).clamp(45.0, 90.0);
final logoSize = (40 * scaleFactor).clamp(20.0, 40.0);
final fontSize = (12 * scaleFactor).clamp(8.0, 12.0);
return Container(
width: illustrationSize,
height: illustrationHeight,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(illustrationSize / 2),
),
child: Stack(
children: [
// Hand
Positioned(
bottom: illustrationHeight * 0.125, // 20/160 ratio
left: illustrationSize * 0.25, // 30/120 ratio
child: Container(
width: handWidth,
height: handHeight,
decoration: BoxDecoration(
color: const Color(0xFFFFDBB3),
borderRadius: BorderRadius.circular(handWidth / 2),
),
),
),
// Coffee cup
Positioned(
top: illustrationHeight * 0.1875, // 30/160 ratio
left: illustrationSize * 0.208, // 25/120 ratio
child: Container(
width: cupWidth,
height: cupHeight,
decoration: BoxDecoration(
color: const Color(0xFFF4E4BC),
borderRadius: BorderRadius.circular(
math.max(8.0, 10 * scaleFactor),
),
// Coffee cup
Positioned(
top: 30,
left: 25,
child: Container(
width: 70,
height: 90,
decoration: BoxDecoration(
color: const Color(0xFFF4E4BC),
borderRadius: BorderRadius.circular(10),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// Fore logo
Assets.images.logo.image(
width: 40,
height: 40,
fit: BoxFit.contain,
),
const SizedBox(height: 8),
Text(
'Enaklo',
style: TextStyle(
color: AppColor.primary,
fontSize: 12,
fontWeight: FontWeight.bold,
),
),
],
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// Logo
Assets.images.logo.image(
width: logoSize,
height: logoSize,
fit: BoxFit.contain,
),
),
],
SizedBox(height: math.max(4.0, 8 * scaleFactor)),
if (cupHeight > 50) // Only show text if cup is big enough
Text(
'Enaklo',
style: TextStyle(
color: AppColor.primary,
fontSize: fontSize,
fontWeight: FontWeight.bold,
),
),
],
),
),
),
],