1. 하단 네비게이션 바 수정
2. 대여소 지도 및 리스트 화면 제작 (RentReturnScreen) 3. 대여/반납 상세 진행 화면 구현 (RentalProcessScreen)
This commit is contained in:
KIMGYEONGRAN
349
lib/rental_process_screen.dart
Normal file
349
lib/rental_process_screen.dart
Normal file
@@ -0,0 +1,349 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class RentalProcessScreen extends StatelessWidget {
|
||||
final String stationName;
|
||||
|
||||
const RentalProcessScreen({
|
||||
super.key,
|
||||
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);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
backgroundColor: kBackgroundColor,
|
||||
appBar: AppBar(
|
||||
title: Text(
|
||||
stationName,
|
||||
style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 16, color: Colors.white),
|
||||
),
|
||||
backgroundColor: kCardColor,
|
||||
elevation: 0,
|
||||
actions: [
|
||||
IconButton(
|
||||
icon: const Icon(Icons.more_vert, color: Colors.white),
|
||||
onPressed: () {},
|
||||
),
|
||||
],
|
||||
),
|
||||
body: SingleChildScrollView(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
_buildStatusCard(context),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
_buildProcessSectionTitle('HELMET RENTAL PROCESS'),
|
||||
const SizedBox(height: 12),
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
color: kCardColor,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
_buildStepRow(1, 'UNLOCK & OPEN', Icons.lock_open, isCompleted: true),
|
||||
_buildDivider(),
|
||||
_buildStepRow(2, 'DOOR STATUS', Icons.sensor_door_outlined),
|
||||
_buildDivider(),
|
||||
_buildStepRow(3, 'TAKE HELMET', Icons.outbox),
|
||||
_buildDivider(),
|
||||
_buildStepRow(4, 'ENJOY RIDING!', Icons.sentiment_satisfied_alt, showDivider: false),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
_buildProcessSectionTitle('HELMET RETURN PROCESS'),
|
||||
const SizedBox(height: 12),
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
color: kCardColor,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
_buildStepRow(1, 'UNLOCK & OPEN', Icons.lock_open),
|
||||
_buildDivider(),
|
||||
_buildStepRow(2, 'INSERT HELMET', Icons.move_to_inbox),
|
||||
_buildDivider(),
|
||||
_buildStepRow(3, 'SENSOR SCANNING\n& RETURN COMPLETE', Icons.sync),
|
||||
_buildDivider(),
|
||||
_buildStepRow(4, 'SANITIZING', Icons.shield_outlined, showDivider: false),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
_buildErrorAlertBox(),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
_buildLogsCard(context),
|
||||
const SizedBox(height: 20),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildStatusCard(BuildContext context) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(20),
|
||||
decoration: BoxDecoration(
|
||||
color: kCardColor,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
Row(
|
||||
children: const [
|
||||
Icon(Icons.circle, color: kPrimaryOrange, size: 16),
|
||||
SizedBox(width: 6),
|
||||
Text('IN USE', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Container(
|
||||
width: 150,
|
||||
height: 150,
|
||||
padding: const EdgeInsets.all(10),
|
||||
decoration: BoxDecoration(
|
||||
color: kBackgroundColor,
|
||||
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),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 20),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
const Text('NOW', style: TextStyle(color: Colors.grey, fontSize: 12)),
|
||||
const SizedBox(height: 8),
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
child: ElevatedButton(
|
||||
onPressed: () {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
const SnackBar(
|
||||
content: Text('문이 열렸습니다! (OPEN 버튼 눌림)'),
|
||||
duration: Duration(seconds: 1),
|
||||
backgroundColor: Colors.blue,
|
||||
),
|
||||
);
|
||||
},
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: Colors.white,
|
||||
foregroundColor: Colors.black,
|
||||
padding: const EdgeInsets.symmetric(vertical: 12),
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
|
||||
),
|
||||
child: const Text('OPEN', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16)),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
Container(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.symmetric(vertical: 12),
|
||||
decoration: BoxDecoration(
|
||||
color: kBackgroundColor,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
child: const Center(
|
||||
child: Text(
|
||||
'SENSOR ERROR:\nLOCK FAIL',
|
||||
style: TextStyle(color: kPrimaryOrange, fontWeight: FontWeight.bold, height: 1.2),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildProcessSectionTitle(String title) {
|
||||
return Text(
|
||||
title,
|
||||
style: const TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 16),
|
||||
);
|
||||
}
|
||||
|
||||
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(
|
||||
children: [
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Text('STEP $step', style: const TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
|
||||
if (isCompleted) ...[
|
||||
const SizedBox(width: 8),
|
||||
const Icon(Icons.check_circle, color: kPrimaryGreen, size: 16),
|
||||
],
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(title, style: const TextStyle(color: Colors.white, fontSize: 18, letterSpacing: 0.6)),
|
||||
],
|
||||
),
|
||||
const Spacer(),
|
||||
Icon(icon, color: isCompleted ? Colors.white : Colors.grey, size: 48),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildDivider() {
|
||||
return const Divider(color: Colors.white, 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),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: Row(
|
||||
children: const [
|
||||
Icon(Icons.warning_amber_rounded, color: kPrimaryOrange, 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)),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildLogsCard(BuildContext context) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(20),
|
||||
decoration: BoxDecoration(
|
||||
color: kCardColor,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
const Text('LOGS', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
|
||||
InkWell(
|
||||
onTap: () => _showLogHistory(context),
|
||||
child: Text('VIEW MORE >', style: TextStyle(color: Colors.grey[400], 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)),
|
||||
],
|
||||
),
|
||||
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)),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
void _showLogHistory(BuildContext context) {
|
||||
showModalBottomSheet(
|
||||
context: context,
|
||||
backgroundColor: Colors.transparent,
|
||||
isScrollControlled: true,
|
||||
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)),
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
const SizedBox(height: 12),
|
||||
Container(
|
||||
width: 40, height: 4,
|
||||
decoration: BoxDecoration(color: Colors.grey[600], 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)),
|
||||
),
|
||||
const Divider(color: Colors.white24, 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),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
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)),
|
||||
const SizedBox(width: 16),
|
||||
Column(
|
||||
children: [
|
||||
Icon(icon, color: color, size: 20),
|
||||
Container(width: 2, height: 20, color: Colors.white12),
|
||||
],
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
Expanded(
|
||||
child: Text(message, style: const TextStyle(color: Colors.white70, fontSize: 14)),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user