working on responsiveness.

This commit is contained in:
Faris Armoush
2025-05-04 16:50:28 +03:00
parent cd54574279
commit 464f7b7347
3 changed files with 41 additions and 45 deletions

View File

@ -27,7 +27,7 @@ class PowerClampEnergyDataWidget extends StatelessWidget {
), ),
), ),
const SizedBox(height: 6), const SizedBox(height: 6),
Text( SelectableText(
const Uuid().v6(), const Uuid().v6(),
style: context.textTheme.bodySmall?.copyWith( style: context.textTheme.bodySmall?.copyWith(
color: ColorsManager.blackColor, color: ColorsManager.blackColor,
@ -73,7 +73,7 @@ class PowerClampEnergyDataWidget extends StatelessWidget {
return Row( return Row(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
Text( SelectableText(
'Smart Power Clamp', 'Smart Power Clamp',
style: context.textTheme.headlineSmall?.copyWith( style: context.textTheme.headlineSmall?.copyWith(
fontWeight: FontWeight.w700, fontWeight: FontWeight.w700,

View File

@ -17,15 +17,14 @@ class PowerClampEnergyStatusWidget extends StatelessWidget {
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Container( return Container(
decoration: secondarySection.copyWith(boxShadow: const []), decoration: secondarySection.copyWith(boxShadow: const []),
padding: const EdgeInsets.symmetric(vertical: 8),
child: Column( child: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: List.generate(
for (var index = 0; index < status.length; index++) ...[ status.length * 2 - 1,
Expanded(child: _buildItem(context, status[index])), (index) => index.isEven
_buildDivider(context), ? Expanded(child: _buildItem(context, status[index ~/ 2]))
], : _buildDivider(),
], ),
), ),
); );
} }
@ -39,7 +38,7 @@ class PowerClampEnergyStatusWidget extends StatelessWidget {
height: 18, height: 18,
width: 18, width: 18,
), ),
contentPadding: const EdgeInsets.symmetric(horizontal: 14), contentPadding: const EdgeInsets.symmetric(horizontal: 20),
title: Text( title: Text(
item.title, item.title,
style: context.textTheme.bodySmall?.copyWith( style: context.textTheme.bodySmall?.copyWith(
@ -71,25 +70,23 @@ class PowerClampEnergyStatusWidget extends StatelessWidget {
); );
} }
Widget _buildDivider(BuildContext context) { Widget _buildDivider() {
return DecoratedBox( return Container(
decoration: BoxDecoration( height: 1,
border: Border( decoration: const BoxDecoration(
bottom: BorderSide(
color: ColorsManager.greyColor.withValues(alpha: 0.5),
width: 1,
),
),
boxShadow: [ boxShadow: [
BoxShadow( BoxShadow(
color: ColorsManager.blackColor.withValues(alpha: 0.1), color: Color.fromARGB(20, 0, 0, 0),
offset: const Offset(0, -1), offset: Offset(0, 1),
blurRadius: 1,
),
BoxShadow(
color: Color.fromARGB(30, 0, 0, 0),
offset: Offset(0, -2),
blurRadius: 3, blurRadius: 3,
spreadRadius: 1,
), ),
], ],
), ),
child: const SizedBox(height: 1),
); );
} }
} }

View File

@ -13,7 +13,6 @@ class PowerClampPhasesDataWidget extends StatelessWidget {
return Container( return Container(
width: double.infinity, width: double.infinity,
decoration: secondarySection.copyWith(boxShadow: const []), decoration: secondarySection.copyWith(boxShadow: const []),
padding: const EdgeInsetsDirectional.symmetric(vertical: 14),
child: Row( child: Row(
children: List.generate(5, (index) { children: List.generate(5, (index) {
if (index case 1 || 3) return _separatorBuilder(); if (index case 1 || 3) return _separatorBuilder();
@ -23,6 +22,7 @@ class PowerClampPhasesDataWidget extends StatelessWidget {
child: Column( child: Column(
spacing: 4, spacing: 4,
children: [ children: [
const SizedBox(height: 8),
Expanded( Expanded(
flex: 2, flex: 2,
child: FittedBox( child: FittedBox(
@ -66,6 +66,7 @@ class PowerClampPhasesDataWidget extends StatelessWidget {
title: 'Power Factor', title: 'Power Factor',
value: '0.8', value: '0.8',
), ),
const SizedBox(height: 8),
], ],
), ),
), ),
@ -89,26 +90,24 @@ class PowerClampPhasesDataWidget extends StatelessWidget {
decoration: containerWhiteDecoration.copyWith( decoration: containerWhiteDecoration.copyWith(
boxShadow: const [], boxShadow: const [],
), ),
padding: const EdgeInsetsDirectional.all(6), padding: const EdgeInsetsDirectional.all(8),
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center,
spacing: 10, spacing: 10,
children: [ children: [
Expanded( Expanded(
flex: 2, child: FittedBox(
child: SvgPicture.asset( fit: BoxFit.scaleDown,
iconPath, child: SvgPicture.asset(iconPath),
height: 24,
width: 24,
), ),
), ),
Expanded( Expanded(
flex: 4, flex: 5,
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
spacing: 4,
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
spacing: 4,
children: [ children: [
Expanded( Expanded(
child: FittedBox( child: FittedBox(
@ -125,6 +124,7 @@ class PowerClampPhasesDataWidget extends StatelessWidget {
), ),
), ),
Expanded( Expanded(
flex: 2,
child: FittedBox( child: FittedBox(
alignment: AlignmentDirectional.centerStart, alignment: AlignmentDirectional.centerStart,
fit: BoxFit.scaleDown, fit: BoxFit.scaleDown,
@ -146,8 +146,8 @@ class PowerClampPhasesDataWidget extends StatelessWidget {
color: ColorsManager.textPrimaryColor.withValues( color: ColorsManager.textPrimaryColor.withValues(
alpha: 0.83, alpha: 0.83,
), ),
fontWeight: FontWeight.w400, fontWeight: FontWeight.w700,
fontSize: 12, fontSize: 8,
), ),
), ),
], ],
@ -167,19 +167,18 @@ class PowerClampPhasesDataWidget extends StatelessWidget {
Widget _separatorBuilder() { Widget _separatorBuilder() {
return Container( return Container(
height: double.infinity, height: double.infinity,
decoration: BoxDecoration( width: 1,
border: Border( decoration: const BoxDecoration(
left: BorderSide(
color: ColorsManager.blackColor.withValues(alpha: 0.1),
width: 0.5,
),
),
boxShadow: [ boxShadow: [
BoxShadow( BoxShadow(
color: ColorsManager.blackColor.withValues(alpha: 0.1), color: Color.fromARGB(20, 0, 0, 0),
offset: const Offset(2, 0), offset: Offset(1, 0),
blurRadius: 8, blurRadius: 1,
spreadRadius: 2, ),
BoxShadow(
color: Color.fromARGB(30, 0, 0, 0),
offset: Offset(-2, 0),
blurRadius: 1,
), ),
], ],
), ),