从屏幕外部的 SlideTransition

Question

在下面的代码中SlideTransition 可以工作并将container 动画到屏幕底部，但我喜欢将其从顶部移动到屏幕的 20%，而不是从顶部移动到屏幕底部

我不知道如何编辑动画来实现它

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => HomeState();
}

class HomeState extends State<Home> with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation<Offset> offset;

  @override
  void initState() {
    super.initState();

    controller =
        AnimationController(vsync: this, duration: Duration(seconds: 1));

    offset = Tween<Offset>(begin:Offset.zero , end: Offset(0.0, -4.0)).animate(controller);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Center(
            child: RaisedButton(
              child: Text('Show / Hide'),
              onPressed: () {
                switch (controller.status) {
                  case AnimationStatus.completed:
                    controller.reverse();
                    break;
                  case AnimationStatus.dismissed:
                    controller.forward();
                    break;
                  default:
                }
              },
            ),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: SlideTransition(
                position: offset,
                child: Container(
                  margin: EdgeInsets.all(10.0),
                  height: 150.0,
                  width: double.infinity,
                  decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(10.0), boxShadow: [
                    BoxShadow(
                      color: Colors.black26,
                      blurRadius: 0.9,
                      spreadRadius: 0.5,
                      offset: Offset(0.0, 0.0),
                    ),
                  ]),
                  child: InkWell(
                    onTap: (){
                      controller.reverse();
                    },
                    child: Center(
                      child: Text(
                        'ssss',
                        style: TextStyle(
                          fontSize: 26.0,
                        ),
                      ),
                    ),
                  ),
                )),
          )
        ],
      ),
    );
  }
}

Answer 1

问题已解决

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => HomeState();
}

class HomeState extends State<Home> with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation<Offset> offset;

  @override
  void initState() {
    super.initState();

    controller = AnimationController(vsync: this, duration: Duration(milliseconds: 300));
    // offset = Tween<Offset>(begin: Offset.zero, end: Offset(1.0, 0.0)).animate(controller); from right
    offset = Tween<Offset>(begin:Offset.zero , end: Offset(0.0, -1.0)).animate(controller);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Center(
            child: RaisedButton(
              child: Text('Show / Hide'),
              onPressed: () {
                switch (controller.status) {
                  case AnimationStatus.completed:
                    controller.reverse();
                    break;
                  case AnimationStatus.dismissed:
                    controller.forward();
                    break;
                  default:
                }
              },
            ),
          ),
          Align(
            alignment: Alignment.topCenter,
            child: SlideTransition(
                position: offset,
                child: Container(
                  margin: EdgeInsets.only(top:50.0),
                  height: 150.0,
                  width: double.infinity,
                  decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(10.0), boxShadow: [
                    BoxShadow(
                      color: Colors.black26,
                      blurRadius: 0.9,
                      spreadRadius: 0.5,
                      offset: Offset(0.0, 0.0),
                    ),
                  ]),
                  child: InkWell(
                    onTap: (){
                      controller.reverse();
                    },
                    child: Center(
                      child: Text(
                        'ssss',
                        style: TextStyle(
                          fontSize: 26.0,
                        ),
                      ),
                    ),
                  ),
                )),
          )
        ],
      ),
    );
  }
}