Made analytics energy management view scrollable, to allow for a better UX experience.

This commit is contained in:
Faris Armoush
2025-05-06 11:26:58 +03:00
parent e8f9ae944c
commit 1a6121c452
5 changed files with 131 additions and 124 deletions

View File

@ -79,7 +79,7 @@ class _AnalyticsEnergyManagementViewState
spacing: 32,
children: [
SizedBox(
height: MediaQuery.sizeOf(context).height * 0.9,
height: MediaQuery.sizeOf(context).height * 1.2,
child: Container(
decoration: subSectionContainerDecoration.copyWith(
borderRadius: BorderRadius.circular(30),
@ -101,12 +101,17 @@ class _AnalyticsEnergyManagementViewState
);
}
return Padding(
return SingleChildScrollView(
child: Container(
padding: _padding,
height: MediaQuery.sizeOf(context).height * 1,
child: const Column(
children: [
Expanded(
child: Row(
spacing: 32,
children: [
const Expanded(
Expanded(
flex: 2,
child: Column(
spacing: 20,
@ -116,17 +121,13 @@ class _AnalyticsEnergyManagementViewState
],
),
),
Expanded(
child: Container(
decoration: subSectionContainerDecoration.copyWith(
borderRadius: BorderRadius.circular(30),
),
padding: const EdgeInsetsDirectional.all(32),
child: const PowerClampEnergyDataWidget(),
Expanded(child: PowerClampEnergyDataWidget()),
],
),
),
],
),
),
);
},
);

View File

@ -11,6 +11,7 @@ import 'package:syncrow_web/pages/device_managment/power_clamp/models/power_clam
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/constants/assets.dart';
import 'package:syncrow_web/utils/extension/build_context_x.dart';
import 'package:syncrow_web/utils/style.dart';
class PowerClampEnergyDataWidget extends StatelessWidget {
const PowerClampEnergyDataWidget({super.key});
@ -28,7 +29,12 @@ class PowerClampEnergyDataWidget extends StatelessWidget {
builder: (context, state) {
final generalDataPoints =
state.powerClampModel?.status.general.dataPoints ?? [];
return Column(
return Container(
decoration: subSectionContainerDecoration.copyWith(
borderRadius: BorderRadius.circular(30),
),
padding: const EdgeInsetsDirectional.all(32),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_buildHeader(context),
@ -87,6 +93,7 @@ class PowerClampEnergyDataWidget extends StatelessWidget {
const SizedBox(height: 14),
const Expanded(flex: 3, child: EnergyConsumptionByPhasesChartBox()),
],
),
);
},
),

View File

@ -30,7 +30,9 @@ class PowerClampEnergyStatusWidget extends StatelessWidget {
}
Widget _buildItem(BuildContext context, PowerClampEnergyStatus item) {
return ListTile(
return Center(
child: ListTile(
titleAlignment: ListTileTitleAlignment.center,
leading: SvgPicture.asset(
item.iconPath,
fit: BoxFit.scaleDown,
@ -67,6 +69,7 @@ class PowerClampEnergyStatusWidget extends StatelessWidget {
],
),
),
),
);
}

View File

@ -21,7 +21,6 @@ class PowerClampPhase extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Expanded(
flex: 5,
child: Container(
margin: const EdgeInsets.only(bottom: 4),
decoration: containerWhiteDecoration.copyWith(boxShadow: const []),
@ -33,7 +32,7 @@ class PowerClampPhase extends StatelessWidget {
children: [
_buildIcon(),
Expanded(
flex: 5,
flex: 3,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
@ -62,7 +61,7 @@ class PowerClampPhase extends StatelessWidget {
return Expanded(
flex: 2,
child: FittedBox(
alignment: AlignmentDirectional.centerStart,
alignment: AlignmentDirectional.topCenter,
fit: BoxFit.scaleDown,
child: Text.rich(
TextSpan(
@ -89,6 +88,7 @@ class PowerClampPhase extends StatelessWidget {
Widget _buildTitle(BuildContext context) {
return Expanded(
flex: 2,
child: FittedBox(
alignment: AlignmentDirectional.centerStart,
fit: BoxFit.scaleDown,

View File

@ -39,12 +39,9 @@ class PowerClampPhasesDataWidget extends StatelessWidget {
spacing: 4,
children: [
const SizedBox(height: 8),
Expanded(
flex: 2,
child: FittedBox(
clipBehavior: Clip.none,
alignment: AlignmentDirectional.center,
FittedBox(
fit: BoxFit.scaleDown,
alignment: AlignmentDirectional.center,
child: Text(
'Phase ${phaseIndex + 1}',
style: context.textTheme.titleLarge?.copyWith(
@ -54,7 +51,6 @@ class PowerClampPhasesDataWidget extends StatelessWidget {
),
),
),
),
PowerClampPhase(
iconPath: Assets.powerActiveIcon,
title: 'Active Power',