jhalitaksoy/mercury
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): better UI view

Browse Source
This commit is contained in:
Halit Aksoy 2025-02-22 19:58:36 +03:00
parent ee1a7102cb
commit f775ddea55
1 changed files with 176 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

190
mercury_frontend/lib/main.dart
View File

@ -19,9 +19,7 @@ class MyApp extends StatelessWidget {
Widget build(BuildContext context) { Widget build(BuildContext context) {
return MaterialApp( return MaterialApp(
title: 'Sensor App', title: 'Sensor App',
theme: ThemeData( theme: ThemeData(primarySwatch: Colors.blue),
primarySwatch: Colors.blue,
),
home: const SensorScreen(), home: const SensorScreen(),
); );
} }
@ -46,9 +44,7 @@ class _SensorScreenState extends State<SensorScreen> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return Scaffold(
appBar: AppBar( appBar: AppBar(title: const Text('Mercury')),
title: const Text('Mercury'),
),
body: Center( body: Center(
child: Consumer<SensorProvider>( child: Consumer<SensorProvider>(
builder: (context, sensorProvider, child) { builder: (context, sensorProvider, child) {
@ -59,15 +55,179 @@ class _SensorScreenState extends State<SensorScreen> {
return const CircularProgressIndicator(); return const CircularProgressIndicator();
} else { } else {
final data = sensorProvider.sensorData!; final data = sensorProvider.sensorData!;
final timeAgo = timeago.format(DateTime.fromMillisecondsSinceEpoch(data.timestamp)); final timeAgo = timeago.format(
return Column( DateTime.fromMillisecondsSinceEpoch(data.timestamp),
mainAxisAlignment: MainAxisAlignment.center, );
children: [ return Scrollbar(
Text('🌡️ Temperature: ${data.temperature}°C'), child: SingleChildScrollView(
Text('💧 Humidity: ${data.humidity}%'), primary: true,
Text('❄️ Dew Point: ${data.dewPoint}°C'), padding: const EdgeInsets.all(16.0),
Text('🕒 $timeAgo'), 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,
),
),
],
),
),
); );
} }
}, },