Fabio/aves
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

line percent indicator fix

Browse source
This commit is contained in:
Thibault Deckers 2022-02-04 11:12:27 +09:00
parent 3d5cacfd08
commit a1c3399afa
2 changed files with 50 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
lib/widgets/stats/filter_table.dart
View file

@ -41,6 +41,7 @@ class FilterTable<T extends Comparable> extends StatelessWidget {
final textScaleFactor = MediaQuery.textScaleFactorOf(context);
final lineHeight = 16 * textScaleFactor;
final barRadius = Radius.circular(lineHeight / 2);
final isRtl = context.isRtl;
return Padding(
@ -69,20 +70,27 @@ class FilterTable<T extends Comparable> extends StatelessWidget {
),
),
if (showPercentIndicator)
LinearPercentIndicator(
// as of percent_indicator v4.0.0, bar radius is not correctly applied to progress bar
// when width is lower than height, so we clip it and handle padding outside
Padding(
padding: EdgeInsets.symmetric(horizontal: lineHeight),
child: ClipRRect(
borderRadius: BorderRadius.all(barRadius),
child: LinearPercentIndicator(
percent: percent,
lineHeight: lineHeight,
backgroundColor: Colors.white24,
progressColor: stringToColor(label),
animation: true,
isRTL: isRtl,
// TODO TLAD handle low percents being rendered with wrong radius clip
barRadius: Radius.circular(lineHeight / 2),
barRadius: barRadius,
center: Text(
intl.NumberFormat.percentPattern().format(percent),
style: const TextStyle(shadows: Constants.embossShadows),
),
padding: EdgeInsets.symmetric(horizontal: lineHeight),
padding: EdgeInsets.zero,
),
),
),
Text(
'$count',

25
lib/widgets/stats/stats_page.dart
View file

@ -96,13 +96,21 @@ class StatsPage extends StatelessWidget {
final withGpsPercent = withGpsCount / entries.length;
final textScaleFactor = MediaQuery.textScaleFactorOf(context);
final lineHeight = 16 * textScaleFactor;
final barRadius = Radius.circular(lineHeight / 2);
final locationIndicator = Padding(
padding: const EdgeInsets.all(16),
child: Column(
children: [
Padding(
// end padding to match leading, so that inside label is aligned with outside label below
padding: const EdgeInsetsDirectional.only(end: 24),
// as of percent_indicator v4.0.0, bar radius is not correctly applied to progress bar
// when width is lower than height, so we clip it and handle padding outside
Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(AIcons.location),
SizedBox(width: lineHeight),
Expanded(
child: ClipRRect(
borderRadius: BorderRadius.all(barRadius),
child: LinearPercentIndicator(
percent: withGpsPercent,
lineHeight: lineHeight,
@ -110,16 +118,19 @@ class StatsPage extends StatelessWidget {
progressColor: Theme.of(context).colorScheme.secondary,
animation: animate,
isRTL: context.isRtl,
leading: const Icon(AIcons.location),
// TODO TLAD handle low percents being rendered with wrong radius clip
barRadius: Radius.circular(lineHeight / 2),
barRadius: barRadius,
center: Text(
intl.NumberFormat.percentPattern().format(withGpsPercent),
style: const TextStyle(shadows: Constants.embossShadows),
),
padding: EdgeInsets.symmetric(horizontal: lineHeight),
padding: EdgeInsets.zero,
),
),
),
// end padding to match leading, so that inside label is aligned with outside label below
SizedBox(width: lineHeight + 24),
],
),
const SizedBox(height: 8),
Text(
context.l10n.statsWithGps(withGpsCount),