Flutter 如何在屏幕之间绘制动画

我正在为一个学校项目创建一个健身应用程序，我发现，当我创建几个运动屏幕时，当你按下按钮继续下一个运动时，会出现一个动画。我怎样才能把这个动画拿出来

情况就是这样：

这是我的代码：（其他练习的代码都是一样的，改变的是内容）

导入“包装：颤振/材料.省道”；
导入“包装：颤振/材料.dart”作为前缀x0；
导入“包：循环倒计时计时器/循环倒计时计时器.dart”；
类ActivityTimer扩展了无状态小部件{
最终字符串image='assets/images/1.gif'；
最终字符串标记='imageHeader'；
@凌驾
小部件构建（构建上下文）{
返回脚手架(
正文：SingleChildScrollView(
子：方向生成器（生成器：（上下文，方向）{
return（MediaQuery.of（context）.orientation==
前缀x0.方向.纵向）
？肖像（图像：this.image，标签：this.tag）
：横向（图像：this.image，标记：this.tag）；
}),
),
);
}
}
类纵向扩展无状态小部件{
最终字符串图像，标签；
CountDownController _controller=CountDownController（）；
bool startStop=true；
肖像（{@required this.image，@required this.tag}）；
@凌驾
小部件构建（构建上下文）{
var size=MediaQuery.of（context）.size；
返回列(
儿童：[
堆叠(
儿童：[
英雄(
tag:this.tag，
子：容器(
宽度：MediaQuery.of（context）.size.width，
身高：270，
子：Image.asset(
“assets/images/1.gif”，
适合度：BoxFit.fit高度，
),
),
),
定位(
前40名，
右:20,，
儿童：手势检测器(
子：容器(
填充：所有边缘设置（4.0），
装饰：盒子装饰(
形状：BoxShape.circle，
颜色：color.fromRGBO（0,0,0,0.7），
),
子：图标(
图标。关闭，
颜色：颜色，白色，
尺寸：30.0，
),
),
onTap:（）{
Navigator.pop（上下文）；
},
),
),
],
),
容器(
填充：来自LTRB（20.0,30.0,20.0,20.0,20.0）的边缘设置，
高度：size.height-270.0，
宽度：size.width，
颜色：颜色，白色，
子：列(
mainAxisAlignment:mainAxisAlignment.spaceBetween，
儿童：[
纵队(
儿童：[
填充物(
填充：仅限常量边集（底部：15.0），
子：文本(
“SaltaráCorda”，
样式：TextStyle(
字体大小：28.0，
fontWeight:fontWeight.w900，
颜色：颜色。灰色[700]，
),
),
),
填充物(
填充：仅限常量边集（底部：20.0），
子：文本(
“普罗西莫：苏比尔·卡迪拉”，
样式：TextStyle(
字体大小：20.0，
fontWeight:fontWeight.w900，
颜色：颜色。灰色[300]，
),
),
),
填充物(
填充：仅限常量边集（顶部：0），
子：循环计数计时器(
持续时间：11，
控制器：_控制器，
宽度：MediaQuery.of（context）.size.width/5，
高度：MediaQuery.of（context）.size.height/5，
颜色：颜色，白色，
fillColor:Colors.red，
背景颜色：空，圆形
冲程宽度：5.0，
strokeCap:strokeCap.butt，
textStyle:textStyle(
字体大小：22.0，
颜色：颜色，黑色，
fontWeight:fontWeight.bold），
伊斯里弗斯：是的，
isReverseAnimation：没错，
结果显示：正确，
)),
],
),
划船(
儿童：[
手势检测器(
onTap:（）=>\u controller.start（），
子：容器(
宽度：70.0，
身高：55.0，
页边距：仅限边缘集（右侧：9.0），
装饰：盒子装饰(
颜色：颜色。来自RGBO（232、242、248、1.0），
边界半径：边界半径。圆形（15.0），
),
子：图标(
图标。播放箭头，
颜色：color.fromRGBO（82126255,1.0），
尺寸：35.0，
),
),
),
手势检测器(
onTap:（）=>\u controller.pause（），
子：容器(
宽度：70.0，
身高：55.0，
页边距：仅限边缘集（右侧：9.0），
装饰：盒子装饰(
颜色：Co
    import 'package:flutter/material.dart';
import 'package:flutter/material.dart' as prefix0;
import 'package:circular_countdown_timer/circular_countdown_timer.dart';
class ActivityTimer extends StatelessWidget {
  final String image = 'assets/images/1.gif';
  final String tag = 'imageHeader';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: OrientationBuilder(builder: (context, orientation) {
          return (MediaQuery.of(context).orientation ==
                  prefix0.Orientation.portrait)
              ? Portrait(image: this.image, tag: this.tag)
              : Landscape(image: this.image, tag: this.tag);
        }),
      ),
    );
  }
}

class Portrait extends StatelessWidget {
  final String image, tag;
  CountDownController _controller = CountDownController();
  bool startStop = true;    
  Portrait({@required this.image, @required this.tag});    
  @override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;
    return Column(
      children: <Widget>[
        Stack(
          children: <Widget>[
            Hero(
              tag: this.tag,
              child: Container(
                width: MediaQuery.of(context).size.width,
                height: 270,
                child: Image.asset(
                  "assets/images/1.gif",
                  fit: BoxFit.fitHeight,
                ),
              ),
            ),
            Positioned(
              top: 40,
              right: 20,
              child: GestureDetector(
                child: Container(
                  padding: EdgeInsets.all(4.0),
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Color.fromRGBO(0, 0, 0, 0.7),
                  ),
                  child: Icon(
                    Icons.close,
                    color: Colors.white,
                    size: 30.0,
                  ),
                ),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
            ),
          ],
        ),
        Container(
          padding: EdgeInsets.fromLTRB(20.0, 30.0, 20.0, 20.0),
          height: size.height - 270.0,
          width: size.width,
          color: Colors.white,
          child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Column(
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.only(bottom: 15.0),
                      child: Text(
                        'Saltar à Corda',
                        style: TextStyle(
                          fontSize: 28.0,
                          fontWeight: FontWeight.w900,
                          color: Colors.grey[700],
                        ),
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(bottom: 20.0),
                      child: Text(
                        'Próximo: Subir à Cadeira',
                        style: TextStyle(
                          fontSize: 20.0,
                          fontWeight: FontWeight.w900,
                          color: Colors.grey[300],
                        ),
                      ),
                    ),
                    Padding(
                        padding: const EdgeInsets.only(top: 0),
                        child: CircularCountDownTimer(
                          duration: 11,
                          controller: _controller,
                          width: MediaQuery.of(context).size.width / 5,
                          height: MediaQuery.of(context).size.height / 5,
                          color: Colors.white,
                          fillColor: Colors.red,
                          backgroundColor: null,Circle
                          strokeWidth: 5.0,
                          strokeCap: StrokeCap.butt,
                          textStyle: TextStyle(
                              fontSize: 22.0,
                              color: Colors.black,
                              fontWeight: FontWeight.bold),
                          isReverse: true,
                          isReverseAnimation: true,
                          isTimerTextShown: true,
                        )),
                  ],
                ),
                Row(
                  children: <Widget>[
                    GestureDetector(
                      onTap: () => _controller.start(),
                      child: Container(
                        width: 70.0,
                        height: 55.0,
                        margin: EdgeInsets.only(right: 9.0),
                        decoration: BoxDecoration(
                          color: Color.fromRGBO(232, 242, 248, 1.0),
                          borderRadius: BorderRadius.circular(15.0),
                        ),
                        child: Icon(
                          Icons.play_arrow,
                          color: Color.fromRGBO(82, 126, 255, 1.0),
                          size: 35.0,
                        ),
                      ),
                    ),
                    GestureDetector(
                      onTap: () => _controller.pause(),
                      child: Container(
                        width: 70.0,
                        height: 55.0,
                        margin: EdgeInsets.only(right: 9.0),
                        decoration: BoxDecoration(
                          color: Color.fromRGBO(232, 242, 248, 1.0),
                          borderRadius: BorderRadius.circular(15.0),
                        ),
                        child: Icon(
                          Icons.pause,
                          color: Color.fromRGBO(82, 126, 255, 1.0),
                          size: 35.0,
                        ),
                      ),
                    ),
                    GestureDetector(
                      onTap: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (context) {
                              return SubirACadeira();
                            },
                          ),
                        );
                      },
                      child: Container(
                        width: size.width - 200.0,
                        height: 55.0,
                        decoration: BoxDecoration(
                          color: Color.fromRGBO(232, 242, 248, 1.0),
                          borderRadius: BorderRadius.circular(15.0),
                        ),
                        child: Center(
                            child: Text(
                          'Próximo',
                          style: TextStyle(
                            color: Color.fromRGBO(82, 126, 255, 1.0),
                            fontSize: 18.0,
                            fontWeight: FontWeight.w900,
                          ),
                        )),
                      ),
                    ),
                  ],
                ),
              ]),
        ),
      ],
    );
  }
}

class Landscape extends StatelessWidget {
  final String image, tag;

  Landscape({@required this.image, @required this.tag});

  @override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;
    return Stack();
  }
}

class Screen extends StatefulWidget {
  @override
  _ScreenState createState() => _ScreenState();
}

class _ScreenState extends State<Screen> {
  String title = "Saltar à corda";
  String subtitle = "Próximo: Subir à cadeira";

  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(title),
        Text(subtitle),
        TextButton(
          child: Text("Próximo"),
          onPressed: () {
            setState(() {
              // Here you can define the next title and subtitle
              title = "Subir à cadeira";
              subtitle = "Próximo: Flexões";
            });
          }
        ),
      ]    
    );
  }
}

class ScreenData {
  final String title;
  final String subtitle;
  
  const ScreenData(this.title, this.subtitle);
}

class _ScreenState extends State<Screen> {
  // ...
  static const List<ScreenData> _data = [
    ScreenData("Saltar à corda", "Próximo: Subir à cadeira"),
    ScreenData("Subir à cadeira", "Próximo: Flexões"),
    ScreenData("Flexões", "Próximo: Abdominais"),
    ScreenData("Abdominais", "Próximo: Prancha"),
    // You can add more here
  ];
  
  // Start with the first element of the list
  int _currentIndex = 0;

  // Data containing the title and subtitle of the current screen
  ScreenData get _currentData => _data[_currentIndex];

  // ...

  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(_currentData.title),
        Text(_currentData.subtitle),
        TextButton(
          child: Text("Próximo"),
          onPressed: () {
            setState(() {
              // Update the current index
              // Beware when _currentIndex == _data.length
              ++_currentIndex;
            });
          }
        ),
      ]    
    );
  }
}