Skip to content

Instantly share code, notes, and snippets.

@sethladd
Created December 19, 2015 19:03
Show Gist options
  • Save sethladd/74aa040ab6c684e2f2fe to your computer and use it in GitHub Desktop.
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. :)
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)]);
}
}
@sethladd
Copy link
Author

Comments welcome!

@abarth
Copy link

abarth commented Dec 19, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment