line percent indicator fix
This commit is contained in:
parent
3d5cacfd08
commit
a1c3399afa
2 changed files with 50 additions and 31 deletions
|
@ -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',
|
||||||
|
|
|
@ -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(
|
||||||
|
|
Loading…
Reference in a new issue