Анимация изменения формы на цветах не соответствует ожидаемой - PullRequest
Новая
       59

Анимация изменения формы на цветах не соответствует ожидаемой

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

Я пытаюсь сделать Shape-Shifting анимацию на цветах. Я хотел бы, чтобы цвет исчезал в верхнем левом углу круговыми движениями. Вот мой код для этого: 

const _duration = Duration(milliseconds: 400);

class AnimatedContainerDemo extends StatefulWidget {
  _AnimatedContainerDemoState createState() => _AnimatedContainerDemoState();
}

class _AnimatedContainerDemoState extends State<AnimatedContainerDemo> {
  Color color;
  double borderRadius;
  double margin;

  @override
  void initState() {
    super.initState();
    color = Colors.tealAccent;
    borderRadius = 2;
    margin = 0;
  }

  void change() {
    setState(() {
      color = Colors.white;
      borderRadius = 80;
      margin = 99;
    });
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: Colors.white,
        body: Center(
          child: Stack(
            children: <Widget>[
              SizedBox(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height,
                child: AnimatedContainer(
                  margin: EdgeInsets.all(margin),
                  decoration: BoxDecoration(
                    color: color,
                    borderRadius: BorderRadius.circular(borderRadius),
                  ),
                  duration: _duration,
                ),
              ),
              MaterialButton(
                color: Theme.of(context).primaryColor,
                child: Text(
                  'change',
                  style: TextStyle(color: Colors.white),
                ),
                onPressed: () => change(),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

К сожалению, анимация формы является прямоугольной angular, и она не отображается sh в верхнем левом углу, но в центре экрана. Чего мне не хватает?

...