nadia_emiliana8
/
smartfarming
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

layout

This commit is contained in:
aarsyah0 2025-06-17 22:40:33 +07:00
parent 13e2655343
commit b8dcc027ca
1 changed files with 332 additions and 348 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

148
lib/dashboard.dart
View File

@ -39,16 +39,10 @@ class _DashboardPageState extends State<DashboardPage>
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final size = MediaQuery.of(context).size; final size = MediaQuery.of(context).size;
final width = size.width; final cardWidth = size.width * 0.90;
final height = size.height; final cardHeight = size.height * 0.15;
final cardWidth = width * 0.92; final iconSize = size.width * 0.13;
final cardHeight = height * 0.15; final fontSize = size.width * 0.052;
final iconSize = width * 0.13;
final fontSize = width * 0.052;
final borderRadius = width * 0.06;
final buttonFont = width * 0.045;
final buttonPaddingH = width * 0.09;
final buttonPaddingV = height * 0.018;
final time = TimeOfDay.now().format(context); final time = TimeOfDay.now().format(context);
// Palet warna // Palet warna
const greenPrimary = Color(0xFF1CB56B); const greenPrimary = Color(0xFF1CB56B);
@ -58,28 +52,27 @@ class _DashboardPageState extends State<DashboardPage>
const blueHumidity = Color(0xFF0288D1); const blueHumidity = Color(0xFF0288D1);
const yellowBadge = Color(0xFFFFF9C4); const yellowBadge = Color(0xFFFFF9C4);
const cardShadow = Color(0x331CB56B); const cardShadow = Color(0x331CB56B);
const borderRadius = 24.0;
return Scaffold( return Scaffold(
backgroundColor: greenBg, backgroundColor: greenBg,
body: LayoutBuilder( body: Column(
builder: (context, constraints) {
return Column(
children: [ children: [
// Modern custom header // Modern custom header
Container( Container(
width: double.infinity, width: double.infinity,
padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top), padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
decoration: BoxDecoration( decoration: const BoxDecoration(
gradient: const LinearGradient( gradient: LinearGradient(
colors: [greenGradientStart, greenPrimary], colors: [greenGradientStart, greenPrimary],
begin: Alignment.topLeft, begin: Alignment.topLeft,
end: Alignment.bottomRight, end: Alignment.bottomRight,
), ),
borderRadius: BorderRadius.only( borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(width * 0.08), bottomLeft: Radius.circular(32),
bottomRight: Radius.circular(width * 0.08), bottomRight: Radius.circular(32),
), ),
boxShadow: const [ boxShadow: [
BoxShadow( BoxShadow(
color: cardShadow, color: cardShadow,
blurRadius: 18, blurRadius: 18,
@ -89,16 +82,16 @@ class _DashboardPageState extends State<DashboardPage>
), ),
child: Column( child: Column(
children: [ children: [
SizedBox(height: height * 0.025), SizedBox(height: size.height * 0.025),
Row( Row(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
Container( Container(
width: width * 0.12, width: 44,
height: width * 0.12, height: 44,
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white, color: Colors.white,
borderRadius: BorderRadius.circular(width * 0.035), borderRadius: BorderRadius.circular(12),
boxShadow: [ boxShadow: [
BoxShadow( BoxShadow(
color: Colors.black.withOpacity(0.06), color: Colors.black.withOpacity(0.06),
@ -107,48 +100,48 @@ class _DashboardPageState extends State<DashboardPage>
), ),
], ],
), ),
child: Icon( child: const Icon(
Icons.eco, Icons.eco,
color: greenPrimary, color: greenPrimary,
size: width * 0.08, size: 30,
), ),
), ),
SizedBox(width: width * 0.04), const SizedBox(width: 14),
Text( Text(
'Smart Farming', 'Smart Farming',
style: TextStyle( style: TextStyle(
color: Colors.white, color: Colors.white,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
fontSize: width * 0.065, fontSize: size.width * 0.065,
letterSpacing: 1.2, letterSpacing: 1.2,
), ),
), ),
], ],
), ),
SizedBox(height: height * 0.012), SizedBox(height: size.height * 0.012),
Container( Container(
padding: EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(
horizontal: width * 0.045, horizontal: 18,
vertical: height * 0.008, vertical: 6,
), ),
decoration: BoxDecoration( decoration: BoxDecoration(
color: yellowBadge.withOpacity(0.85), color: yellowBadge.withOpacity(0.85),
borderRadius: BorderRadius.circular(width * 0.04), borderRadius: BorderRadius.circular(16),
), ),
child: Row( child: Row(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
Icon( const Icon(
Icons.access_time, Icons.access_time,
color: greenPrimary, color: greenPrimary,
size: width * 0.055, size: 20,
), ),
SizedBox(width: width * 0.018), const SizedBox(width: 7),
Text( Text(
time, time,
style: TextStyle( style: const TextStyle(
color: greenPrimary, color: greenPrimary,
fontSize: width * 0.045, fontSize: 18,
fontWeight: FontWeight.w600, fontWeight: FontWeight.w600,
letterSpacing: 1.1, letterSpacing: 1.1,
), ),
@ -156,14 +149,12 @@ class _DashboardPageState extends State<DashboardPage>
], ],
), ),
), ),
SizedBox(height: height * 0.025), SizedBox(height: size.height * 0.025),
], ],
), ),
), ),
SizedBox(height: height * 0.03), const Spacer(flex: 2),
Expanded( FadeTransition(
child: Center(
child: FadeTransition(
opacity: _fadeAnim, opacity: _fadeAnim,
child: Column( child: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
@ -172,7 +163,7 @@ class _DashboardPageState extends State<DashboardPage>
Container( Container(
width: cardWidth, width: cardWidth,
height: cardHeight, height: cardHeight,
margin: EdgeInsets.only(bottom: height * 0.022), margin: const EdgeInsets.only(bottom: 18),
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white, color: Colors.white,
borderRadius: BorderRadius.circular(borderRadius), borderRadius: BorderRadius.circular(borderRadius),
@ -180,23 +171,23 @@ class _DashboardPageState extends State<DashboardPage>
BoxShadow( BoxShadow(
color: cardShadow, color: cardShadow,
blurRadius: 18, blurRadius: 18,
offset: Offset(0, 8), offset: const Offset(0, 8),
), ),
], ],
), ),
child: Row( child: Row(
children: [ children: [
Padding( Padding(
padding: EdgeInsets.symmetric(horizontal: width * 0.045), padding: const EdgeInsets.symmetric(horizontal: 18.0),
child: Stack( child: Stack(
alignment: Alignment.topRight, alignment: Alignment.topRight,
children: [ children: [
Container( Container(
decoration: BoxDecoration( decoration: BoxDecoration(
color: blueTemp.withOpacity(0.15), color: blueTemp.withOpacity(0.15),
borderRadius: BorderRadius.circular(width * 0.045), borderRadius: BorderRadius.circular(18),
), ),
padding: EdgeInsets.all(width * 0.038), padding: const EdgeInsets.all(14),
child: Icon( child: Icon(
Icons.thermostat, Icons.thermostat,
color: blueTemp, color: blueTemp,
@ -207,20 +198,20 @@ class _DashboardPageState extends State<DashboardPage>
top: 0, top: 0,
right: 0, right: 0,
child: Container( child: Container(
padding: EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(
horizontal: width * 0.025, horizontal: 8,
vertical: height * 0.003, vertical: 2,
), ),
decoration: BoxDecoration( decoration: BoxDecoration(
color: blueTemp, color: blueTemp,
borderRadius: BorderRadius.circular(width * 0.03), borderRadius: BorderRadius.circular(12),
), ),
child: Text( child: const Text(
'°C', '°C',
style: TextStyle( style: TextStyle(
color: Colors.white, color: Colors.white,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
fontSize: width * 0.032, fontSize: 13,
), ),
), ),
), ),
@ -252,7 +243,7 @@ class _DashboardPageState extends State<DashboardPage>
], ],
), ),
), ),
SizedBox(width: width * 0.045), const SizedBox(width: 18),
], ],
), ),
), ),
@ -260,7 +251,7 @@ class _DashboardPageState extends State<DashboardPage>
Container( Container(
width: cardWidth, width: cardWidth,
height: cardHeight, height: cardHeight,
margin: EdgeInsets.only(bottom: height * 0.022), margin: const EdgeInsets.only(bottom: 18),
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white, color: Colors.white,
borderRadius: BorderRadius.circular(borderRadius), borderRadius: BorderRadius.circular(borderRadius),
@ -268,23 +259,23 @@ class _DashboardPageState extends State<DashboardPage>
BoxShadow( BoxShadow(
color: cardShadow, color: cardShadow,
blurRadius: 18, blurRadius: 18,
offset: Offset(0, 8), offset: const Offset(0, 8),
), ),
], ],
), ),
child: Row( child: Row(
children: [ children: [
Padding( Padding(
padding: EdgeInsets.symmetric(horizontal: width * 0.045), padding: const EdgeInsets.symmetric(horizontal: 18.0),
child: Stack( child: Stack(
alignment: Alignment.topRight, alignment: Alignment.topRight,
children: [ children: [
Container( Container(
decoration: BoxDecoration( decoration: BoxDecoration(
color: blueHumidity.withOpacity(0.13), color: blueHumidity.withOpacity(0.13),
borderRadius: BorderRadius.circular(width * 0.045), borderRadius: BorderRadius.circular(18),
), ),
padding: EdgeInsets.all(width * 0.038), padding: const EdgeInsets.all(14),
child: Icon( child: Icon(
Icons.water_drop, Icons.water_drop,
color: blueHumidity, color: blueHumidity,
@ -295,20 +286,20 @@ class _DashboardPageState extends State<DashboardPage>
top: 0, top: 0,
right: 0, right: 0,
child: Container( child: Container(
padding: EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(
horizontal: width * 0.025, horizontal: 8,
vertical: height * 0.003, vertical: 2,
), ),
decoration: BoxDecoration( decoration: BoxDecoration(
color: blueHumidity, color: blueHumidity,
borderRadius: BorderRadius.circular(width * 0.03), borderRadius: BorderRadius.circular(12),
), ),
child: Text( child: const Text(
'%', '%',
style: TextStyle( style: TextStyle(
color: Colors.white, color: Colors.white,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
fontSize: width * 0.032, fontSize: 13,
), ),
), ),
), ),
@ -340,7 +331,7 @@ class _DashboardPageState extends State<DashboardPage>
], ],
), ),
), ),
SizedBox(width: width * 0.045), const SizedBox(width: 18),
], ],
), ),
), ),
@ -357,30 +348,28 @@ class _DashboardPageState extends State<DashboardPage>
icon: Icon( icon: Icon(
Icons.tornado, Icons.tornado,
color: fanOn ? Colors.white : greenPrimary, color: fanOn ? Colors.white : greenPrimary,
size: width * 0.07,
), ),
label: Text( label: Text(
fanOn ? 'Kipas ON' : 'Kipas OFF', fanOn ? 'Kipas ON' : 'Kipas OFF',
style: TextStyle( style: TextStyle(
color: fanOn ? Colors.white : greenPrimary, color: fanOn ? Colors.white : greenPrimary,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
fontSize: buttonFont,
), ),
), ),
style: ElevatedButton.styleFrom( style: ElevatedButton.styleFrom(
backgroundColor: fanOn ? greenPrimary : Colors.white, backgroundColor: fanOn ? greenPrimary : Colors.white,
side: BorderSide(color: greenPrimary, width: width * 0.008), side: const BorderSide(color: greenPrimary, width: 2),
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(width * 0.06), borderRadius: BorderRadius.circular(22),
), ),
elevation: 0, elevation: 0,
padding: EdgeInsets.symmetric( padding: EdgeInsets.symmetric(
horizontal: buttonPaddingH, horizontal: size.width * 0.09,
vertical: buttonPaddingV, vertical: size.height * 0.018,
), ),
), ),
), ),
SizedBox(width: width * 0.06), SizedBox(width: size.width * 0.06),
ElevatedButton.icon( ElevatedButton.icon(
onPressed: () { onPressed: () {
setState(() { setState(() {
@ -390,26 +379,24 @@ class _DashboardPageState extends State<DashboardPage>
icon: Icon( icon: Icon(
Icons.water, Icons.water,
color: pumpOn ? Colors.white : greenPrimary, color: pumpOn ? Colors.white : greenPrimary,
size: width * 0.07,
), ),
label: Text( label: Text(
pumpOn ? 'Pompa ON' : 'Pompa OFF', pumpOn ? 'Pompa ON' : 'Pompa OFF',
style: TextStyle( style: TextStyle(
color: pumpOn ? Colors.white : greenPrimary, color: pumpOn ? Colors.white : greenPrimary,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
fontSize: buttonFont,
), ),
), ),
style: ElevatedButton.styleFrom( style: ElevatedButton.styleFrom(
backgroundColor: pumpOn ? greenPrimary : Colors.white, backgroundColor: pumpOn ? greenPrimary : Colors.white,
side: BorderSide(color: greenPrimary, width: width * 0.008), side: const BorderSide(color: greenPrimary, width: 2),
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(width * 0.06), borderRadius: BorderRadius.circular(22),
), ),
elevation: 0, elevation: 0,
padding: EdgeInsets.symmetric( padding: EdgeInsets.symmetric(
horizontal: buttonPaddingH, horizontal: size.width * 0.09,
vertical: buttonPaddingV, vertical: size.height * 0.018,
), ),
), ),
), ),
@ -418,11 +405,8 @@ class _DashboardPageState extends State<DashboardPage>
], ],
), ),
), ),
), const Spacer(flex: 3),
),
], ],
);
},
), ),
); );
} }