Skip to content

Instantly share code, notes, and snippets.

@benznest benznest/main.dart
Created Sep 16, 2019

Embed
What would you like to do?
Basic Animation Practice
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Animation Practice',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
AnimationController animationController;
@override
void initState() {
animationController = AnimationController(duration: Duration(milliseconds: 1000), vsync: this);
animationController.addListener(() {
setState(() {
print(animationController.value);
});
});
super.initState();
}
@override
void dispose() {
animationController.dispose();
super.dispose();
}
Widget buildFadeTransitionWidget({AnimationController controller, Widget widget}) {
return AnimatedBuilder(
animation: controller,
child: widget,
builder: (context, child) {
return FadeTransition(opacity: Tween<double>(begin: 0, end: 1).animate(CurvedAnimation(parent: controller, curve: Curves.decelerate)), child: child);
});
}
Widget buildScaleTransitionWidget({AnimationController controller, Widget widget}) {
return AnimatedBuilder(
animation: controller,
child: widget,
builder: (context, child) {
return ScaleTransition(scale: Tween<double>(begin: 0, end: 1).animate(controller), child: child);
});
}
Widget buildRotateTransitionWidget({AnimationController controller, Widget widget}) {
return AnimatedBuilder(
animation: controller,
child: widget,
builder: (context, child) {
return RotationTransition(turns: Tween<double>(begin: 0, end: 0.5).animate(controller), child: child);
});
}
Widget buildSizeTransitionWidget({AnimationController controller, Widget widget}) {
return AnimatedBuilder(
animation: controller,
child: widget,
builder: (context, child) {
return SizeTransition(axis: Axis.horizontal, axisAlignment: 2, sizeFactor: Tween<double>(begin: 0, end: 1).animate(controller), child: child);
});
}
Widget buildMultiTransitionWidget({AnimationController controller, Widget widget}) {
return buildScaleTransitionWidget(
controller: controller,
widget: buildFadeTransitionWidget(
controller: controller, widget: buildRotateTransitionWidget(controller: controller, widget: buildSizeTransitionWidget(controller: controller, widget: widget))));
}
//
@override
Widget build(BuildContext context) {
var tween = Tween<double>(begin: 0, end: 250).animate(animationController);
return Scaffold(
appBar: AppBar(
title: Text("Animation"),
),
body: Center(
child:
Container(
width: tween.value / 2,
height: tween.value,
color: Colors.pink[400],
)),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.play_arrow),
onPressed: () {
if (animationController.isCompleted) {
animationController.reverse();
} else {
animationController.forward();
}
},
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.