From 9e89e6cc244498aa3dacbc71936abf5b2086c86d Mon Sep 17 00:00:00 2001 From: Hillel Coren Date: Tue, 24 Oct 2023 12:56:52 +0300 Subject: [PATCH] Add horizontal scrollbars to dashboard panels --- lib/ui/dashboard/dashboard_chart.dart | 167 ++++++++++++++------------ 1 file changed, 93 insertions(+), 74 deletions(-) diff --git a/lib/ui/dashboard/dashboard_chart.dart b/lib/ui/dashboard/dashboard_chart.dart index 9ae39dd8d..e4a849ba8 100644 --- a/lib/ui/dashboard/dashboard_chart.dart +++ b/lib/ui/dashboard/dashboard_chart.dart @@ -43,6 +43,21 @@ class DashboardChart extends StatefulWidget { class _DashboardChartState extends State { String? _selected; int _selectedIndex = 0; + late ScrollController _controller; + + @override + void initState() { + super.initState(); + + _controller = ScrollController(); + } + + @override + void dispose() { + _controller.dispose(); + + super.dispose(); + } void _onSelectionChanged(charts.SelectionModel model) { if (widget.onDateSelected == null) { @@ -139,82 +154,86 @@ class _DashboardChartState extends State { Divider(height: 1.0), LimitedBox( maxHeight: settings.enableComparison ? 122 : 102, - child: ListView( - shrinkWrap: true, - scrollDirection: Axis.horizontal, - children: widget.data!.map((dataGroup) { - final int index = widget.data!.indexOf(dataGroup); - final bool isSelected = index == _selectedIndex; - final bool isIncrease = - dataGroup.periodTotal > dataGroup.previousTotal; - final String changeAmount = (isIncrease ? '+' : '') + - formatNumber( - dataGroup.periodTotal - dataGroup.previousTotal, - context, - currencyId: widget.currencyId)!; - final changePercent = (isIncrease ? '+' : '') + - formatNumber( - dataGroup.periodTotal != 0 && - dataGroup.previousTotal != 0 - ? round( - (dataGroup.periodTotal - - dataGroup.previousTotal) / - dataGroup.previousTotal * - 100, - 2) - : 0.0, - context, - formatNumberType: FormatNumberType.percent, - currencyId: widget.currencyId)!; - final String changeString = dataGroup.periodTotal == 0 || - dataGroup.previousTotal == 0 || - dataGroup.periodTotal == dataGroup.previousTotal - ? (settings.enableComparison ? ' ' : '') - : '$changeAmount ($changePercent)'; + child: Scrollbar( + controller: _controller, + child: ListView( + shrinkWrap: true, + scrollDirection: Axis.horizontal, + controller: _controller, + children: widget.data!.map((dataGroup) { + final int index = widget.data!.indexOf(dataGroup); + final bool isSelected = index == _selectedIndex; + final bool isIncrease = + dataGroup.periodTotal > dataGroup.previousTotal; + final String changeAmount = (isIncrease ? '+' : '') + + formatNumber( + dataGroup.periodTotal - dataGroup.previousTotal, + context, + currencyId: widget.currencyId)!; + final changePercent = (isIncrease ? '+' : '') + + formatNumber( + dataGroup.periodTotal != 0 && + dataGroup.previousTotal != 0 + ? round( + (dataGroup.periodTotal - + dataGroup.previousTotal) / + dataGroup.previousTotal * + 100, + 2) + : 0.0, + context, + formatNumberType: FormatNumberType.percent, + currencyId: widget.currencyId)!; + final String changeString = dataGroup.periodTotal == 0 || + dataGroup.previousTotal == 0 || + dataGroup.periodTotal == dataGroup.previousTotal + ? (settings.enableComparison ? ' ' : '') + : '$changeAmount ($changePercent)'; - return InkWell( - onTap: () { - setState(() { - _selectedIndex = index; - _selected = null; - }); - }, - child: Container( - color: isSelected ? state.accentColor : theme.cardColor, - padding: EdgeInsets.only( - left: 16, top: 16, right: 32, bottom: 16), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text(localization!.lookup(dataGroup.name), - style: theme.textTheme.titleLarge!.copyWith( - color: isSelected ? Colors.white : null, - )), - SizedBox(height: 4), - Text( - formatNumber(dataGroup.periodTotal, context, - currencyId: widget.currencyId)!, - style: theme.textTheme.headlineSmall!.copyWith( - color: isSelected ? Colors.white : null)), - SizedBox(height: 4), - changeString.isNotEmpty - ? Text( - changeString, - style: TextStyle( - fontSize: 16, - color: isSelected - ? Colors.white - : (isIncrease - ? Colors.green - : Colors.red), - ), - ) - : SizedBox(), - ], + return InkWell( + onTap: () { + setState(() { + _selectedIndex = index; + _selected = null; + }); + }, + child: Container( + color: isSelected ? state.accentColor : theme.cardColor, + padding: EdgeInsets.only( + left: 16, top: 16, right: 32, bottom: 16), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text(localization!.lookup(dataGroup.name), + style: theme.textTheme.titleLarge!.copyWith( + color: isSelected ? Colors.white : null, + )), + SizedBox(height: 4), + Text( + formatNumber(dataGroup.periodTotal, context, + currencyId: widget.currencyId)!, + style: theme.textTheme.headlineSmall!.copyWith( + color: isSelected ? Colors.white : null)), + SizedBox(height: 4), + changeString.isNotEmpty + ? Text( + changeString, + style: TextStyle( + fontSize: 16, + color: isSelected + ? Colors.white + : (isIncrease + ? Colors.green + : Colors.red), + ), + ) + : SizedBox(), + ], + ), ), - ), - ); - }).toList(), + ); + }).toList(), + ), ), ), Divider(height: 1.0),