Skip to content

Instantly share code, notes, and snippets.

@funwithflutter

funwithflutter/extension_method_animation_demo.dart

Last active August 10, 2021 22:18
Show Gist options
  • Save funwithflutter/17542e05403f45e3490dab665c20639a to your computer and use it in GitHub Desktop.
Save funwithflutter/17542e05403f45e3490dab665c20639a to your computer and use it in GitHub Desktop.
Download ZIP
Animation with extension methods demo in Flutter
Raw
extension_method_animation_demo.dart
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Extension Demo',
home: Scaffold(
appBar: AppBar(
title: const Text('Extension Demo'), // try putting a bounce here
),
body: Center(
child: Container(
child: const Text('Hello World')
.bounceDownAnimation, // here we call the bounce extension
),
),
), // and here!
);
}
}
extension AnimationExtensions on Widget {
Widget get bounceDownAnimation {
return _BounceDownAnimation(
child: this,
);
}
Widget get scaleAnimation {
return _ScaleAnimation(
child: this,
);
}
}
class _BounceDownAnimation extends StatefulWidget {
const _BounceDownAnimation({
Key? key,
required this.child,
}) : super(key: key);
final Widget child;
@override
_BounceDownAnimationState createState() => _BounceDownAnimationState();
}
class _BounceDownAnimationState extends State<_BounceDownAnimation>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _animation;
static final TweenSequence<double> _offsetTween = TweenSequence(
<TweenSequenceItem<double>>[
TweenSequenceItem<double>(
tween: Tween<double>(begin: 0, end: -25)
.chain(CurveTween(curve: Curves.easeOut)),
weight: 50,
),
TweenSequenceItem<double>(
tween: Tween<double>(begin: -25, end: 0)
.chain(CurveTween(curve: Curves.bounceOut)),
weight: 50,
),
TweenSequenceItem<double>(tween: ConstantTween(0), weight: 20),
],
);
@override
void initState() {
super.initState();
_controller =
AnimationController(vsync: this, duration: const Duration(seconds: 2));
_animation = _offsetTween.animate(_controller);
_controller.repeat();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _animation,
builder: (context, child) {
return Transform.translate(
offset: Offset(0, _animation.value),
child: child,
);
},
child: widget.child,
);
}
}
class _ScaleAnimation extends StatefulWidget {
const _ScaleAnimation({Key? key, required this.child}) : super(key: key);
final Widget child;
@override
_ScaleAnimationState createState() => _ScaleAnimationState();
}
class _ScaleAnimationState extends State<_ScaleAnimation>
with SingleTickerProviderStateMixin {
late AnimationController _animationController;
late Animation<double> _scaleAnimation;
static final TweenSequence<double> _scaleTween = TweenSequence(
<TweenSequenceItem<double>>[
TweenSequenceItem<double>(
tween: Tween<double>(begin: 1, end: 2)
.chain(CurveTween(curve: Curves.easeOut)),
weight: 50,
),
TweenSequenceItem<double>(
tween: Tween<double>(begin: 2, end: 1)
.chain(CurveTween(curve: Curves.easeIn)),
weight: 50,
),
TweenSequenceItem<double>(tween: ConstantTween(1), weight: 20),
],
);
@override
void initState() {
_animationController =
AnimationController(vsync: this, duration: const Duration(seconds: 2));
_scaleAnimation = _scaleTween.animate(_animationController);
_animationController.repeat();
super.initState();
}
@override
void dispose() {
_animationController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return ScaleTransition(
scale: _scaleAnimation,
child: widget.child,
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment