Progress on making EnergyManagementView responsive.

This commit is contained in:
Faris Armoush
2025-05-05 09:47:54 +03:00
parent 7467be6980
commit cd8264b6ce
5 changed files with 125 additions and 47 deletions

View File

@ -40,34 +40,70 @@ class _AnalyticsEnergyManagementViewState
);
}
static const _padding = EdgeInsetsDirectional.all(32);
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsetsDirectional.all(32),
child: Row(
spacing: 20,
children: [
const Expanded(
flex: 2,
return LayoutBuilder(
builder: (context, constraints) {
final isMediumOrLess = constraints.maxWidth <= 900;
if (isMediumOrLess) {
return SingleChildScrollView(
padding: _padding,
child: Column(
spacing: 20,
spacing: 32,
children: [
Expanded(child: TotalEnergyConsumptionChartBox()),
Expanded(child: EnergyConsumptionPerDeviceChartBox()),
SizedBox(
height: MediaQuery.of(context).size.height * 0.9,
child: Container(
decoration: subSectionContainerDecoration.copyWith(
borderRadius: BorderRadius.circular(30),
),
padding: const EdgeInsetsDirectional.all(32),
child: const PowerClampEnergyDataWidget(),
),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.5,
child: const TotalEnergyConsumptionChartBox(),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.5,
child: const EnergyConsumptionPerDeviceChartBox(),
),
],
),
),
Expanded(
child: Container(
decoration: subSectionContainerDecoration.copyWith(
borderRadius: BorderRadius.circular(30),
);
}
return Padding(
padding: _padding,
child: Row(
spacing: 32,
children: [
const Expanded(
flex: 2,
child: Column(
spacing: 20,
children: [
Expanded(child: TotalEnergyConsumptionChartBox()),
Expanded(child: EnergyConsumptionPerDeviceChartBox()),
],
),
),
padding: const EdgeInsetsDirectional.all(32),
child: const PowerClampEnergyDataWidget(),
),
Expanded(
child: Container(
decoration: subSectionContainerDecoration.copyWith(
borderRadius: BorderRadius.circular(30),
),
padding: const EdgeInsetsDirectional.all(32),
child: const PowerClampEnergyDataWidget(),
),
),
],
),
],
),
);
},
);
}
}

View File

@ -21,7 +21,16 @@ class EnergyConsumptionPerDeviceChartBox extends StatelessWidget {
Row(
spacing: 32,
children: [
ChartTitle(title: Text('Energy Consumption per Device')),
Expanded(
flex: 3,
child: FittedBox(
fit: BoxFit.scaleDown,
alignment: AlignmentDirectional.centerStart,
child: ChartTitle(
title: Text('Energy Consumption per Device'),
),
),
),
Spacer(),
Expanded(flex: 2, child: EnergyConsumptionPerDeviceDevicesList()),
],

View File

@ -13,13 +13,17 @@ class EnergyConsumptionPerDeviceDevicesList extends StatelessWidget {
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.end,
children: List.generate(20, (index) => _buildDeviceCell(index)).toList(),
children: List.generate(
20,
(index) => _buildDeviceCell(context, index),
).toList(),
),
);
}
Widget _buildDeviceCell(int index) {
Widget _buildDeviceCell(BuildContext context, int index) {
return Container(
height: MediaQuery.sizeOf(context).height * 0.035,
padding: const EdgeInsetsDirectional.symmetric(
vertical: 8,
horizontal: 12,
@ -31,23 +35,27 @@ class EnergyConsumptionPerDeviceDevicesList extends StatelessWidget {
width: 1,
),
),
child: Row(
spacing: 6,
children: [
const CircleAvatar(
radius: 4,
backgroundColor: Colors.purple,
),
Text(
'Device ${index + 1}',
textAlign: TextAlign.center,
style: const TextStyle(
color: ColorsManager.blackColor,
fontWeight: FontWeight.w400,
fontSize: 14,
child: FittedBox(
fit: BoxFit.scaleDown,
alignment: Alignment.center,
child: Row(
spacing: 6,
children: [
const CircleAvatar(
radius: 4,
backgroundColor: Colors.purple,
),
),
],
Text(
'Device ${index + 1}',
textAlign: TextAlign.center,
style: const TextStyle(
color: ColorsManager.blackColor,
fontWeight: FontWeight.w400,
fontSize: 14,
),
),
],
),
),
);
}

View File

@ -73,16 +73,29 @@ class PowerClampEnergyDataWidget extends StatelessWidget {
return Row(
mainAxisSize: MainAxisSize.min,
children: [
SelectableText(
'Smart Power Clamp',
style: context.textTheme.headlineSmall?.copyWith(
fontWeight: FontWeight.w700,
color: ColorsManager.vividBlue.withValues(alpha: 0.6),
fontSize: 18,
Expanded(
flex: 2,
child: FittedBox(
fit: BoxFit.scaleDown,
alignment: AlignmentDirectional.centerStart,
child: SelectableText(
'Smart Power Clamp',
style: context.textTheme.headlineSmall?.copyWith(
fontWeight: FontWeight.w700,
color: ColorsManager.vividBlue.withValues(alpha: 0.6),
fontSize: 18,
),
),
),
),
const Spacer(),
const PowerClampEnergyDataDeviceDropdown(),
const Expanded(
child: FittedBox(
fit: BoxFit.scaleDown,
alignment: AlignmentDirectional.centerEnd,
child: PowerClampEnergyDataDeviceDropdown(),
),
),
],
);
}

View File

@ -20,7 +20,19 @@ class TotalEnergyConsumptionChartBox extends StatelessWidget {
spacing: 20,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const ChartTitle(title: Text('Total Energy Consumption')),
const Row(
children: [
Expanded(
flex: 3,
child: FittedBox(
alignment: AlignmentDirectional.centerStart,
fit: BoxFit.scaleDown,
child: ChartTitle(title: Text('Total Energy Consumption')),
),
),
Spacer(flex: 4),
],
),
const Divider(),
TotalEnergyConsumptionChart(chartData: state.chartData),
],