How to make an AnimatedContainer change height after intial widget build, instead of on Button Click

Question

                Expanded(
                  flex: 1,
                  child: Padding(
                    padding: const EdgeInsets.only(bottom: 3.0, right: 1),
                    child: AnimatedContainer(
                      duration: Duration(seconds: 1),
                      height: voteCountList[0],
                      decoration: BoxDecoration(
                        color: ColorChooser.graphColors[int.parse(optionsList[0]['color'])],
                        borderRadius: BorderRadius.all(Radius.circular(2))
                      ),
                    ),
                  ),
                ),

As seen in my code snippet the height of the Animated Container is voteCountList[0], this works fine if the value is updated. However when the widget is initially build there is no animation and the height of the container is instantly = voteCountList[0]. I would like to implement the AnimatedContainer such that the height of the container is seen to animate from 0 to voteCountList[0]. This height needs to animated on build.

EdwynZN · Accepted Answer · 2020-06-05T16:27:59.473

4

If you don't want to use an AnimatedBuilder or create your own Animation controller one way to do it with the Animatedcontainer would be

class MyWidget extends StatelessWidget {
  Future<double> get _height => Future<double>.value(200);

  @override
  Widget build(BuildContext context) {
    return Padding(
        padding: const EdgeInsets.only(bottom: 3.0, right: 1),
        child: FutureBuilder<double>(
          future: _height,
          initialData: 0.0,
          builder: (context, snapshot) {
            return AnimatedContainer(
              duration: Duration(seconds: 1),
              width: 200,
              height: snapshot.data, //voteCountList[0],
              decoration: BoxDecoration(
                color: Colors.red,
                borderRadius: BorderRadius.all(Radius.circular(2))),
            );
        }
      )
    );
  }
}

You start a future with an initial value of 0.0 and after a tick the futures resolve (it's a value you already had, you only transformed it to a future to make him think it will be ready in a tick) and the animation will start from 0 to the resolved future voteCountList[0]

edited Jun 05 '20 at 16:27

answered Jun 05 '20 at 16:08

EdwynZN

4,895
2
12
15

Hi, Thanks for the answer, the problem is that my widget is stateless in nature and so I wasn't sure how to implement this solution. Is there any alternative you could offer – Anshuman Komawar Jun 05 '20 at 16:24
Well this solution works with StatelessWidget, check the update, with out an state there is no other idea I could offer – EdwynZN Jun 05 '20 at 16:28
My bad, didn't understand the solution initially. It works great, thanks again for your help. I only had one issue, which I'll figure out, but I was doing the calculations for the container height in the widget build method. Where would you recommend calculating the height, since the future height needs to be assigned this value – Anshuman Komawar Jun 05 '20 at 16:32
you could do it in the Future get _height method, do all the calculations there and at the end just return Future.value(the result of your calculation) – EdwynZN Jun 05 '20 at 16:43
sorry, I'm new to dart and flutter and I'm having a bit of trouble with the height return function. I need to return a list of doubles, and need some space to do some calculations before it, could you show me how to write this height function. – Anshuman Komawar Jun 05 '20 at 16:50
The values I'm using in the calculations are received as variables in the constructor of the widget. Not sure how to access those variables in the method. I need to use the optionslist for the computation in the method. ` class MiniGraph extends StatelessWidget { final double height; final double width; final List optionsList; final List voteCountList; final bool isColored; MiniGraph({this.height, this.width, this.optionsList, this.voteCountList, this.isColored}); List> get _height { return [ Future.value(250) ]; } ` – Anshuman Komawar Jun 05 '20 at 16:53
can you edit your post to see what calculations you do in the build method? – EdwynZN Jun 05 '20 at 16:56
nvmd got it too work, thanks a lot for your answer. – Anshuman Komawar Jun 05 '20 at 17:06

score 1 · Answer 2 · answered Jun 05 '20 at 16:07

1

In initState update the value with timer. so Animation start after build. I'm changing height of the container.

double heightValue=100.0;

void initState()
{
super.initState();
Timer(Duration(seconds: 0),(){
  setState(
(){
  heightValue=300.0;
});
});

}

AnimatedContainer(
      height: heightValue,
      width:200,
      color: Colors.red,
      child: Text('kk'),
      duration: Duration(seconds: 2)
  )

answered Jun 05 '20 at 16:07

MSARKrish

3,355
4
30
43

This method works well however my widget needs to be stateless and so will be difficult to implement the initState method. Do you have any other way I can fix this issue. – Anshuman Komawar Jun 05 '20 at 16:20

How to make an AnimatedContainer change height after intial widget build, instead of on Button Click

2 Answers2