如何对扑动中圆形或矩形的外观进行动画处理?

Question

请帮帮我，我是新手。如何使圆形或矩形的外观具有动画效果，以便当按下按钮时，不仅圆形变为方形，而且具有动画效果。新元素在1秒内从一个小的尺寸变成当前的尺寸。要做到这一点，我使用AnimatedContainer，我不太明白如何使用它，我认为你可以通过"_checked"变量，但我不知道如何，如果有其他的方法，我将非常感激，这是我的代码:

import 'package:flutter/material.dart';

void main() {
runApp(
new MaterialApp(
debugShowCheckedModeBanner: false,// скрываем надпись debug
home: new Scaffold(
body: new MyButton()
)
)
);
}

class MyButton extends StatefulWidget {
@override
MyButtonState createState() => MyButtonState();
}

class MyButtonState extends State<MyButton> {
bool isVisibleCircle = false;
bool isVisibleRectangle = false;

@override
Widget build(BuildContext context) {
return new Container(padding: EdgeInsets.all(40),
child: new Column( children: <Widget> [
new Row (
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget> [
new TextButton(
onPressed: () {
setState(() {
isVisibleCircle = true;
isVisibleRectangle = false; });},
child: Text('Red Circle'),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(Colors.red),
foregroundColor: MaterialStateProperty.all<Color>(Colors.white),)),

new TextButton(
onPressed: () {
setState(() {
isVisibleRectangle = true;
isVisibleCircle = false; });},
child: Text('Blue Rectangle'),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(Colors.blue),
foregroundColor: MaterialStateProperty.all<Color>(Colors.white),)),
]),
if (isVisibleCircle) new Circle(),
if (isVisibleRectangle) new Rectangle(),
]));
}
}

class Circle extends StatefulWidget {
@override
CircleState createState() => CircleState();
}
class CircleState extends State<Circle> {
bool _checked = false;
@override
Widget build(BuildContext context) {
return new AnimatedContainer(
width: _checked ? 100 : 300.0,
height: _checked ? 100 :300.0,
decoration: new BoxDecoration(
color: Colors.red,
shape: BoxShape.circle,
),
duration: Duration(seconds: 1),
curve: Curves.easeInOutCubic,
);
}
}
class Rectangle extends StatefulWidget {
@override
RectangleState createState() => RectangleState();
}
class RectangleState extends State<Rectangle> {
bool _checked = false;
@override
Widget build(BuildContext context) {
return new AnimatedContainer(
width: _checked ? 100 : 300.0,
height: _checked ? 100 :300.0,
decoration: new BoxDecoration(
color: Colors.blue,
shape: BoxShape.rectangle,
),
duration: Duration(seconds: 1),
curve: Curves.easeInOutCubic,
);
}
}

---

Answer 1

请看

class MyButton extends StatefulWidget {
@override
MyButtonState createState() => MyButtonState();
}
class MyButtonState extends State<MyButton> {
bool isVisibleCircle = false;
bool isVisibleRectangle = false;
@override
Widget build(BuildContext context) {
return new Container(padding: EdgeInsets.all(40),
child: new Column( children: <Widget> [
new Row (
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget> [
new TextButton(
onPressed: () {
setState(() {
isVisibleCircle = true;
isVisibleRectangle = false; });},
child: Text('Red Circle'),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(Colors.red),
foregroundColor: MaterialStateProperty.all<Color>(Colors.white),)),
new TextButton(
onPressed: () {
setState(() {
isVisibleRectangle = true;
isVisibleCircle = false; });},
child: Text('Blue Rectangle'),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(Colors.blue),
foregroundColor: MaterialStateProperty.all<Color>(Colors.white),)),
]),
Circle(isVisibleCircle),
Rectangle(isVisibleRectangle),
]));
}
}
class Circle extends StatefulWidget {
bool checked = false;
Circle(this.checked);
@override
CircleState createState() => CircleState();
}
class CircleState extends State<Circle> with SingleTickerProviderStateMixin{
@override
Widget build(BuildContext context) {
return new AnimatedContainer(
width: widget.checked ? 300 : 0,
height: widget.checked ?  300 : 0,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.red,
),
child: SizedBox(height: 100, width: 100,),
duration: Duration(seconds: 2),
curve: Curves.easeInOut,
);
}
}
class Rectangle extends StatefulWidget {
bool checked = false;
Rectangle(this.checked);
@override
RectangleState createState() => RectangleState();
}
class RectangleState extends State<Rectangle> {
@override
Widget build(BuildContext context) {
return new AnimatedContainer(
width: widget.checked ? 300 : 0,
height: widget.checked ? 300 :0,
decoration: new BoxDecoration(
color: Colors.blue,
shape: BoxShape.rectangle,
),
duration: Duration(seconds: 1),
curve: Curves.easeInOutCubic,
);
}
}