From f775ddea55c4a43cecbe27ecc8ea0df4fc99f6ad Mon Sep 17 00:00:00 2001 From: Halit Aksoy Date: Sat, 22 Feb 2025 19:58:36 +0300 Subject: [PATCH] feat(frontend): better UI view --- mercury_frontend/lib/main.dart | 192 ++++++++++++++++++++++++++++++--- 1 file changed, 176 insertions(+), 16 deletions(-) diff --git a/mercury_frontend/lib/main.dart b/mercury_frontend/lib/main.dart index 7d384d0..ef0956d 100644 --- a/mercury_frontend/lib/main.dart +++ b/mercury_frontend/lib/main.dart @@ -19,9 +19,7 @@ class MyApp extends StatelessWidget { Widget build(BuildContext context) { return MaterialApp( title: 'Sensor App', - theme: ThemeData( - primarySwatch: Colors.blue, - ), + theme: ThemeData(primarySwatch: Colors.blue), home: const SensorScreen(), ); } @@ -46,9 +44,7 @@ class _SensorScreenState extends State { @override Widget build(BuildContext context) { return Scaffold( - appBar: AppBar( - title: const Text('Mercury'), - ), + appBar: AppBar(title: const Text('Mercury')), body: Center( child: Consumer( builder: (context, sensorProvider, child) { @@ -59,15 +55,179 @@ class _SensorScreenState extends State { return const CircularProgressIndicator(); } else { final data = sensorProvider.sensorData!; - final timeAgo = timeago.format(DateTime.fromMillisecondsSinceEpoch(data.timestamp)); - return Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Text('🌡️ Temperature: ${data.temperature}°C'), - Text('💧 Humidity: ${data.humidity}%'), - Text('❄️ Dew Point: ${data.dewPoint}°C'), - Text('🕒 $timeAgo'), - ], + final timeAgo = timeago.format( + DateTime.fromMillisecondsSinceEpoch(data.timestamp), + ); + return Scrollbar( + child: SingleChildScrollView( + primary: true, + padding: const EdgeInsets.all(16.0), + child: Column( + children: [ + // Temperature Card + Card( + elevation: 4, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(16), + ), + child: Container( + width: double.infinity, + padding: const EdgeInsets.all(20), + decoration: BoxDecoration( + gradient: LinearGradient( + colors: [ + Colors.blue.shade200, + Colors.blue.shade400, + ], + begin: Alignment.topLeft, + end: Alignment.bottomRight, + ), + borderRadius: BorderRadius.circular(16), + ), + child: Column( + children: [ + const Icon( + Icons.thermostat, + size: 40, + color: Colors.white, + ), + const SizedBox(height: 10), + Text( + '${data.temperature}°C', + style: const TextStyle( + fontSize: 32, + fontWeight: FontWeight.bold, + color: Colors.white, + ), + ), + const SizedBox(height: 5), + const Text( + 'Temperature', + style: TextStyle( + fontSize: 16, + color: Colors.white70, + ), + ), + ], + ), + ), + ), + + const SizedBox(height: 20), + + // Humidity Card + Card( + elevation: 4, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(16), + ), + child: Container( + width: double.infinity, + padding: const EdgeInsets.all(20), + decoration: BoxDecoration( + gradient: LinearGradient( + colors: [ + Colors.green.shade200, + Colors.green.shade400, + ], + begin: Alignment.topLeft, + end: Alignment.bottomRight, + ), + borderRadius: BorderRadius.circular(16), + ), + child: Column( + children: [ + const Icon( + Icons.water_drop, + size: 40, + color: Colors.white, + ), + const SizedBox(height: 10), + Text( + '${data.humidity}%', + style: const TextStyle( + fontSize: 32, + fontWeight: FontWeight.bold, + color: Colors.white, + ), + ), + const SizedBox(height: 5), + const Text( + 'Humidity', + style: TextStyle( + fontSize: 16, + color: Colors.white70, + ), + ), + ], + ), + ), + ), + + const SizedBox(height: 20), + + // Dew Point Card + Card( + elevation: 4, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(16), + ), + child: Container( + width: double.infinity, + padding: const EdgeInsets.all(20), + decoration: BoxDecoration( + gradient: LinearGradient( + colors: [ + Colors.purple.shade200, + Colors.purple.shade400, + ], + begin: Alignment.topLeft, + end: Alignment.bottomRight, + ), + borderRadius: BorderRadius.circular(16), + ), + child: Column( + children: [ + const Icon( + Icons.ac_unit, + size: 40, + color: Colors.white, + ), + const SizedBox(height: 10), + Text( + '${data.dewPoint}°C', + style: const TextStyle( + fontSize: 32, + fontWeight: FontWeight.bold, + color: Colors.white, + ), + ), + const SizedBox(height: 5), + const Text( + 'Dew Point', + style: TextStyle( + fontSize: 16, + color: Colors.white70, + ), + ), + ], + ), + ), + ), + + const SizedBox(height: 20), + + // Timestamp + Text( + '🕒 Last updated: $timeAgo', + style: const TextStyle( + fontSize: 16, + color: Colors.grey, + ), + ), + ], + ), + ), ); } }, @@ -81,4 +241,4 @@ class _SensorScreenState extends State { ), ); } -} \ No newline at end of file +}