Fixed horizontal scroll

This commit is contained in:
Marc Rejohn Castillano 2026-02-23 18:55:56 +08:00
parent ee1bf5e113
commit 0b900d3480

View File

@ -230,7 +230,18 @@ class TasQAdaptiveList<T> extends StatelessWidget {
onRowTap: onRowTap, onRowTap: onRowTap,
); );
final contentWidth = constraints.maxWidth * 0.8; // Use progressively smaller fractions of the viewport on larger screens
// so that content doesn't stretch too widely, but also consume as much
// width as possible when the display is more modest.
double contentFactor;
if (constraints.maxWidth < 1200) {
contentFactor = 0.95; // not-so-wide monitors
} else if (constraints.maxWidth < 1800) {
contentFactor = 0.85; // wide monitors
} else {
contentFactor = 0.75; // ultra-wide monitors
}
final contentWidth = constraints.maxWidth * contentFactor;
final tableWidth = math.max( final tableWidth = math.max(
contentWidth, contentWidth,
(columns.length + (rowActions == null ? 0 : 1)) * 140.0, (columns.length + (rowActions == null ? 0 : 1)) * 140.0,
@ -240,25 +251,34 @@ class TasQAdaptiveList<T> extends StatelessWidget {
math.max(1, items.length), math.max(1, items.length),
); );
final tableWidget = SingleChildScrollView( // wrap horizontal scroll with a visible scrollbar on desktop. the
scrollDirection: Axis.horizontal, // ScrollController is shared so the scrollbar has something to observe.
child: SizedBox( final horizontalController = ScrollController();
width: tableWidth, final tableWidget = Scrollbar(
child: PaginatedDataTable( controller: horizontalController,
header: tableHeader, thumbVisibility: true,
rowsPerPage: effectiveRowsPerPage, trackVisibility: true,
columnSpacing: 20, child: SingleChildScrollView(
horizontalMargin: 16, controller: horizontalController,
showCheckboxColumn: false, scrollDirection: Axis.horizontal,
headingRowColor: WidgetStateProperty.resolveWith( child: SizedBox(
(states) => Theme.of(context).colorScheme.surfaceContainer, width: tableWidth,
child: PaginatedDataTable(
header: tableHeader,
rowsPerPage: effectiveRowsPerPage,
columnSpacing: 20,
horizontalMargin: 16,
showCheckboxColumn: false,
headingRowColor: WidgetStateProperty.resolveWith(
(states) => Theme.of(context).colorScheme.surfaceContainer,
),
columns: [
for (final column in columns)
DataColumn(label: Text(column.header)),
if (rowActions != null) const DataColumn(label: Text('Actions')),
],
source: dataSource,
), ),
columns: [
for (final column in columns)
DataColumn(label: Text(column.header)),
if (rowActions != null) const DataColumn(label: Text('Actions')),
],
source: dataSource,
), ),
), ),
); );
@ -277,6 +297,7 @@ class TasQAdaptiveList<T> extends StatelessWidget {
primary: true, primary: true,
child: Center( child: Center(
child: SizedBox( child: SizedBox(
key: const Key('adaptive_list_content'),
width: contentWidth, width: contentWidth,
child: Column( child: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,