minor operation progress UI change

This commit is contained in:
Thibault Deckers 2021-07-30 11:17:21 +09:00
parent 104a0878c9
commit aa577c8bc6

View file

@ -72,6 +72,9 @@ class _ReportOverlayState<T> extends State<ReportOverlay<T>> with SingleTickerPr
Stream<T> get opStream => widget.opStream; Stream<T> get opStream => widget.opStream;
static const radius = 160.0;
static const strokeWidth = 16.0;
@override @override
void initState() { void initState() {
super.initState(); super.initState();
@ -104,40 +107,55 @@ class _ReportOverlayState<T> extends State<ReportOverlay<T>> with SingleTickerPr
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final progressColor = Theme.of(context).accentColor;
return AbsorbPointer( return AbsorbPointer(
child: StreamBuilder<T>( child: StreamBuilder<T>(
stream: opStream, stream: opStream,
builder: (context, snapshot) { builder: (context, snapshot) {
final processedCount = processed.length.toDouble(); final processedCount = processed.length.toDouble();
final total = widget.itemCount; final total = widget.itemCount;
assert(processedCount <= total); assert(processedCount <= total);
final percent = min(1.0, processedCount / total); final percent = min(1.0, processedCount / total);
return FadeTransition( return FadeTransition(
opacity: _animation, opacity: _animation,
child: Container( child: Container(
decoration: const BoxDecoration( decoration: const BoxDecoration(
gradient: RadialGradient( gradient: RadialGradient(
colors: [ colors: [
Colors.black, Colors.black,
Colors.black54, Colors.black54,
], ],
),
),
child: Center(
child: CircularPercentIndicator(
percent: percent,
lineWidth: 16,
radius: 160,
backgroundColor: Colors.white24,
progressColor: Theme.of(context).accentColor,
animation: true,
center: Text(NumberFormat.percentPattern().format(percent)),
animateFromLastPercent: true,
),
), ),
), ),
); child: Center(
}), child: Stack(
children: [
Container(
width: radius,
height: radius,
padding: const EdgeInsets.all(strokeWidth / 2),
child: CircularProgressIndicator(
color: progressColor.withOpacity(.1),
strokeWidth: strokeWidth,
),
),
CircularPercentIndicator(
percent: percent,
lineWidth: strokeWidth,
radius: radius,
backgroundColor: Colors.white24,
progressColor: progressColor,
animation: true,
center: Text(NumberFormat.percentPattern().format(percent)),
animateFromLastPercent: true,
),
],
),
),
),
);
},
),
); );
} }
} }