import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
class SmartHomeDashboardScreen extends StatelessWidget {
const SmartHomeDashboardScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFF0B0F1D),
body: SafeArea(
child: Padding(
padding: REdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_buildHeader(),
SizedBox(height: 20.h),
_buildCurrentUsage(),
SizedBox(height: 20.h),
_buildTabBar(),
SizedBox(height: 12.h),
Expanded(child: _buildDeviceCardsGrid()),
],
),
),
),
);
}
Widget _buildHeader() {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
const CircleAvatar(
backgroundImage: AssetImage('assets/avatar.jpg'),
radius: 22,
),
SizedBox(width: 12.w),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Hello, Sourasith", style: TextStyle(fontSize: 16.sp, color: Colors.white, fontWeight: FontWeight.w600)),
Text("You have 20 devices currently on", style: TextStyle(fontSize: 12.sp, color: Colors.white60)),
],
),
],
),
const Icon(Icons.notifications_none, color: Colors.white),
],
);
}
Widget _buildCurrentUsage() {
return Container(
padding: REdgeInsets.all(16),
decoration: BoxDecoration(
color: const Color(0xFF151C33),
borderRadius: BorderRadius.circular(20.r),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Current Energy Usage", style: TextStyle(fontSize: 14.sp, color: Colors.white)),
SizedBox(height: 8.h),
Text("2.1 kW", style: TextStyle(fontSize: 28.sp, color: Colors.blueAccent, fontWeight: FontWeight.bold)),
SizedBox(height: 4.h),
Text("Your home's power draw at this moment.", style: TextStyle(color: Colors.white60, fontSize: 12.sp)),
SizedBox(height: 16.h),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
_usageInfo(icon: Icons.bolt, label: "48 kWh", desc: "24-Hr Usage"),
_usageInfo(icon: Icons.attach_money, label: "\$5.20", desc: "Estimated Cost"),
],
)
],
),
);
}
Widget _usageInfo({required IconData icon, required String label, required String desc}) {
return Row(
children: [
CircleAvatar(
backgroundColor: Colors.blue.shade900,
child: Icon(icon, color: Colors.white, size: 16),
),
SizedBox(width: 10.w),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(label, style: TextStyle(fontSize: 14.sp, color: Colors.white, fontWeight: FontWeight.w600)),
Text(desc, style: TextStyle(fontSize: 12.sp, color: Colors.white60)),
],
)
],
);
}
Widget _buildTabBar() {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
_tabButton("Devices", isActive: true),
_tabButton("Rooms", isActive: false),
Container(
decoration: BoxDecoration(
gradient: LinearGradient(colors: [Colors.blueAccent, Colors.cyanAccent]),
borderRadius: BorderRadius.circular(16.r),
),
padding: REdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: Row(
children: [
Icon(Icons.add, color: Colors.white, size: 16),
SizedBox(width: 4),
Text("Add", style: TextStyle(color: Colors.white, fontSize: 12.sp)),
],
),
),
],
);
}
Widget _tabButton(String label, {required bool isActive}) {
return Container(
padding: REdgeInsets.symmetric(horizontal: 20, vertical: 10),
decoration: BoxDecoration(
gradient: isActive
? LinearGradient(colors: [Colors.blueAccent, Colors.cyan])
: null,
color: isActive ? null : const Color(0xFF1A2238),
borderRadius: BorderRadius.circular(16.r),
),
child: Text(label, style: TextStyle(color: Colors.white, fontSize: 13.sp)),
);
}
Widget _buildDeviceCardsGrid() {
final List<Map<String, dynamic>> devices = [
{'name': 'Thermostats', 'icon': Icons.thermostat, 'status': true},
{'name': 'Lighting', 'icon': Icons.lightbulb_outline, 'status': true},
{'name': 'Appliances', 'icon': Icons.kitchen, 'status': true},
{'name': 'Wi-Fi Systems', 'icon': Icons.router, 'status': true},
];
return GridView.builder(
padding: EdgeInsets.only(top: 12.h),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 12.w,
mainAxisSpacing: 12.h,
childAspectRatio: 1,
),
itemCount: devices.length,
itemBuilder: (_, i) => _deviceCard(
icon: devices[i]['icon'],
name: devices[i]['name'],
status: devices[i]['status'],
),
);
}
Widget _deviceCard({required IconData icon, required String name, required bool status}) {
return Container(
padding: REdgeInsets.all(16),
decoration: BoxDecoration(
color: const Color(0xFF1A2238),
borderRadius: BorderRadius.circular(20.r),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(icon, color: Colors.white, size: 28),
SizedBox(height: 12.h),
Text(name, style: TextStyle(color: Colors.white, fontSize: 14.sp)),
Text("1 device", style: TextStyle(color: Colors.white54, fontSize: 11.sp)),
const Spacer(),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("ON", style: TextStyle(color: Colors.white70, fontSize: 12.sp)),
Switch(
value: status,
onChanged: (_) {},
activeColor: Colors.cyanAccent,
)
],
)
],
),
);
}
}