Container height Animation starts from the middle

Question

The Flutter Container height animation starts from the middle, but I need it to start from the bottom here is my code

import 'dart:math';
import 'package:flutter/material.dart';

class CorrectWrongOverlay extends StatefulWidget {
  final bool _isCorrect;
  final VoidCallback _onTap;
  final double percentR;
  final double percentW;

  CorrectWrongOverlay(
      this._isCorrect, this.percentR, this.percentW, this._onTap);

  @override
  State createState() => CorrectWrongOverlayState();
}

class CorrectWrongOverlayState extends State<CorrectWrongOverlay>
    with SingleTickerProviderStateMixin {
  Animation<double> _iconAnimation;
  AnimationController _iconAnimationController;

  @override
  void initState() {
    super.initState();
    _iconAnimationController = AnimationController(
        duration: Duration(seconds: 3), vsync: this);
    _iconAnimation = CurvedAnimation(
        parent: _iconAnimationController, curve: Curves.fastOutSlowIn);
    _iconAnimation.addListener(() => this.setState(() {}));
    _iconAnimationController.forward();
  }

  @override
  void dispose() {
    _iconAnimationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.black54,
      child: InkWell(
        onTap: () => widget._onTap(),
        child: Padding(
          padding: const EdgeInsets.all(18.0),
          child: Center(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Container(
                    width: 80.0,
                    height: 200.0 * _iconAnimation.value,
                    color: Colors.green,
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Container(
                    width: 80.0,
                    height: 200.0,
                    color: Colors.green,
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

I am trying to achieve this kind of UI with height grow animations in Flutter I want the animations to start from the bottom but it starts from the center of the container and animated it both side.

Please take a look at the Image

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

to start scale animation from certain points. You can wrap your Container with Align widget and give certain start positions with simplicty.

define your controller and animation variables;

  AnimationController animationController;
  Animation<double> tween;

init them in initState method;

   @override
  void initState() {
     super.initState();
     animationController = AnimationController(vsync: this, duration: Duration(milliseconds: 800));
     tween = Tween<double>(begin:0,end:1).animate(CurvedAnimation(parent: animationController, curve: Curves.easeIn));
     animationController.addListener(() {
       setState(() {});
     });
}

then in build method or where ever you add use return Widget like below;

Widget animatedContainer(){
  return Align(
    alignment: Alignment.topRight,// .topCenter, .topLeft, .bottomLeft, bottomCenter...etc
    child: Container(
      width: (size.width * tween.value).abs(),
      height: (200 *tween.value).abs(),
      color:Colors.red
      ),
  );
}

score 1 · Answer 2 · answered Dec 19 '18 at 08:00

You could use TweenMax for Flutter package: https://pub.dartlang.org/packages/tweenmax

Here is an example: https://github.com/mrgoonie/flutter_tweenmax/blob/master/lib/screens/animated_column_chart.dart

Click on the bottom button to animate those bars.

Cheers,

score 0 · Answer 3 · answered Jun 13 '22 at 12:25

If you're animating it once and don't require advanced animation control, then you don't even need to keep track of AnimationController yourself. Just use TweenAnimationBuilder, pass to it your tween, duration and curve, and let it animate widget for you:

Widget _animatedBarWidget(Widget barWidget) => TweenAnimationBuilder<double>(
  tween: Tween<double>(begin: 0.0, end: 1.0),
  duration: const Duration(seconds: 3),
  curve: Curves.fastOutSlowIn,
  builder: (BuildContext context, double value, Widget? child) {
    return Align(
      alignment: Alignment.bottomCenter,
      heightFactor: value,
      child: child!,
    );
  },
  child: barWidget,
);

Then, just call

_animatedBarWidget(Container(width: 80.0, height: 200.0, color:Colors.red));

Container height Animation starts from the middle

3 Answers3