Высота контейнера Анимация начинается с середины

Анимация высоты Flutter Container начинается с середины, но мне нужно, чтобы она начиналась снизу, вот мой код

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,
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Я пытаюсь добиться такого пользовательского интерфейса с анимацией роста высоты во Flutter. Я хочу, чтобы анимация начиналась снизу, но она начиналась с центра контейнера и анимировала его с обеих сторон.

Пожалуйста, взгляните на изображение


flutter dart flutter-layout animation
person devmer    schedule 08.05.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете использовать пакет TweenMax для Flutter: https://pub.dartlang.org/packages/tweenmax

Вот пример: https://github.com/mrgoonie/flutter_tweenmax/blob/master/lib/screens/animated_column_chart.dart

Нажмите на нижнюю кнопку, чтобы анимировать эти полосы.

введите здесь описание изображения

Ваше здоровье,

person Goon Nguyen    schedule 19.12.2018

arrow_upward
1
arrow_downward

для запуска масштабной анимации с определенных точек. Вы можете обернуть свой Контейнер виджетом Align и просто указать определенные стартовые позиции.

определите свой контроллер и переменные анимации;

  AnimationController animationController;
  Animation<double> tween;

инициализировать их в методе initState;

   @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(() {});
     });
}

затем в методе сборки или везде, где вы добавляете, используйте виджет возврата, как показано ниже;

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
      ),
  );
}
person Bilal Şimşek    schedule 12.06.2020