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

results matching ""

    No results matching ""