extracted PowerClampPhase into its own widget.

This commit is contained in:
Faris Armoush
2025-05-05 09:11:11 +03:00
parent 464f7b7347
commit a050792f32

View File

@ -15,7 +15,7 @@ class PowerClampPhasesDataWidget extends StatelessWidget {
decoration: secondarySection.copyWith(boxShadow: const []),
child: Row(
children: List.generate(5, (index) {
if (index case 1 || 3) return _separatorBuilder();
if (index case 1 || 3) return _buildSeparator();
return Expanded(
child: Padding(
padding: const EdgeInsetsDirectional.symmetric(horizontal: 14),
@ -39,29 +39,25 @@ class PowerClampPhasesDataWidget extends StatelessWidget {
),
),
),
_buildItem(
context,
const PowerClampPhase(
iconPath: Assets.powerActiveIcon,
title: 'Active Power',
value: '393.0',
unit: 'W',
),
_buildItem(
context,
const PowerClampPhase(
iconPath: Assets.voltageIcon,
title: 'Active Power',
value: '228.5',
unit: 'V',
),
_buildItem(
context,
const PowerClampPhase(
iconPath: Assets.voltMeterIcon,
title: 'Current',
value: '1.72',
unit: 'A',
),
_buildItem(
context,
const PowerClampPhase(
iconPath: Assets.speedoMeter,
title: 'Power Factor',
value: '0.8',
@ -76,95 +72,7 @@ class PowerClampPhasesDataWidget extends StatelessWidget {
);
}
Widget _buildItem(
BuildContext context, {
required String iconPath,
required String title,
required String value,
String? unit,
}) {
return Expanded(
flex: 5,
child: Container(
margin: const EdgeInsets.only(bottom: 4),
decoration: containerWhiteDecoration.copyWith(
boxShadow: const [],
),
padding: const EdgeInsetsDirectional.all(8),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
spacing: 10,
children: [
Expanded(
child: FittedBox(
fit: BoxFit.scaleDown,
child: SvgPicture.asset(iconPath),
),
),
Expanded(
flex: 5,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
spacing: 4,
children: [
Expanded(
child: FittedBox(
alignment: AlignmentDirectional.centerStart,
fit: BoxFit.scaleDown,
child: Text(
title,
style: context.textTheme.titleSmall?.copyWith(
color: ColorsManager.lightGreyColor,
fontWeight: FontWeight.w400,
fontSize: 8,
),
),
),
),
Expanded(
flex: 2,
child: FittedBox(
alignment: AlignmentDirectional.centerStart,
fit: BoxFit.scaleDown,
child: Text.rich(
TextSpan(
style: context.textTheme.bodySmall?.copyWith(
color: ColorsManager.textPrimaryColor.withValues(
alpha: 0.83,
),
fontWeight: FontWeight.w700,
fontSize: 15,
),
children: [
TextSpan(text: '$value '),
if (unit != null)
TextSpan(
text: unit,
style: context.textTheme.bodySmall?.copyWith(
color: ColorsManager.textPrimaryColor.withValues(
alpha: 0.83,
),
fontWeight: FontWeight.w700,
fontSize: 8,
),
),
],
),
),
),
),
],
),
),
],
),
),
);
}
Widget _separatorBuilder() {
Widget _buildSeparator() {
return Container(
height: double.infinity,
width: 1,
@ -185,3 +93,97 @@ class PowerClampPhasesDataWidget extends StatelessWidget {
);
}
}
class PowerClampPhase extends StatelessWidget {
const PowerClampPhase({
super.key,
required this.iconPath,
required this.title,
required this.value,
this.unit,
});
final String iconPath;
final String title;
final String value;
final String? unit;
@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.only(bottom: 4),
decoration: containerWhiteDecoration.copyWith(
boxShadow: const [],
),
padding: const EdgeInsetsDirectional.all(8),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
spacing: 10,
children: [
Expanded(
child: FittedBox(
fit: BoxFit.scaleDown,
child: SvgPicture.asset(iconPath),
),
),
Expanded(
flex: 5,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
spacing: 4,
children: [
Expanded(
child: FittedBox(
alignment: AlignmentDirectional.centerStart,
fit: BoxFit.scaleDown,
child: Text(
title,
style: context.textTheme.titleSmall?.copyWith(
color: ColorsManager.lightGreyColor,
fontWeight: FontWeight.w400,
fontSize: 8,
),
),
),
),
Expanded(
flex: 2,
child: FittedBox(
alignment: AlignmentDirectional.centerStart,
fit: BoxFit.scaleDown,
child: Text.rich(
TextSpan(
style: context.textTheme.bodySmall?.copyWith(
color: ColorsManager.textPrimaryColor.withValues(
alpha: 0.83,
),
fontWeight: FontWeight.w700,
fontSize: 15,
),
children: [
TextSpan(text: '$value '),
if (unit != null)
TextSpan(
text: unit,
style: context.textTheme.bodySmall?.copyWith(
color: ColorsManager.textPrimaryColor.withValues(
alpha: 0.83,
),
fontWeight: FontWeight.w700,
fontSize: 8,
),
),
],
),
),
),
),
],
),
),
],
),
);
}
}