Created
December 19, 2015 19:03
-
-
Save sethladd/74aa040ab6c684e2f2fe to your computer and use it in GitHub Desktop.
My first animated text with Flutter. This is using a very early version of Flutter. This probably won't work by the time you stumble across this code. :)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart' | |
show | |
BuildContext, | |
Positioned, | |
Stack, | |
State, | |
StatefulComponent, | |
Text, | |
Widget, | |
runApp; | |
import 'package:flutter/scheduler.dart' show Scheduler; | |
// I need this to get the size of the window | |
import 'dart:ui' as ui; | |
// To minimize line length where I need to call scheduleFrameCallback, | |
// I made a short-hand sched here. | |
// | |
// I could have actually done, if I really wanted less code in my app: | |
// final onFrame = (callback(Duration d)) => | |
// Scheduler.instance.scheduleFrameCallback(callback); | |
final Scheduler sched = Scheduler.instance; | |
void main() { | |
runApp(new MovingText()); | |
} | |
// This is stateful because I am keeping height | |
// in the widget itself. | |
class MovingText extends StatefulComponent { | |
@override | |
State createState() => new MovingTextState(); | |
} | |
// I have the [height] state in the widget, | |
// so I made this a State. | |
// | |
// I could have put height into some global | |
// and then I would only need a StatelessComponent. | |
class MovingTextState extends State { | |
double height = 0.0; | |
MovingTextState() { | |
// kick off the animation. Is this the best place? | |
// I assume so because I assume `this` is the same instance for | |
// the whole app lifecycle. | |
sched.scheduleFrameCallback(updatePadding); | |
} | |
updatePadding(_) { | |
// tell the system that my state is changing, thus we need to re-render me | |
setState(() { | |
height++; | |
// is this bad? should I cache the height? it will change when rotated | |
if (height > ui.window.size.height) { | |
height = 0.0; | |
} | |
}); | |
// continue the animation | |
sched.scheduleFrameCallback(updatePadding); | |
} | |
@override | |
Widget build(BuildContext context) { | |
// I can only position something in a stack. Thus, here's a Stack. | |
return new Stack([new Positioned(child: new Text('hi'), top: height)]); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Comments welcome!