line percent indicator fix

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

View file

@ -41,6 +41,7 @@ class FilterTable<T extends Comparable> extends StatelessWidget {
final textScaleFactor = MediaQuery.textScaleFactorOf(context); final textScaleFactor = MediaQuery.textScaleFactorOf(context);
final lineHeight = 16 * textScaleFactor; final lineHeight = 16 * textScaleFactor;
final barRadius = Radius.circular(lineHeight / 2);
final isRtl = context.isRtl; final isRtl = context.isRtl;
return Padding( return Padding(
@ -69,20 +70,27 @@ class FilterTable<T extends Comparable> extends StatelessWidget {
), ),
), ),
if (showPercentIndicator) if (showPercentIndicator)
LinearPercentIndicator( // as of percent_indicator v4.0.0, bar radius is not correctly applied to progress bar
percent: percent, // when width is lower than height, so we clip it and handle padding outside
lineHeight: lineHeight, Padding(
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),
center: Text(
intl.NumberFormat.percentPattern().format(percent),
style: const TextStyle(shadows: Constants.embossShadows),
),
padding: EdgeInsets.symmetric(horizontal: lineHeight), 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,
barRadius: barRadius,
center: Text(
intl.NumberFormat.percentPattern().format(percent),
style: const TextStyle(shadows: Constants.embossShadows),
),
padding: EdgeInsets.zero,
),
),
), ),
Text( Text(
'$count', '$count',

View file

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