CODEWITHSUNDEEP
animationflutterdart
user6247444
user6247444

Reputation:

How to animate a widget movement in Flutter?

I am new to animations in Flutter and did not figure out how to animate a widget movement between two states.

If I run the code below, the column's first child will go invisible and the RaisedButton will appear where the first widget was before. How do I tell Flutter to animate this so that the RaisedButton will move upwards instead of just appearing there?

All solutions I found were way too complicated in my opinion...

bool visible = true;
Widget widget1, widget2;

Column(
  mainAxisAlignment: MainAxisAlignment.start,
  children: <Widget>[
    Visibility(
      visible: visible,
      child: widget1,
    ),
    RaisedButton(
      child: widget2,
      onPressed: () => setState(() => visible = !visible),
    ),
  ],
)

Upvotes: 1

Views: 7914

Answers (1)

Durdu
Durdu

Reputation: 4859

I hope this helps

  double height = 200;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        AnimatedContainer(
          duration: Duration(seconds: 3),
          height: height,
          child: Container(height: 200, width: 200, color: Colors.blue),
        ),
        RaisedButton(
          child: Container(height: 200, width: 200, color: Colors.yellow),
          onPressed: () => setState(() => height = height == 0 ? 200 : 0),
        ),
      ],
    );
  }

Here is the result:

enter image description here

Upvotes: 4

Related Questions