Прикрепить виджет анимации в центре, используя виджет стека - PullRequest
Новая
       23

Прикрепить виджет анимации в центре, используя виджет стека

0 голосов
/ 09 апреля 2020

Я пытаюсь расположить несколько виджетов на экране.

Один из виджетов должен анимировать, а остальные нет. В настоящее время я пытаюсь сделать это с помощью виджета стека, но анимация запускается с анимированным виджетом, привязанным к тому месту, где я определяю позиционные параметры. Если я определю top: 100, left: 100, анимационный виджет анимируется с привязкой в ​​этой точке, а не в ее центре, как это было бы с обычной настройкой столбцов и строк.

Как сделать привязку виджета анимации в центре?

Что я пробовал: 1. Использование виджета стека с обычными параметрами вверху слева 2. Использование стека виджет с позиционированным заполнением и выравниванием, выравнивание. центр.

Код: 

import 'package:corona_app/commons/moreInfo.dart';
import 'package:flutter/material.dart';

class HomeScreenMain extends StatefulWidget {

  @override
  _HomeScreenMainState createState() => _HomeScreenMainState();
}

class _HomeScreenMainState extends State<HomeScreenMain>
    with TickerProviderStateMixin {
  Animation sizeAnimation;
  AnimationController sizeAnimationController;
  bool reversed = false;
  @override
  void initState() {
    super.initState();
    sizeAnimationController = AnimationController(
        vsync: this, duration: Duration(milliseconds: 1000));
    sizeAnimation =
        Tween<double>(begin: 200, end: 170).animate(sizeAnimationController);
    sizeAnimationController.addListener(() {
      setState(() {});
    });
    sizeAnimationController.forward();
    sizeAnimation.addStatusListener((status) {
      if (status == AnimationStatus.completed && reversed == false) {
        sizeAnimationController.repeat(reverse: true);
      }
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: defaultValues.backGroundColor,
      appBar: AppBar(
        title: Text('My App'),
        centerTitle: true,
        automaticallyImplyLeading: false,
        backgroundColor: defaultValues.appBarBackgroundColor,
      ),
      body: Stack(overflow: Overflow.visible, children: <Widget>[
        Positioned(
          top: 100,
          left: 100,
          child: Align(
            alignment: Alignment.topCenter,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Container(
                    child: Center(
                        child: Text(
                      'Suche Läuft',
                      style: TextStyle(color: Colors.white),
                    )),
                    width: this.sizeAnimation.value,
                    height: this.sizeAnimation.value,
                    decoration: new BoxDecoration(
                        shape: BoxShape.circle,
                        boxShadow: [
                          BoxShadow(blurRadius: 10, color: Colors.grey[600])
                        ],
                        gradient: RadialGradient(colors: [
                          Colors.grey[700],
                          Colors.grey[800],
                        ]))),
              ],
            ),
          ),
        ),
        Row(
          crossAxisAlignment: CrossAxisAlignment.end,
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.fromLTRB(0, 60, 0, 0),
              child: MoreInfo(),
            ),
          ],
        )
      ]),
    );
  }
}

1 Ответ

0 голосов
/ 09 апреля 2020

Получил, чтобы работать как задумано.

Добавлены нижний и правый свойства, а для свойства выравнивания установлено значение Alignment.center.

Это добилось цели.

Надеюсь, это поможет кому-то еще.

...