diff --git a/packages/flutter/lib/src/widgets/transitions.dart b/packages/flutter/lib/src/widgets/transitions.dart index 211170a2d85..7a36d2e6210 100644 --- a/packages/flutter/lib/src/widgets/transitions.dart +++ b/packages/flutter/lib/src/widgets/transitions.dart @@ -899,6 +899,74 @@ class RelativePositionedTransition extends AnimatedWidget { /// [decoration] animated by a [CurvedAnimation] set to [Curves.decelerate]: /// {@animation 300 378 https://flutter.github.io/assets-for-api-docs/assets/widgets/decorated_box_transition.mp4} /// +/// {@tool dartpad --template=stateful_widget_material_ticker} +/// The following code implements the [DecoratedBoxTransition] as seen in the video +/// above: +/// +/// ```dart +/// final DecorationTween decorationTween = DecorationTween( +/// begin: BoxDecoration( +/// color: const Color(0xFFFFFFFF), +/// border: Border.all(style: BorderStyle.none), +/// borderRadius: BorderRadius.circular(60.0), +/// shape: BoxShape.rectangle, +/// boxShadow: const [ +/// BoxShadow( +/// color: Color(0x66666666), +/// blurRadius: 10.0, +/// spreadRadius: 3.0, +/// offset: Offset(0, 6.0), +/// ) +/// ], +/// ), +/// end: BoxDecoration( +/// color: const Color(0xFFFFFFFF), +/// border: Border.all( +/// style: BorderStyle.none, +/// ), +/// borderRadius: BorderRadius.zero, +/// // No shadow. +/// ), +/// ); +/// +/// AnimationController _controller; +/// +/// @override +/// void initState() { +/// _controller = AnimationController( +/// vsync: this, +/// duration: const Duration(seconds: 3), +/// )..repeat(reverse: true); +/// super.initState(); +/// } +/// +/// @override +/// void dispose() { +/// _controller.dispose(); +/// super.dispose(); +/// } +/// +/// @override +/// Widget build(BuildContext context) { +/// return Container( +/// color: Colors.white, +/// child: Center( +/// child: DecoratedBoxTransition( +/// position: DecorationPosition.background, +/// decoration: decorationTween.animate(_controller), +/// child: Container( +/// width: 200, +/// height: 200, +/// padding: const EdgeInsets.all(10), +/// child: const FlutterLogo(), +/// ), +/// ), +/// ), +/// ); +/// } +/// ``` +/// {@end-tool} +/// /// See also: /// /// * [DecoratedBox], which also draws a [Decoration] but is not animated.