Анимация флаттера: как сохранить положение родительского виджета - PullRequest
Новая
       8

Анимация флаттера: как сохранить положение родительского виджета

0 голосов
/ 01 июня 2019

У меня проблемы с анимацией во Флаттере. Есть 3 круга рядом друг с другом. Когда один из них нажат, я хочу, чтобы он расширился и рухнул. Анимация работает, но весь ряд кругов перемещается вниз, когда это происходит, чтобы сохранить верхнее поле строки, в которой находятся круги. Как убедиться, что ряд сохраняет исходное положение?

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

    _animationController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 200));
    _animation = Tween(begin: 0.25, end: 0.35).animate(
        CurvedAnimation(parent: _animationController, curve: Curves.elasticIn))
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          _animationController.reverse();
        }
      });

Это круги: 

Column(
        children: <Widget>[
Container(
            margin: EdgeInsets.only(top: 16.0),
            child: Center(
              child: Text(
                'Circles',
                style: TextStyle(fontSize: 18),
              ),
            ),
          ),
Container(
            margin: EdgeInsets.only(top: 8.0),
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Container(
                  width: MediaQuery.of(context).size.width * 0.25,
                  height: MediaQuery.of(context).size.height * 0.2,
                  margin: EdgeInsets.symmetric(horizontal: 8.0),
                  child: Center(child: Text('Circle')),
                  decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      border: Border.all(color: AppColors.primaryBlue)),
                ),
                AnimatedBuilder(
                  animation: _animation,
                  builder: (context, child) {
                    return GestureDetector(
                      onTap: () {
                        _animationController.forward();
                      },
                      child: Container(
                        width: MediaQuery.of(context).size.width *
                            _animation.value,
                        height: MediaQuery.of(context).size.height *
                            _animation.value,
                        margin: EdgeInsets.symmetric(horizontal: 8.0),
                        child: Center(child: Text('Circle')),
                        decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            border: Border.all(color: AppColors.primaryBlue)),
                      ),
                    );
                  },
                ),
                Container(
                  width: MediaQuery.of(context).size.width * 0.25,
                  height: MediaQuery.of(context).size.height * 0.2,
                  margin: EdgeInsets.symmetric(horizontal: 8.0),
                  child: Center(child: Text('Circle')),
                  decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      border: Border.all(color: AppColors.primaryBlue)),
                )
              ],
            ),
          ),

Вы можете заметить, что я довольно новичок в анимации во Флаттере, так что приветствуются и другие отзывы. Спасибо!

Ответы [ 2 ]

1 голос
/ 01 июня 2019

Выход:

enter image description here

Полный код: 

Column(
  children: <Widget>[
    Container(
      margin: EdgeInsets.only(top: 16.0),
      child: Center(
        child: Text(
          'Circles',
          style: TextStyle(fontSize: 18),
        ),
      ),
    ),
    Container(
      height: 200,
      margin: EdgeInsets.only(top: 8.0),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Container(
            width: MediaQuery.of(context).size.width * 0.25,
            height: MediaQuery.of(context).size.height * 0.2,
            margin: EdgeInsets.symmetric(horizontal: 8.0),
            child: Center(child: Text('Circle')),
            decoration: BoxDecoration(shape: BoxShape.circle, border: Border.all(color: AppColors.primaryBlue)),
          ),
          Spacer(),
          AnimatedBuilder(
            animation: _animation,
            builder: (context, child) {
              return GestureDetector(
                onTap: () {
                  _animationController.forward();
                },
                child: Container(
                  width: MediaQuery.of(context).size.width * _animation.value,
                  height: MediaQuery.of(context).size.height * _animation.value,
                  margin: EdgeInsets.symmetric(horizontal: 8.0),
                  child: Center(child: Text('Circle')),
                  decoration: BoxDecoration(shape: BoxShape.circle, border: Border.all(color: AppColors.primaryBlue)),
                ),
              );
            },
          ),
          Spacer(),
          Container(
            width: MediaQuery.of(context).size.width * 0.25,
            height: MediaQuery.of(context).size.height * 0.2,
            margin: EdgeInsets.symmetric(horizontal: 8.0),
            child: Center(child: Text('Circle')),
            decoration: BoxDecoration(shape: BoxShape.circle, border: Border.all(color: AppColors.primaryBlue)),
          )
        ],
      ),
    ),
  ],
);
0 голосов
/ 01 июня 2019

сначала я предлагаю вам удалить mainAxisSize: MainAxisSize.min,, если это не сработало, попробуйте обернуть анимированный конструктор контейнером и дать ему те же свойства, что и у

...