439 lines
13 KiB
Dart
439 lines
13 KiB
Dart
import 'package:flutter/material.dart';
|
|
|
|
class ControlScreen extends StatefulWidget {
|
|
const ControlScreen({super.key});
|
|
|
|
@override
|
|
State<ControlScreen> createState() => _ControlScreenState();
|
|
}
|
|
|
|
class _ControlScreenState extends State<ControlScreen> {
|
|
final Color _bgColor = const Color(0xFF27292B);
|
|
final Color _cardColor = const Color(0xFF30343B);
|
|
final Color _buttonDarkColor = const Color(0xFF212327);
|
|
final Color _errorColor = Colors.redAccent;
|
|
|
|
bool _isSecurityLocked = true;
|
|
int _selectedDoorIndex = 0;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
backgroundColor: _bgColor,
|
|
appBar: AppBar(
|
|
title: const Text(
|
|
'CONTROL CENTER',
|
|
style: TextStyle(
|
|
fontWeight: FontWeight.w700,
|
|
fontSize: 16,
|
|
color: Colors.white,
|
|
),
|
|
),
|
|
backgroundColor: _bgColor,
|
|
scrolledUnderElevation: 0,
|
|
elevation: 0,
|
|
centerTitle: false,
|
|
actions: [
|
|
IconButton(
|
|
icon: const Icon(Icons.more_vert, color: Colors.white),
|
|
onPressed: () {},
|
|
),
|
|
],
|
|
),
|
|
body: SingleChildScrollView(
|
|
padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 16.0),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
_buildSystemStatusCard(),
|
|
const SizedBox(height: 16),
|
|
_buildDoorControlCard(),
|
|
const SizedBox(height: 16),
|
|
_buildControlResultsCard(),
|
|
const SizedBox(height: 16),
|
|
_buildAlertLogsCard(),
|
|
const SizedBox(height: 16),
|
|
_buildSecuritySwitchCard(),
|
|
const SizedBox(height: 24),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildSystemStatusCard() {
|
|
const double cardContentHeight = 150.0;
|
|
|
|
return Container(
|
|
padding: const EdgeInsets.all(16),
|
|
decoration: BoxDecoration(
|
|
color: _cardColor,
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
const Text(
|
|
'SYSTEM STATUS',
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 14,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
const SizedBox(height: 16),
|
|
SizedBox(
|
|
height: cardContentHeight,
|
|
child: Row(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Container(
|
|
width: 130,
|
|
height: double.infinity,
|
|
padding: const EdgeInsets.all(20.0),
|
|
decoration: BoxDecoration(
|
|
color: _buttonDarkColor,
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
child: Image.asset(
|
|
'assets/images/storage.png',
|
|
fit: BoxFit.contain,
|
|
),
|
|
),
|
|
const SizedBox(width: 16),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
const Text(
|
|
'NOW',
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 11,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
const SizedBox(height: 8),
|
|
Expanded(
|
|
child: _buildStatusButton(
|
|
text: 'ONLINE',
|
|
textColor: Colors.white,
|
|
bgColor: _buttonDarkColor,
|
|
),
|
|
),
|
|
const SizedBox(height: 10),
|
|
Expanded(
|
|
child: _buildStatusButton(
|
|
text: 'SENSOR ERROR:\nLock Failure',
|
|
textColor: _errorColor,
|
|
bgColor: _buttonDarkColor,
|
|
isError: true,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildStatusButton({
|
|
required String text,
|
|
required Color textColor,
|
|
required Color bgColor,
|
|
bool isError = false,
|
|
}) {
|
|
return Container(
|
|
width: double.infinity,
|
|
alignment: Alignment.center,
|
|
decoration: BoxDecoration(
|
|
color: bgColor,
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
child: Text(
|
|
text,
|
|
textAlign: TextAlign.center,
|
|
style: TextStyle(
|
|
color: textColor,
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: isError ? 12 : 14,
|
|
height: 1.2,
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildDoorControlCard() {
|
|
return Container(
|
|
padding: const EdgeInsets.all(16),
|
|
decoration: BoxDecoration(
|
|
color: _cardColor,
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
const Text(
|
|
'DOOR CONTROL',
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 14,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
const SizedBox(height: 16),
|
|
Row(
|
|
children: [
|
|
_buildDoorButton(0, 'OPEN'),
|
|
const SizedBox(width: 12),
|
|
_buildDoorButton(1, 'CLOSE'),
|
|
const SizedBox(width: 12),
|
|
_buildDoorButton(2, 'LOCK'),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildDoorButton(int index, String text) {
|
|
final bool isSelected = _selectedDoorIndex == index;
|
|
|
|
return Expanded(
|
|
child: GestureDetector(
|
|
onTap: () {
|
|
setState(() {
|
|
_selectedDoorIndex = index;
|
|
});
|
|
},
|
|
child: Container(
|
|
height: 80,
|
|
decoration: BoxDecoration(
|
|
color: isSelected ? Colors.white : _buttonDarkColor,
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
child: Center(
|
|
child: Text(
|
|
text,
|
|
style: TextStyle(
|
|
color: isSelected ? Colors.black : Colors.white,
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 18,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildControlResultsCard() {
|
|
return Container(
|
|
padding: const EdgeInsets.all(16),
|
|
decoration: BoxDecoration(
|
|
color: _cardColor,
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
const Text(
|
|
'Control Results & Alerts',
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 14,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
const SizedBox(height: 16),
|
|
Container(
|
|
padding: const EdgeInsets.all(12),
|
|
decoration: BoxDecoration(
|
|
color: _buttonDarkColor,
|
|
borderRadius: BorderRadius.circular(6),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
Icon(Icons.warning_amber_rounded,
|
|
color: _errorColor, size: 16),
|
|
const SizedBox(width: 8),
|
|
Expanded(
|
|
child: RichText(
|
|
text: TextSpan(
|
|
children: [
|
|
TextSpan(
|
|
text: 'Sensor Alert: ',
|
|
style: TextStyle(
|
|
color: _errorColor,
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 12,
|
|
),
|
|
),
|
|
const TextSpan(
|
|
text: 'Door Not Fully Closed',
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 12,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 12),
|
|
ClipRRect(
|
|
borderRadius: BorderRadius.circular(4),
|
|
child: LinearProgressIndicator(
|
|
value: 0.6,
|
|
backgroundColor: Colors.grey[800],
|
|
valueColor: AlwaysStoppedAnimation<Color>(_errorColor),
|
|
minHeight: 6,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildAlertLogsCard() {
|
|
return Container(
|
|
padding: const EdgeInsets.all(16),
|
|
decoration: BoxDecoration(
|
|
color: _cardColor,
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
const Text(
|
|
'Alert & Logs',
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 14,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
const SizedBox(height: 16),
|
|
Container(
|
|
padding: const EdgeInsets.all(12),
|
|
decoration: BoxDecoration(
|
|
color: _buttonDarkColor,
|
|
borderRadius: BorderRadius.circular(6),
|
|
),
|
|
child: const Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
Icon(Icons.warning_amber_rounded,
|
|
color: Colors.redAccent, size: 14),
|
|
SizedBox(width: 8),
|
|
Text(
|
|
'Sensor Alert: Door Not Fully Closed',
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 12,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
SizedBox(height: 8),
|
|
Row(
|
|
children: [
|
|
Icon(Icons.bookmark, color: Colors.white70, size: 14),
|
|
SizedBox(width: 8),
|
|
Text(
|
|
'2:02 PM - UV LED Activated',
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 12,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildSecuritySwitchCard() {
|
|
return Container(
|
|
padding: const EdgeInsets.all(16),
|
|
decoration: BoxDecoration(
|
|
color: _cardColor,
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
const Text(
|
|
'Security Lock Mode',
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 14,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
const SizedBox(height: 16),
|
|
Container(
|
|
padding:
|
|
const EdgeInsets.symmetric(horizontal: 22, vertical: 16),
|
|
decoration: BoxDecoration(
|
|
color: _buttonDarkColor,
|
|
borderRadius: BorderRadius.circular(6),
|
|
),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Text(
|
|
_isSecurityLocked
|
|
? 'ON (Activated)'
|
|
: 'OFF (Deactivated)',
|
|
style: const TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 16,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
Transform.scale(
|
|
scale: 1.1,
|
|
child: Switch(
|
|
value: _isSecurityLocked,
|
|
onChanged: (val) {
|
|
setState(() {
|
|
_isSecurityLocked = val;
|
|
});
|
|
},
|
|
activeThumbColor: Colors.white,
|
|
activeTrackColor: _errorColor,
|
|
inactiveThumbColor: Colors.white,
|
|
inactiveTrackColor: Colors.grey,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|