Animated Container
Sample 1 : Effect triggered by button push
class _HomePageState extends State<HomePage> {
var _color = Colors.red;
//no "="
//problem with expression syntax in the first sentence
VoidCallback _changeColor () {
setState(() => _color = Colors.blue);
}
@override
Widget build(BuildContext context) =>
Container(color: Colors.deepOrangeAccent,
child: Center(child: Column(children: <Widget>[
AnimatedContainer(width: 200,
height: 200,
color: _color,
duration: Duration(seconds: 2),
child: Text("some text"),),
RaisedButton(onPressed: _changeColor,child: Text("push"),)
],),));
}
Sample 2 : Animating with timer
class _HomePageState extends State<HomePage> {
final _colors = [Colors.green, Colors.blue, Colors.yellow, Colors.red];
var _color = Colors.red;
var _counter = 0;
void go() {
Timer.periodic(Duration(seconds: 2), _changeColor());
}
_changeColor() => (Timer _) {
final index = _counter % _colors.length;
setState(() => _color = _colors[index]);
_counter++;
};
@override
Widget build(BuildContext context) {
final _actionButton = RaisedButton(onPressed: go, child: Text("push"));
final _animation = AnimatedContainer(
width: 200,
height: 200,
color: _color,
duration: Duration(seconds: 2),
child: Text("some text"),
);
var _widgets = Column(children: <Widget>[_animation, _actionButton]);
return Container(
color: Colors.deepOrangeAccent, child: Center(child: _widgets));
}
}
- show problem with null in Timer.periodic