flutter 上下扫描样式的动画

初学flutter，做的不好，有更高级的一起讨论进步

x4vwr-kg3z2.gif

import 'package:flutter/material.dart';
import 'package:photo_japan/extension/color.dart';
import 'package:photo_japan/utils/size_fit.dart';


class EditPhotoPage extends StatefulWidget {
  final String imgPath;
  EditPhotoPage({Key? key, required this.imgPath}) : super(key: key);

  @override
  State<EditPhotoPage> createState() => _EditPhotoPageState();
}

class _EditPhotoPageState extends State<EditPhotoPage> with SingleTickerProviderStateMixin{
  AnimationController? _controller;
  Animation? _animation;
  double height = (LQSizeFit.screenWidth)*4/3;


  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    
    //创建AnimationController
    _controller = AnimationController(
        vsync: this,
      duration: Duration(seconds: 3),
      reverseDuration: Duration(seconds: 3),
    );

    //Tween
    //.1创建位移的tween，值必须是double类型
    _animation = Tween(begin: 0.0, end: height-100).animate(_controller!);
    
    //监听动画的状态改变
    _controller?.addStatusListener((status) {
      if(status == AnimationStatus.completed){
    //动画结束之后返回
        _controller?.reverse();
      }else if (status == AnimationStatus.dismissed){
        _controller?.forward();
      }
    });

    //开始动画
    _controller?.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: double.infinity,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
              alignment: Alignment.centerLeft,
              margin: EdgeInsets.only(top: LQSizeFit.statusHeight),
              child: IconButton(
                  onPressed: (){
                    Navigator.pop(context);
                  },
                  icon: const Icon(Icons.arrow_back_ios_rounded, size: 14,)
              ),
            ),

            Container(
              margin: const EdgeInsets.only(top: 20),
              width: double.infinity,
              height: height,
              color: Colors.red,
              child: Stack(
                children: [
                  Image.asset("assets/takephoto/photo_bg.png", fit: BoxFit.fill, width: double.infinity),
                  Container(
                    margin: const EdgeInsets.fromLTRB(37.5, 50, 37.5, 50),
                    child: Image.asset(widget.imgPath, fit: BoxFit.fill, width: double.infinity),
                  ),
                  Container(
                    margin: const EdgeInsets.fromLTRB(37.5, 50, 37.5, 50),
                    decoration: const BoxDecoration(
                      color: Colors.black45,
                    ),
                  ),

                  AnimatedBuilder(
                    builder: (cxt, child){
                      return Container(
                        // width: 5, 设了宽度之后，动画没了，不知道为啥
                        margin: EdgeInsets.fromLTRB(37.5, 50.0 + _animation!.value, 37.5, 50),
                        child: child,
                      );
                    },
                    animation: _controller!,
                    child: Image.asset("assets/takephoto/making_photo/making_photo.png", fit: BoxFit.fill, width: double.infinity),
                  )
                ],
              ),
            ),

            //提示文字
            Container(
              margin: EdgeInsets.fromLTRB(42.5, 20, 42.5, 0),
              child: Text("最新のai技術を使って写真を処理します。\n少し時間がかかるかもしれませんが、\nお待ちください。", style: TextStyle(fontSize: 16, color: HexColor.fromHex("#00082A")),),
            ),

            Container(
              margin: EdgeInsets.only(left: 37.5, right: 37.5, top: 30),
              height: 20,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(10)
              ),

              //蓝色进度条
              child: Container(
                margin: EdgeInsets.only(right: 40),
                decoration: BoxDecoration(
                  color: HexColor.fromHex("#6080FF"),
                  borderRadius: BorderRadius.circular(10)
                ),
              ),
            ),
            
            Container(
              margin: EdgeInsets.only(top: 10),
              child: Text(
                "写真処理中...",
                style: TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                    color: HexColor.fromHex("#4A80FF")
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}