feat: update ReorderWidget layout for responsive design; adjust item dimensions based on screen size

This commit is contained in:
Achintha Isuru
2026-03-17 15:15:18 -04:00
parent 1252211a12
commit 42945b3b60

View File

@@ -35,12 +35,13 @@ class ReorderWidget extends StatelessWidget {
} }
final TranslationsClientHomeReorderEn i18n = t.client_home.reorder; final TranslationsClientHomeReorderEn i18n = t.client_home.reorder;
final Size size = MediaQuery.sizeOf(context);
return SectionLayout( return SectionLayout(
title: title, title: title,
subtitle: subtitle, subtitle: subtitle,
child: SizedBox( child: SizedBox(
height: 140, height: size.height * 0.18,
child: ListView.separated( child: ListView.separated(
scrollDirection: Axis.horizontal, scrollDirection: Axis.horizontal,
itemCount: orders.length, itemCount: orders.length,
@@ -50,7 +51,7 @@ class ReorderWidget extends StatelessWidget {
final RecentOrder order = orders[index]; final RecentOrder order = orders[index];
return Container( return Container(
width: 260, width: size.width * 0.8,
padding: const EdgeInsets.all(UiConstants.space3), padding: const EdgeInsets.all(UiConstants.space3),
decoration: BoxDecoration( decoration: BoxDecoration(
color: UiColors.white, color: UiColors.white,
@@ -86,7 +87,7 @@ class ReorderWidget extends StatelessWidget {
children: <Widget>[ children: <Widget>[
Text( Text(
order.title, order.title,
style: UiTypography.body2b, style: UiTypography.body2m,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
), ),
if (order.hubName != null && if (order.hubName != null &&
@@ -103,18 +104,18 @@ class ReorderWidget extends StatelessWidget {
], ],
), ),
), ),
Column( // Column(
crossAxisAlignment: CrossAxisAlignment.end, // crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[ // children: <Widget>[
// ASSUMPTION: No i18n key for 'positions' under // // ASSUMPTION: No i18n key for 'positions' under
// reorder section — carrying forward existing // // reorder section — carrying forward existing
// hardcoded string pattern for this migration. // // hardcoded string pattern for this migration.
Text( // Text(
'${order.positionCount} positions', // '${order.positionCount} positions',
style: UiTypography.footnote2r.textSecondary, // style: UiTypography.footnote2r.textSecondary,
), // ),
], // ],
), // ),
], ],
), ),
const SizedBox(height: UiConstants.space3), const SizedBox(height: UiConstants.space3),