Флаттер Высота контейнера Анимация начинается с середины - PullRequest
0 голосов
/ 08 мая 2018

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

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() => new CorrectWrongOverlayState();
}

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

  @override
  void initState() {
    super.initState();
    _iconAnimationController = new AnimationController(
        duration: new Duration(seconds: 3), vsync: this);
    _iconAnimation = new 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 new Material(
      color: Colors.black54,
      child: new InkWell(
        onTap: () => widget._onTap(),
        child: new Padding(
          padding: const EdgeInsets.all(18.0),
          child: new Center(
            child: new Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                new Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: new Container(
                    width: 80.0,
                    height: 200.0 * _iconAnimation.value,
                    color: Colors.green,
                  ),
                ),
                new Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: new Container(
                    width: 80.0,
                    height: 200.0,
                    color: Colors.green,
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

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

Please take a look at the Image]

1 Ответ

0 голосов
/ 19 декабря 2018

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

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

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

enter image description here

Приветствия

...