flutter 平移动画

import 'dart:ui';

import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

import '../../common/Global.dart';

class TextClass extends StatefulWidget {
  const TextClass({
    Key? key,
  }) : super(key: key);

  @override
  State<StatefulWidget> createState() => TextClassState();
}

class TextClassState extends State<TextClass>
    with SingleTickerProviderStateMixin {
//动画控制器
  late AnimationController controller;
  late Animation<Offset> animation;

  @override
  void initState() {
    controller =
        AnimationController(duration: const Duration(seconds: 2), vsync: this);//两秒的时间完成该动画
    animation =
        Tween(begin: Offset(0, 0), end: Offset(0, 1)).animate(controller);//这个设置就是向下移动
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.topCenter,
      children: [
        Positioned(
          top: -(100-Global.topHeight),//通过Stack把控件放到手机状态栏上面
            child: GestureDetector(
          onTap: () {
            if(controller.isCompleted||controller.isDismissed)
            controller.forward();//向下滑动，就做出了在手机顶部，向下滑动显示，向上滑动消失
          },
          child: SlideTransition(
            position: animation,
            child: Container(
              color: Colors.red,
              width: 100,
              height: 100,
              child: Text('移动动画测试'),
            ),
          ),
        )),
      ],
    );
  }
}