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) {
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<SensorScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Mercury'),
),
appBar: AppBar(title: const Text('Mercury')),
body: Center(
child: Consumer<SensorProvider>(
builder: (context, sensorProvider, child) {
@ -59,15 +55,179 @@ class _SensorScreenState extends State<SensorScreen> {
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,
),
),
],
),
),
);
}
},