import 'package:flutter/material.dart';
import 'dart:io';
import 'dart:async';
main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
initialRoute: '/slide',
routes: {
'/': (context) => GamePage(),
'/builderAnimation': (context) => BuilderPage(),
'/crossfade': (context) => CrossFadePage(),
'/autofade': (context) => AutoFade(),
'/positiontransition': (context) => PositionTransition(),
'/rotateTransition': (context) => RotateTransition(),
'/scaleTransit': (context) => ScaleTest(),
'/slide': (context) => SlideTest(),
},
);
}
}
class SlideTest extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return SlideTestState();
}
}
class SlideTestState extends State<SlideTest> with SingleTickerProviderStateMixin{
@override
Widget build(BuildContext context) {
var t = Tween(begin: Offset(0.0,2.0), end: Offset(0.0,1.0)).animate(AnimationController(vsync: this, duration: Duration(seconds: 2))..forward());
return Scaffold(
appBar: AppBar(title: Text('slide'),),
body: Container(
child: SlideTransition(
child: Container(width: 100,height: 100,color: Colors.orange,),
position: t),
),
);
}
}
class ScaleTest extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return ScaleTransitionState();
}
}
class ScaleTransitionState extends State<ScaleTest> with SingleTickerProviderStateMixin{
@override
Widget build(BuildContext context) {
Animation t = Tween(begin: 1.0, end: 0.0).animate(AnimationController(vsync: this,duration: Duration(seconds: 2))..forward());
return Scaffold(
appBar: AppBar(title: Text('scale'),),
body: Container(
child: ScaleTransition(
child: Container(width: 100,height: 100,color: Colors.orange,),
scale: t,),
),
);
}
}
class RotateTransition extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return RotateTransitionState();
}
}
class RotateTransitionState extends State<RotateTransition> with SingleTickerProviderStateMixin{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('rotate'),),
body: Container(
child: RotationTransition(
child: Container(width: 100, height: 100, color: Colors.orange,),
turns: AnimationController(vsync: this,
duration: Duration(seconds: 1),lowerBound: 0, upperBound: 0.1)..forward(),
),
),
);
}
}
class PositionTransition extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return PositionTransitionState();
}
}
class PositionTransitionState extends State<PositionTransition> with SingleTickerProviderStateMixin {
@override
Widget build(BuildContext context) {
Animatable animatable = RelativeRectTween(begin: RelativeRect.fromLTRB(75, 75, 75, 75),
end: RelativeRect.fromLTRB(100, 100, 75, 75),);
Animation frontRelativeRect = animatable.animate(AnimationController(vsync: this, duration: Duration(seconds: 2))..repeat());
return Scaffold(
appBar: AppBar(title: Text('position transition'),),
body: Container(
child: Stack(
alignment: Alignment.center,
fit: StackFit.loose,
children: <Widget>[
Container(width: 200,height: 200,color: Colors.blue,),
Container(width: 100,height: 100,color: Colors.red,),
PositionedTransition(
rect: frontRelativeRect,
child: Container(width: 100,height: 100, color: Colors.orange,),
),
],
),
),
);
}
}
class AutoFade extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return AutoFadeState();
}
}
class AutoFadeState extends State<AutoFade> with SingleTickerProviderStateMixin {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('fade'),),
body: Container(
child: FadeTransition(
opacity: AnimationController(
vsync: this,
duration: Duration(seconds: 1),
)..repeat(),
child: Text(('testing auto fade')),
alwaysIncludeSemantics: true,
),
),
);
}
}
class CrossFadePage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return CrossFadePageState();
}
}
class CrossFadePageState extends State<CrossFadePage> {
bool first = true;
@override
Widget build(BuildContext context) {
Timer(Duration(seconds: 2), (){
setState(() {
first = !first;
});
});
return Scaffold(
appBar: AppBar(title: Text('fade'),),
body: AnimatedCrossFade(
firstChild: Text('first'),
secondChild: Text('second'),
crossFadeState: first?CrossFadeState.showFirst:CrossFadeState.showSecond,
duration: Duration(seconds: 1)),
);
}
}
class BuilderPage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return BuilderPageState();
}
}
class BuilderPageState extends State<BuilderPage> with SingleTickerProviderStateMixin {
@override
Widget build(BuildContext context) {
var controller = AnimationController(duration: Duration(seconds: 2),vsync: this);
var tween = Tween(begin: 20.0, end: 100.0).animate(controller);
return Scaffold(
appBar: AppBar(title: Text('fade'),),
body: AnimatedBuilder(
animation: tween,
child:Text('${tween.value}'),
builder: (context, Widget child){
print(controller.value);
print(tween.value);
return Container(
child: Column(
children: <Widget>[
RaisedButton(child: Text('btn'),onPressed: (){
controller.forward();
},),
Text('${tween.value} from 2'),
child,
],
),
);
}),
);
}
}
class GamePage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return GamePageState();
}
}
class GamePageState extends State<GamePage> with TickerProviderStateMixin {
var gameWidth;
var gameHeight;
var brickSide;
List positionedWidgets = [<Widget>[], <Widget>[], <Widget>[], <Widget>[]];
var animation;
AnimationController animationController;
generatePositionList() {
var top = (gameHeight - gameWidth) / 2.0 + 10.0;
var left = 10.0;
int i = 1;
for (int y = 0; y < 4; y++) {
for (int x = 0; x < 4; x++) {
positionedWidgets[y].add(Brick(
id: i,
x: left + (1 + x * 2) * brickSide / 2.0,
y: top + (1 + y * 2) * brickSide / 2.0,
brickSide: brickSide,
value: x + y,
));
i++;
}
}
}
@override
void initState() {
super.initState();
animationController = AnimationController(
vsync: this, duration: Duration(seconds: 1));
}
@override
Widget build(BuildContext context) {
gameWidth = MediaQuery.of(context).size.width;
gameHeight = MediaQuery.of(context).size.height;
brickSide = (gameWidth - 80) / 4;
generatePositionList();
return SafeArea(
child: Scaffold(
body: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
child: Text(
'GAME 2048',
style: TextStyle(fontSize: 40),
),
),
TouchArea(allBricks: positionedWidgets,),
Container(
child: Text(
'SCORE:999',
style: TextStyle(fontSize: 20),
),
),
],
),
),
),
);
}
}
class TouchArea extends StatefulWidget {
List allBricks;
TouchArea({this.allBricks});
@override
State<StatefulWidget> createState() {
return TouchAreaState();
}
}
class TouchAreaState extends State<TouchArea> {
@override
Widget build(BuildContext context) {
return GestureDetector(
child: Container(
margin:
EdgeInsets.only(left: 18, right: 18, top: 13, bottom: 13),
decoration: BoxDecoration(
border: Border.all(color: Colors.grey, width: 3.0),
),
alignment: Alignment.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: widget.allBricks[0],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: widget.allBricks[1],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: widget.allBricks[2],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: widget.allBricks[3],
),
],
),
),
);
}
}
class Brick extends StatefulWidget {
double x;
double y;
var brickSide;
int value;
int id;
Brick({this.id, this.x, this.y, this.brickSide, this.value});
@override
State<StatefulWidget> createState() {
return BrickState();
}
}
class BrickState extends State<Brick> {
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.all(2.0),
alignment: Alignment.center,
color: Colors.greenAccent,
width: widget.brickSide,
height: widget.brickSide,
child: Text('${widget.value}'),
);
}
}
//class BrickState extends State<Brick>{
// @override
// Widget build(BuildContext context) {
// return Positioned(
// left: widget.x-widget.brickSide/2.0,top: widget.y-widget.brickSide/2.0,width: widget.brickSide,height: widget.brickSide,
// child: Container(child: Text('${widget.value}'),),
// );
// }
//}