593 lines
22 KiB
Dart
593 lines
22 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter/services.dart';
|
|
import 'package:flutter_map/flutter_map.dart';
|
|
import 'package:latlong2/latlong.dart';
|
|
import 'dart:ui' as ui;
|
|
|
|
void main() {
|
|
runApp(const SmartHelmetApp());
|
|
}
|
|
|
|
class SmartHelmetApp extends StatelessWidget {
|
|
const SmartHelmetApp({super.key});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
|
|
statusBarColor: Colors.transparent,
|
|
statusBarIconBrightness: Brightness.light,
|
|
));
|
|
|
|
return MaterialApp(
|
|
debugShowCheckedModeBanner: false,
|
|
theme: ThemeData(
|
|
brightness: Brightness.dark,
|
|
scaffoldBackgroundColor: const Color(0xFF27292B),
|
|
primaryColor: const Color(0xFF30343B),
|
|
fontFamily: 'Pretendard',
|
|
textTheme: const TextTheme(
|
|
bodyLarge: TextStyle(color: Colors.white),
|
|
bodyMedium: TextStyle(color: Colors.white70),
|
|
),
|
|
appBarTheme: AppBarTheme(
|
|
backgroundColor: const Color(0xFF27292B),
|
|
elevation: 0,
|
|
foregroundColor: Colors.white,
|
|
),
|
|
),
|
|
home: const HomeScreen(),
|
|
);
|
|
}
|
|
}
|
|
|
|
class HomeScreen extends StatefulWidget {
|
|
const HomeScreen({super.key});
|
|
|
|
@override
|
|
State<HomeScreen> createState() => _HomeScreenState();
|
|
}
|
|
|
|
class _HomeScreenState extends State<HomeScreen> {
|
|
int _selectedIndex = 0;
|
|
|
|
final Map<String, bool> _overviewToggles = {
|
|
'UV LED': true,
|
|
'CHARGING': false,
|
|
'HELMET': true,
|
|
'FAN': false,
|
|
};
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
const double horizontalPadding = 29.1;
|
|
|
|
return MediaQuery(
|
|
data: MediaQuery.of(context).copyWith(
|
|
textScaler: TextScaler.linear(1.0),
|
|
),
|
|
child: Scaffold(
|
|
appBar: null,
|
|
body: SafeArea(
|
|
bottom: false,
|
|
child: Column(
|
|
children: [
|
|
_buildCustomHeader(),
|
|
Expanded(
|
|
child: SingleChildScrollView(
|
|
padding:
|
|
const EdgeInsets.symmetric(horizontal: horizontalPadding),
|
|
child: Column(
|
|
children: [
|
|
const SizedBox(height: 3.43),
|
|
_buildOverviewHeader(),
|
|
const SizedBox(height: 3.0),
|
|
Row(
|
|
children: [
|
|
Expanded(child: _buildImageCard()),
|
|
const SizedBox(width: 3.0),
|
|
Expanded(child: _buildInfoCard()),
|
|
],
|
|
),
|
|
const SizedBox(height: 3.0),
|
|
_buildBatteryStatusCard(),
|
|
const SizedBox(height: 3.0),
|
|
_buildOverviewCard(),
|
|
const SizedBox(height: 3.0),
|
|
_buildEnvironmentSensorsCard(),
|
|
const SizedBox(height: 3.0),
|
|
_buildMyLocationCard(),
|
|
const SizedBox(height: 3.0),
|
|
_buildActivityCard(),
|
|
const SizedBox(height: 32.0),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
bottomNavigationBar: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Container(
|
|
height: 0.38,
|
|
color: const Color(0xFF5C5D5F),
|
|
),
|
|
BottomNavigationBar(
|
|
currentIndex: _selectedIndex,
|
|
onTap: (index) {
|
|
setState(() {
|
|
_selectedIndex = index;
|
|
});
|
|
},
|
|
type: BottomNavigationBarType.fixed,
|
|
backgroundColor: const Color(0xFF30343B),
|
|
elevation: 0,
|
|
selectedItemColor: Colors.white,
|
|
unselectedItemColor: Colors.white54,
|
|
showUnselectedLabels: true,
|
|
selectedFontSize: 12,
|
|
unselectedFontSize: 12,
|
|
items: const [
|
|
BottomNavigationBarItem(icon: Icon(Icons.home), label: 'HOME'),
|
|
BottomNavigationBarItem(
|
|
icon: Icon(Icons.tune), label: 'CONTROL'),
|
|
BottomNavigationBarItem(
|
|
icon: Icon(Icons.location_on), label: 'LOCATION'),
|
|
BottomNavigationBarItem(
|
|
icon: Icon(Icons.history), label: 'HISTORY'),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildCustomHeader() {
|
|
return Container(
|
|
height: 64.0,
|
|
decoration: const BoxDecoration(
|
|
color: Color(0xFF30343B),
|
|
border: Border(bottom: BorderSide(color: Color(0xFF5C5D5F), width: 1.0))),
|
|
padding: const EdgeInsets.symmetric(horizontal: 16.0),
|
|
child: Center(
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Row(children: [
|
|
const Icon(Icons.settings_input_component_outlined,
|
|
color: Colors.white),
|
|
const SizedBox(width: 12),
|
|
Text('SMART HELMET SYSTEMS',
|
|
style: TextStyle(
|
|
fontSize: 13.71,
|
|
fontWeight: FontWeight.bold,
|
|
color: Colors.white))
|
|
]),
|
|
Text('2025/10/02 ・ 03:19 PM',
|
|
style: TextStyle(color: Colors.white70, fontSize: 10.67))
|
|
])));
|
|
}
|
|
|
|
Widget _buildOverviewHeader() {
|
|
return Container(
|
|
height: 27.43,
|
|
padding: const EdgeInsets.symmetric(horizontal: 16.0),
|
|
decoration: BoxDecoration(
|
|
color: Theme.of(context).primaryColor,
|
|
borderRadius: BorderRadius.circular(5.7)),
|
|
child: Row(children: [
|
|
Text('SYSTEM OVERVIEW',
|
|
style: TextStyle(
|
|
color: Colors.white.withOpacity(0.9),
|
|
fontSize: 9.14,
|
|
fontWeight: FontWeight.bold)),
|
|
const Spacer(),
|
|
SizedBox(
|
|
width: 24,
|
|
height: 24,
|
|
child: IconButton(
|
|
onPressed: () {},
|
|
icon: const Icon(Icons.search, color: Colors.white),
|
|
iconSize: 17.14,
|
|
splashRadius: 18,
|
|
padding: EdgeInsets.zero)),
|
|
SizedBox(
|
|
width: 24,
|
|
height: 24,
|
|
child: IconButton(
|
|
onPressed: () {},
|
|
icon: const Icon(Icons.notifications_outlined,
|
|
color: Colors.white),
|
|
iconSize: 17.14,
|
|
splashRadius: 18,
|
|
padding: EdgeInsets.zero))
|
|
]));
|
|
}
|
|
|
|
Widget _buildImageCard() {
|
|
return Container(
|
|
height: 137.0,
|
|
decoration: BoxDecoration(
|
|
color: Theme.of(context).primaryColor,
|
|
borderRadius: BorderRadius.circular(5.7),
|
|
),
|
|
child: Center(
|
|
child: Image.asset(
|
|
'assets/images/helmet.png', // 이 경로는 실제 프로젝트에 맞게 확인해주세요.
|
|
width: 100.0,
|
|
height: 117.0,
|
|
fit: BoxFit.contain,
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildInfoCard() {
|
|
return Container(
|
|
height: 137.0,
|
|
decoration: BoxDecoration(
|
|
color: Theme.of(context).primaryColor,
|
|
borderRadius: BorderRadius.circular(5.7)),
|
|
child: Column(children: [
|
|
Expanded(
|
|
child: Row(children: [
|
|
const Expanded(
|
|
child: Center(
|
|
child: Text('Name /\nNumber',
|
|
textAlign: TextAlign.center,
|
|
style: TextStyle(color: Colors.white70, fontSize: 11)))),
|
|
const VerticalDivider(color: Colors.white24, thickness: 1),
|
|
Expanded(
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
const Icon(Icons.person_outline,
|
|
size: 16, color: Colors.white70),
|
|
const SizedBox(height: 4),
|
|
const Text('J.LIM',
|
|
style:
|
|
TextStyle(fontWeight: FontWeight.bold, fontSize: 13)),
|
|
const Text('001',
|
|
style:
|
|
TextStyle(fontWeight: FontWeight.bold, fontSize: 13))
|
|
]))
|
|
])),
|
|
const Divider(color: Colors.white24, height: 1),
|
|
Expanded(
|
|
child: Row(children: [
|
|
const Expanded(
|
|
child: Center(
|
|
child: Text('STATUS',
|
|
style: TextStyle(color: Colors.white70, fontSize: 11)))),
|
|
const VerticalDivider(color: Colors.white24, thickness: 1),
|
|
Expanded(
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
const Text('UNLOCKED',
|
|
style: TextStyle(
|
|
color: Colors.redAccent,
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 11)),
|
|
const SizedBox(height: 4),
|
|
Row(mainAxisAlignment: MainAxisAlignment.center, children: [
|
|
Container(
|
|
width: 7,
|
|
height: 7,
|
|
decoration: const BoxDecoration(
|
|
color: Colors.redAccent, shape: BoxShape.circle)),
|
|
const SizedBox(width: 4),
|
|
const Text('ACTIVE',
|
|
style: TextStyle(
|
|
color: Colors.redAccent,
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 11))
|
|
])
|
|
]))
|
|
]))
|
|
]));
|
|
}
|
|
|
|
Widget _buildBatteryStatusCard() {
|
|
return Container(
|
|
height: 132.0,
|
|
padding: const EdgeInsets.all(16),
|
|
decoration: BoxDecoration(
|
|
color: Theme.of(context).primaryColor,
|
|
borderRadius: BorderRadius.circular(5.7)),
|
|
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
|
Text('BATTERY STATUS (%)',
|
|
style: TextStyle(color: Colors.white70, fontSize: 12)),
|
|
const SizedBox(height: 12),
|
|
Expanded(
|
|
child: Row(children: [
|
|
SizedBox(
|
|
width: 70,
|
|
height: 70,
|
|
child: Stack(fit: StackFit.expand, children: [
|
|
const CircularProgressIndicator(
|
|
value: 1.0,
|
|
strokeWidth: 6,
|
|
backgroundColor: Colors.white24,
|
|
valueColor: AlwaysStoppedAnimation<Color>(Colors.green)), // 초록색으로 수정
|
|
Center(
|
|
child: Text('100',
|
|
style: Theme.of(context)
|
|
.textTheme
|
|
.bodyLarge
|
|
?.copyWith(
|
|
fontSize: 24, fontWeight: FontWeight.bold)))
|
|
])),
|
|
const SizedBox(width: 16),
|
|
Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
const Text('NOW',
|
|
style: TextStyle(color: Colors.white70, fontSize: 11)),
|
|
const SizedBox(height: 4),
|
|
const Text('사용 중',
|
|
style: TextStyle(
|
|
color: Colors.green,
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 11))
|
|
]),
|
|
const Spacer(),
|
|
Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
const Text('Solar Panel',
|
|
style: TextStyle(color: Colors.white70, fontSize: 11)),
|
|
const SizedBox(height: 4),
|
|
const Text('전압: 00 전류: 00',
|
|
style: TextStyle(color: Colors.white, fontSize: 11))
|
|
])
|
|
]))
|
|
]));
|
|
}
|
|
|
|
Widget _buildOverviewCard() {
|
|
return Container(
|
|
height: 88.0,
|
|
padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 12),
|
|
decoration: BoxDecoration(
|
|
color: Theme.of(context).primaryColor,
|
|
borderRadius: BorderRadius.circular(5.7)),
|
|
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
|
Text('OVERVIEW', style: TextStyle(color: Colors.white70, fontSize: 11)),
|
|
const SizedBox(height: 2),
|
|
Expanded(
|
|
child: Container(
|
|
decoration: BoxDecoration(
|
|
color: Theme.of(context).scaffoldBackgroundColor,
|
|
borderRadius: BorderRadius.circular(5.7)),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
|
children: [
|
|
_buildOverviewToggleSwitch('UV LED'),
|
|
_buildOverviewToggleSwitch('CHARGING'),
|
|
_buildOverviewToggleSwitch('HELMET'),
|
|
_buildOverviewToggleSwitch('FAN')
|
|
])))
|
|
]));
|
|
}
|
|
|
|
Widget _buildEnvironmentSensorsCard() {
|
|
return Container(
|
|
height: 88.0,
|
|
padding: const EdgeInsets.all(10),
|
|
decoration: BoxDecoration(
|
|
color: Theme.of(context).primaryColor,
|
|
borderRadius: BorderRadius.circular(5.7)),
|
|
child: Column(children: [
|
|
Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
|
|
Text('ENVIRONMENT SENSORS',
|
|
style: TextStyle(color: Colors.white70, fontSize: 11)),
|
|
Row(children: [
|
|
Text('VIEW HISTORY',
|
|
style: TextStyle(color: Colors.white70, fontSize: 9)),
|
|
Icon(Icons.arrow_forward_ios, size: 8, color: Colors.white70)
|
|
])
|
|
]),
|
|
const SizedBox(height: 4),
|
|
Expanded(
|
|
child: Row(
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
children: [
|
|
Column(
|
|
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
_buildSensorInfoRow(
|
|
Icons.water_drop_outlined, 'HUMID: 60%'),
|
|
_buildSensorInfoRow(Icons.thermostat, 'TEMP: 24.5℃')
|
|
]),
|
|
const SizedBox(width: 12),
|
|
const Expanded(child: _LineChartPlaceholder())
|
|
]))
|
|
]));
|
|
}
|
|
|
|
Widget _buildMyLocationCard() {
|
|
final LatLng exampleLocation = LatLng(37.5665, 126.9780);
|
|
return Container(
|
|
height: 174.0,
|
|
decoration: BoxDecoration(
|
|
color: Theme.of(context).primaryColor,
|
|
borderRadius: BorderRadius.circular(5.7),
|
|
),
|
|
child: ClipRRect(
|
|
borderRadius: BorderRadius.circular(5.7),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Padding(
|
|
padding: const EdgeInsets.fromLTRB(16, 16, 16, 0),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
const Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text('My Location', style: TextStyle(fontSize: 14, color: Colors.white, fontWeight: FontWeight.bold)),
|
|
SizedBox(height: 4),
|
|
Text('주소: 금주 남구 효덕로 277', style: TextStyle(fontSize: 12, color: Colors.white70)),
|
|
],
|
|
),
|
|
Row(
|
|
children: [
|
|
Text('VIEW MORE', style: TextStyle(color: Colors.white70, fontSize: 12)),
|
|
Icon(Icons.arrow_forward_ios, size: 10, color: Colors.white70),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
const SizedBox(height: 12),
|
|
Expanded(
|
|
child: FlutterMap(
|
|
options: MapOptions(
|
|
initialCenter: exampleLocation,
|
|
initialZoom: 15.0,
|
|
),
|
|
children: [
|
|
TileLayer(
|
|
urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
|
|
userAgentPackageName: 'com.example.smart_helmet_app',
|
|
),
|
|
MarkerLayer(
|
|
markers: [
|
|
Marker(
|
|
point: exampleLocation,
|
|
width: 80,
|
|
height: 80,
|
|
child: const Icon(Icons.location_pin, size: 40, color: Colors.red),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildActivityCard() {
|
|
return Container(
|
|
height: 86.0,
|
|
padding: const EdgeInsets.all(12),
|
|
decoration: BoxDecoration(
|
|
color: Theme.of(context).primaryColor,
|
|
borderRadius: BorderRadius.circular(5.7)),
|
|
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
|
const Text('Activity',
|
|
style:
|
|
TextStyle(fontSize: 12, color: Colors.white, fontWeight: FontWeight.bold)),
|
|
const SizedBox(height: 8),
|
|
Expanded(
|
|
child: Row(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
|
children: [
|
|
Text('08:15 AM - Battery fully Charged',
|
|
style: TextStyle(fontSize: 10, color: Colors.white70)),
|
|
Text('9:30 AM - UV LED Actived',
|
|
style: TextStyle(fontSize: 10, color: Colors.white70))
|
|
])),
|
|
const SizedBox(width: 16),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
|
children: [
|
|
Text('10:45 AM - Helmet Unlocked',
|
|
style: TextStyle(fontSize: 10, color: Colors.white70)),
|
|
Text('11:00 AM - Helmet Off',
|
|
style: TextStyle(fontSize: 10, color: Colors.white70))
|
|
]))
|
|
]))
|
|
]));
|
|
}
|
|
|
|
Widget _buildOverviewToggleSwitch(String title) {
|
|
return Expanded(
|
|
child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
|
|
Text(title, style: const TextStyle(fontSize: 9, color: Colors.white)),
|
|
Transform.scale(
|
|
scale: 0.6,
|
|
child: Switch.adaptive(
|
|
value: _overviewToggles[title]!,
|
|
onChanged: (bool value) {
|
|
setState(() {
|
|
_overviewToggles[title] = value;
|
|
});
|
|
},
|
|
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
|
|
activeColor: Colors.white,
|
|
activeTrackColor: Colors.blueAccent,
|
|
inactiveThumbColor: Colors.grey.shade400,
|
|
inactiveTrackColor: Colors.grey.shade700))
|
|
]));
|
|
}
|
|
|
|
Widget _buildSensorInfoRow(IconData icon, String text) {
|
|
return Row(children: [
|
|
Container(
|
|
padding: const EdgeInsets.all(4),
|
|
decoration: BoxDecoration(
|
|
color: Colors.white.withOpacity(0.1), shape: BoxShape.circle),
|
|
child: Icon(icon, color: Colors.white, size: 10)),
|
|
const SizedBox(width: 6),
|
|
Text(text, style: const TextStyle(fontSize: 9, color: Colors.white))
|
|
]);
|
|
}
|
|
}
|
|
|
|
class _LineChartPlaceholder extends StatelessWidget {
|
|
const _LineChartPlaceholder();
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Column(children: [
|
|
Expanded(
|
|
child: CustomPaint(painter: _LineChartPainter(), size: Size.infinite)),
|
|
const SizedBox(height: 4),
|
|
Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
|
|
Text('24H AGO', style: TextStyle(fontSize: 8, color: Colors.white54)),
|
|
Text('12H AGO', style: TextStyle(fontSize: 8, color: Colors.white54)),
|
|
Text('NOW', style: TextStyle(fontSize: 8, color: Colors.white54))
|
|
])
|
|
]);
|
|
}
|
|
}
|
|
|
|
class _LineChartPainter extends CustomPainter {
|
|
@override
|
|
void paint(ui.Canvas canvas, ui.Size size) {
|
|
final paint = Paint()
|
|
..color = Colors.white.withOpacity(0.8)
|
|
..strokeWidth = 1.5
|
|
..style = PaintingStyle.stroke;
|
|
|
|
final path = ui.Path();
|
|
path.moveTo(0, size.height * 0.6);
|
|
path.cubicTo(size.width * 0.1, size.height * 0.8, size.width * 0.2, size.height * 0.4, size.width * 0.3, size.height * 0.6);
|
|
path.cubicTo(size.width * 0.4, size.height * 0.8, size.width * 0.45, size.height * 0.2, size.width * 0.6, size.height * 0.5);
|
|
path.cubicTo(size.width * 0.75, size.height * 0.8, size.width * 0.8, size.height * 0.3, size.width, size.height * 0.2);
|
|
canvas.drawPath(path, paint);
|
|
}
|
|
|
|
@override
|
|
bool shouldRepaint(covariant CustomPainter oldDelegate) {
|
|
return false;
|
|
}
|
|
} |