vvip/smarthelmet_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1.테마/컬러 수정

Browse Source 
2. UI 텍스트 한국어 번역
3. SettingScreen(설정 페이지) -현재 페이지는 레이아웃만 완성되었으며, 토글 스위치 및 링크 연결 기능은 미완성 상태입니다.
This commit is contained in:
KIMGYEONGRAN
2025-12-01 17:55:38 +09:00
parent c1d8fc597d
commit acb297fec1
9 changed files with 1178 additions and 659 deletions
Download Patch File Download Diff File Expand all files Collapse all files

212
lib/rental_process_screen.dart
View File

@@ -1,4 +1,6 @@
import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';
class RentalProcessScreen extends StatelessWidget {
final String stationName;
@@ -8,25 +10,34 @@ class RentalProcessScreen extends StatelessWidget {
required this.stationName,
});
static const Color kBackgroundColor = Color(0xFF1E1E1E);
static const Color kCardColor = Color(0xFF2C2C2E);
static const Color kPrimaryGreen = Color(0xFF4CAF50);
static const Color kPrimaryOrange = Color(0xFFFF3D00);
static const Color _mainBlueColor = Color(0xFF002FA7);
static const Color _mainTextColor = Color(0xFF1C1C1E);
static const Color _subTextColor = Color(0xFF6A717B);
static const Color _pageBackgroundColor = Color(0xFFF5F7F9);
static const Color _cardBackgroundColor = Colors.white;
static const Color _accentContainerColor = Color(0xFFF0F2F5);
static const Color _borderColor = Color(0xFF007AFF);
static const Color _primaryGreen = Color(0xFF4CAF50);
static const Color _primaryOrange = Color(0xFFFF3D00);
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: kBackgroundColor,
backgroundColor: _pageBackgroundColor,
appBar: AppBar(
scrolledUnderElevation: 0,
title: Text(
stationName,
style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 16, color: Colors.white),
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16,
color: _mainTextColor),
),
backgroundColor: kCardColor,
backgroundColor: _cardBackgroundColor,
elevation: 0,
actions: [
IconButton(
icon: const Icon(Icons.more_vert, color: Colors.white),
icon: const Icon(Icons.more_vert, color: _mainTextColor),
onPressed: () {},
),
],
@@ -39,52 +50,51 @@ class RentalProcessScreen extends StatelessWidget {
children: [
_buildStatusCard(context),
const SizedBox(height: 24),
_buildProcessSectionTitle('HELMET RENTAL PROCESS'),
_buildProcessSectionTitle('헬멧 대여 순서'),
const SizedBox(height: 12),
Container(
decoration: BoxDecoration(
color: kCardColor,
color: _cardBackgroundColor,
borderRadius: BorderRadius.circular(12),
),
child: Column(
children: [
_buildStepRow(1, 'UNLOCK & OPEN', Icons.lock_open, isCompleted: true),
_buildStepRow(1, '잠금 해제 & 문 열림', Icons.lock_open,
isCompleted: true),
_buildDivider(),
_buildStepRow(2, 'DOOR STATUS', Icons.sensor_door_outlined),
_buildStepRow(2, '문 상태 확인', Icons.sensor_door_outlined),
_buildDivider(),
_buildStepRow(3, 'TAKE HELMET', Icons.outbox),
_buildStepRow(3, '헬멧 꺼내기', Icons.outbox),
_buildDivider(),
_buildStepRow(4, 'ENJOY RIDING!', Icons.sentiment_satisfied_alt, showDivider: false),
_buildStepRow(4, '주행 시작 !', Icons.sentiment_satisfied_alt,
showDivider: false),
],
),
),
const SizedBox(height: 24),
_buildProcessSectionTitle('HELMET RETURN PROCESS'),
_buildProcessSectionTitle('헬멧 반납 과정'),
const SizedBox(height: 12),
Container(
decoration: BoxDecoration(
color: kCardColor,
color: _cardBackgroundColor,
borderRadius: BorderRadius.circular(12),
),
child: Column(
children: [
_buildStepRow(1, 'UNLOCK & OPEN', Icons.lock_open),
_buildStepRow(1, '잠금해제 & 문열림', Icons.lock_open),
_buildDivider(),
_buildStepRow(2, 'INSERT HELMET', Icons.move_to_inbox),
_buildStepRow(2, '헬멧 넣기', Icons.move_to_inbox),
_buildDivider(),
_buildStepRow(3, 'SENSOR SCANNING\n& RETURN COMPLETE', Icons.sync),
_buildStepRow(3, '센서 스캔 & 반납 완료', Icons.sync),
_buildDivider(),
_buildStepRow(4, 'SANITIZING', Icons.shield_outlined, showDivider: false),
_buildStepRow(4, '살균 시작', Icons.shield_outlined,
showDivider: false),
],
),
),
const SizedBox(height: 24),
_buildErrorAlertBox(),
const SizedBox(height: 24),
_buildLogsCard(context),
const SizedBox(height: 20),
],
@@ -98,16 +108,18 @@ class RentalProcessScreen extends StatelessWidget {
return Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: kCardColor,
color: _cardBackgroundColor,
borderRadius: BorderRadius.circular(12),
),
child: Column(
children: [
Row(
children: const [
Icon(Icons.circle, color: kPrimaryOrange, size: 16),
Icon(Icons.circle, color: _primaryOrange, size: 16),
SizedBox(width: 6),
Text('IN USE', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
Text('사용 중',
style: TextStyle(
color: _mainTextColor, fontWeight: FontWeight.bold)),
],
),
const SizedBox(height: 20),
@@ -119,13 +131,16 @@ class RentalProcessScreen extends StatelessWidget {
height: 150,
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: kBackgroundColor,
color: _accentContainerColor,
borderRadius: BorderRadius.circular(12),
),
child: Image.asset(
'assets/images/open.png',
fit: BoxFit.contain,
errorBuilder: (context, error, stackTrace) => const Icon(Icons.inventory_2, size: 50, color: Colors.white54),
errorBuilder: (context, error, stackTrace) => const Icon(
Icons.inventory_2,
size: 50,
color: _subTextColor),
),
),
const SizedBox(width: 20),
@@ -133,7 +148,8 @@ class RentalProcessScreen extends StatelessWidget {
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text('NOW', style: TextStyle(color: Colors.grey, fontSize: 12)),
const Text('NOW',
style: TextStyle(color: _subTextColor, fontSize: 12)),
const SizedBox(height: 8),
SizedBox(
width: double.infinity,
@@ -143,17 +159,20 @@ class RentalProcessScreen extends StatelessWidget {
const SnackBar(
content: Text('문이 열렸습니다! (OPEN 버튼 눌림)'),
duration: Duration(seconds: 1),
backgroundColor: Colors.blue,
backgroundColor: _mainBlueColor,
),
);
},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white,
foregroundColor: Colors.black,
backgroundColor: _mainBlueColor,
foregroundColor: Colors.white,
padding: const EdgeInsets.symmetric(vertical: 12),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8)),
),
child: const Text('OPEN', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16)),
child: const Text('OPEN',
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 16)),
),
),
const SizedBox(height: 12),
@@ -161,13 +180,16 @@ class RentalProcessScreen extends StatelessWidget {
width: double.infinity,
padding: const EdgeInsets.symmetric(vertical: 12),
decoration: BoxDecoration(
color: kBackgroundColor,
color: _accentContainerColor,
borderRadius: BorderRadius.circular(8),
),
child: const Center(
child: Text(
'SENSOR ERROR:\nLOCK FAIL',
style: TextStyle(color: kPrimaryOrange, fontWeight: FontWeight.bold, height: 1.2),
'ERROR:\nLOCK FAIL',
style: TextStyle(
color: _primaryOrange,
fontWeight: FontWeight.bold,
height: 1.2),
textAlign: TextAlign.center,
),
),
@@ -185,11 +207,13 @@ class RentalProcessScreen extends StatelessWidget {
Widget _buildProcessSectionTitle(String title) {
return Text(
title,
style: const TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 16),
style: const TextStyle(
color: _mainTextColor, fontWeight: FontWeight.bold, fontSize: 16),
);
}
Widget _buildStepRow(int step, String title, IconData icon, {bool isCompleted = false, bool showDivider = true}) {
Widget _buildStepRow(int step, String title, IconData icon,
{bool isCompleted = false, bool showDivider = true}) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 16),
child: Row(
@@ -199,45 +223,64 @@ class RentalProcessScreen extends StatelessWidget {
children: [
Row(
children: [
Text('STEP $step', style: const TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
Text('STEP $step',
style: const TextStyle(
color: _mainTextColor, fontWeight: FontWeight.bold)),
if (isCompleted) ...[
const SizedBox(width: 8),
const Icon(Icons.check_circle, color: kPrimaryGreen, size: 16),
const Icon(Icons.check_circle,
color: _primaryGreen, size: 16),
],
],
),
const SizedBox(height: 4),
Text(title, style: const TextStyle(color: Colors.white, fontSize: 18, letterSpacing: 0.6)),
Text(title,
style: const TextStyle(
color: _mainTextColor, fontSize: 18, letterSpacing: 0.6)),
],
),
const Spacer(),
Icon(icon, color: isCompleted ? Colors.white : Colors.grey, size: 48),
Icon(icon,
color: isCompleted ? _mainBlueColor : _subTextColor, size: 48),
],
),
);
}
Widget _buildDivider() {
return const Divider(color: Colors.white, height: 1, thickness: 1, indent: 20, endIndent: 20);
return Divider(
color: _subTextColor.withOpacity(0.5),
height: 1,
thickness: 1,
indent: 20,
endIndent: 20);
}
Widget _buildErrorAlertBox() {
return Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: kCardColor.withOpacity(0.5),
border: Border.all(color: kPrimaryOrange, width: 2),
color: _accentContainerColor,
border: Border.all(color: _primaryOrange, width: 2),
borderRadius: BorderRadius.circular(12),
),
child: Row(
children: const [
Icon(Icons.warning_amber_rounded, color: kPrimaryOrange, size: 40),
Icon(Icons.warning_amber_rounded, color: _primaryOrange, size: 40),
SizedBox(width: 16),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('SENSOR ERROR:', style: TextStyle(color: kPrimaryOrange, fontWeight: FontWeight.bold, fontSize: 16)),
Text('LOCK FAILURE', style: TextStyle(color: kPrimaryOrange, fontWeight: FontWeight.bold, fontSize: 16)),
Text('SENSOR ERROR:',
style: TextStyle(
color: _primaryOrange,
fontWeight: FontWeight.bold,
fontSize: 16)),
Text('LOCK FAILURE',
style: TextStyle(
color: _primaryOrange,
fontWeight: FontWeight.bold,
fontSize: 16)),
],
),
],
@@ -249,7 +292,7 @@ class RentalProcessScreen extends StatelessWidget {
return Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: kCardColor,
color: _cardBackgroundColor,
borderRadius: BorderRadius.circular(12),
),
child: Column(
@@ -257,24 +300,29 @@ class RentalProcessScreen extends StatelessWidget {
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text('LOGS', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
const Text('LOGS',
style: TextStyle(
color: _mainTextColor, fontWeight: FontWeight.bold)),
InkWell(
onTap: () => _showLogHistory(context),
child: Text('VIEW MORE >', style: TextStyle(color: Colors.grey[400], fontSize: 12)),
child: Text('VIEW MORE >',
style: TextStyle(color: _subTextColor, fontSize: 12)),
),
],
),
const SizedBox(height: 12),
Row(
children: const [
Icon(Icons.check_circle, color: kPrimaryGreen, size: 16),
SizedBox(width: 8),
Text('Available: Door Fully Closed', style: TextStyle(color: Colors.white70)),
children: [
const Icon(Icons.check_circle, color: _mainBlueColor, size: 16),
const SizedBox(width: 8),
const Text('Available: Door Fully Closed',
style: TextStyle(color: _mainTextColor)),
],
),
Padding(
padding: const EdgeInsets.only(left: 24.0, top: 4),
child: Text('(2025-11-19)/(08:58)', style: TextStyle(color: Colors.grey[600], fontSize: 12)),
child: Text('(2025-11-19)/(08:58)',
style: TextStyle(color: _subTextColor, fontSize: 12)),
),
],
),
@@ -289,31 +337,43 @@ class RentalProcessScreen extends StatelessWidget {
builder: (context) {
return Container(
height: MediaQuery.of(context).size.height * 0.6,
decoration: const BoxDecoration(
color: Color(0xFF1E1E1E),
borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
decoration: BoxDecoration(
color: _cardBackgroundColor,
borderRadius: const BorderRadius.vertical(top: Radius.circular(20)),
),
child: Column(
children: [
const SizedBox(height: 12),
Container(
width: 40, height: 4,
decoration: BoxDecoration(color: Colors.grey[600], borderRadius: BorderRadius.circular(2)),
width: 40,
height: 4,
decoration: BoxDecoration(
color: _subTextColor,
borderRadius: BorderRadius.circular(2)),
),
const Padding(
padding: EdgeInsets.all(20.0),
child: Text("DEVICE LOGS", style: TextStyle(color: Colors.white, fontSize: 18, fontWeight: FontWeight.bold)),
child: Text("DEVICE LOGS",
style: TextStyle(
color: _mainTextColor,
fontSize: 18,
fontWeight: FontWeight.bold)),
),
const Divider(color: Colors.white24, height: 1),
Divider(color: _subTextColor.withOpacity(0.5), height: 1),
Expanded(
child: ListView(
padding: const EdgeInsets.all(20),
children: [
_buildLogItem("08:58:33", "Door Fully Closed", Icons.door_front_door, Colors.green),
_buildLogItem("08:58:30", "Helmet Returned (Sensor A)", Icons.check_circle_outline, Colors.blue),
_buildLogItem("08:55:12", "User Unlocked Door", Icons.lock_open, Colors.white),
_buildLogItem("08:30:00", "UV Sanitization Complete", Icons.cleaning_services, Colors.purpleAccent),
_buildLogItem("08:00:00", "System Boot Up", Icons.power_settings_new, Colors.grey),
_buildLogItem("08:58:33", "Door Fully Closed",
Icons.door_front_door, _mainBlueColor),
_buildLogItem("08:58:30", "Helmet Returned (Sensor A)",
Icons.check_circle_outline, _mainBlueColor),
_buildLogItem("08:55:12", "User Unlocked Door",
Icons.lock_open, _mainTextColor),
_buildLogItem("08:30:00", "UV Sanitization Complete",
Icons.cleaning_services, _mainBlueColor),
_buildLogItem("08:00:00", "System Boot Up",
Icons.power_settings_new, _subTextColor),
],
),
),
@@ -324,23 +384,27 @@ class RentalProcessScreen extends StatelessWidget {
);
}
Widget _buildLogItem(String time, String message, IconData icon, Color color) {
Widget _buildLogItem(
String time, String message, IconData icon, Color color) {
return Padding(
padding: const EdgeInsets.only(bottom: 20.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(time, style: const TextStyle(color: Colors.grey, fontSize: 12)),
Text(time,
style: const TextStyle(color: _subTextColor, fontSize: 12)),
const SizedBox(width: 16),
Column(
children: [
Icon(icon, color: color, size: 20),
Container(width: 2, height: 20, color: Colors.white12),
Container(
width: 2, height: 20, color: _subTextColor.withOpacity(0.5)),
],
),
const SizedBox(width: 16),
Expanded(
child: Text(message, style: const TextStyle(color: Colors.white70, fontSize: 14)),
child: Text(message,
style: const TextStyle(color: _mainTextColor, fontSize: 14)),
),
],
),