Add a RepeatedTweenAnimationBuilder API #174011
Description
Use case
Implicit widgets are great, but they can't be used for repeating animations.
Instead, you need to use explicit animations.
Spinning green square
This is a basic animation that requires heavy boilerplate.
Code sample...
import 'package:flutter/material.dart';
void main() {
runApp(const MaterialApp(home: SpinningSquarePage()));
}
class SpinningSquarePage extends StatefulWidget {
const SpinningSquarePage({super.key});
@override
State<SpinningSquarePage> createState() => _SpinningSquarePageState();
}
class _SpinningSquarePageState extends State<SpinningSquarePage>
with TickerProviderStateMixin {
late final AnimationController _controller = AnimationController(
duration: const Duration(seconds: 2),
vsync: this,
);
@override
void initState() {
super.initState();
_controller.repeat();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: RotationTransition(
turns: _controller,
child: const ColoredBox(
color: Colors.green,
child: SizedBox.square(dimension: 100),
),
),
),
);
}
}LinearProgressIndicator
Another example is LinearProgressIndicator - it shows a spinning indicator if its value is null:
flutter/packages/flutter/lib/src/material/progress_indicator.dart
Lines 434 to 536 in e65380a
Proposal
Option 1
class TweenAnimationBuilder {
TweenAnimationBuilder.repeat({
Key? key,
required Tween<T> tween,
required Duration duration,
Curve curve,
// If true, the animation flip-flops between forwards and reverse.
bool reverse = false,
// If true, the animation is paused.
//
// For example, LinearProgressIndicator would pause its animation
// if it has a value, and would unpause the animation if its value
// is null.
bool paused = false,
required ValueWidgetBuilder builder,
Widget? child,
});
}Option 2 (preferred)
class RepeatedTweenAnimationBuilder {
RepeatedTweenAnimationBuilder({
Key? key,
required Tween<T> tween,
required Duration duration,
Curve curve,
// If true, the animation flip-flops between forwards and reverse.
bool reverse = false,
// If true, the animation is paused.
//
// For example, LinearProgressIndicator would pause its animation
// if it has a value, and would unpause the animation if its value
// is null.
bool paused = false,
required ValueWidgetBuilder builder,
Widget? child,
});
}Usage
import 'dart:math' as math;
import 'package:flutter/material.dart';
void main() {
runApp(const MaterialApp(home: SpinningSquarePage()));
}
class SpinningSquarePage extends StatelessWidget {
const SpinningSquarePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: RepeatedTweenAnimationBuilder<double>(
tween: Tween<double>(begin: 0, end: 1),
duration: const Duration(seconds: 2),
builder: (context, rotation, _) {
return Transform.rotate(
angle: math.pi * rotation * 2,
child: const ColoredBox(
color: Colors.green,
child: SizedBox.square(dimension: 100),
),
);
},
),
),
);
}
}