Tweak cloud progress indicator design

This commit is contained in:
Ming Ming 2022-11-27 18:46:04 +08:00
parent 938a0dfb4f
commit 2e9d70d878

View file

@ -91,7 +91,9 @@ class _Indicator extends AnimatedWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final thisValue = value ?? _progress.value; final thisValue = value ?? _progress.value;
final stroke = size / 12; final stroke = size * .07;
final offsetX = size * .06;
final offsetY = size * .15;
const curve = Curves.easeInOutQuad; const curve = Curves.easeInOutQuad;
return Transform.scale( return Transform.scale(
scaleX: isInvert ? -1 : 1, scaleX: isInvert ? -1 : 1,
@ -100,37 +102,44 @@ class _Indicator extends AnimatedWidget {
padding: EdgeInsets.all(stroke / 2), padding: EdgeInsets.all(stroke / 2),
child: Row( child: Row(
mainAxisSize: MainAxisSize.max, mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.end,
children: [ children: [
Expanded( Expanded(
flex: 1, flex: 3,
child: AspectRatio( child: Transform.translate(
aspectRatio: 1, offset: Offset(offsetX, 0),
child: CircularProgressIndicator( child: AspectRatio(
strokeWidth: stroke, aspectRatio: 1,
value: curve.transform((thisValue * 3).clamp(0, 1)), child: CircularProgressIndicator(
strokeWidth: stroke,
value: curve.transform((thisValue * 3).clamp(0, 1)),
),
), ),
), ),
), ),
SizedBox(width: stroke / 2),
Expanded( Expanded(
flex: 2, flex: 5,
child: AspectRatio( child: Transform.translate(
aspectRatio: 1, offset: Offset(0, -offsetY),
child: CircularProgressIndicator( child: AspectRatio(
strokeWidth: stroke, aspectRatio: 1,
value: curve.transform((thisValue * 3 - 1).clamp(0, 1)), child: CircularProgressIndicator(
strokeWidth: stroke,
value: curve.transform((thisValue * 3 - 1).clamp(0, 1)),
),
), ),
), ),
), ),
SizedBox(width: stroke / 2),
Expanded( Expanded(
flex: 1, flex: 3,
child: AspectRatio( child: Transform.translate(
aspectRatio: 1, offset: Offset(-offsetX, 0),
child: CircularProgressIndicator( child: AspectRatio(
strokeWidth: stroke, aspectRatio: 1,
value: curve.transform((thisValue * 3 - 2).clamp(0, 1)), child: CircularProgressIndicator(
strokeWidth: stroke,
value: curve.transform((thisValue * 3 - 2).clamp(0, 1)),
),
), ),
), ),
), ),