将容器从屏幕外部颤动移动到屏幕上,容器大小为

时间:2019-06-27 07:34:04

标签: flutter flutter-layout flutter-animation

在此示例代码中,我想制作高度为100.0的容器,并通过动画将其移动到屏幕中,以显示该示例代码可以正常工作,就像使用简单的底部工作表一样,但这不是我想要的拥有

  1. 问题正在以具有以下大小的容器巫婆的尺寸移动到屏幕上 在我们的样本中是100.0

  2. 从容器的底部高度开始动画进入屏幕

例如:

enter image description here

此示例代码中的动画将容器移动到屏幕顶部而不是其大小

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

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

class Page extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _PageState();
}

class _PageState extends State<Page> with SingleTickerProviderStateMixin {
  Tween<Offset> tween = Tween<Offset>(
    begin: Offset(0.0, 10000.0),
    end: Offset(0.0, 0.0),
    );
  Animation<Offset> animation;
  AnimationController animationController;

  GlobalKey _widgetKey = GlobalKey();

  @override
  void initState() {
    super.initState();
    animationController = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
      );
    animation = tween.animate(animationController);

    Future<void>.delayed(Duration(seconds: 1), () {
      final Size screenSize = MediaQuery.of(context).size;
      final RenderBox widgetRenderBox =
      _widgetKey.currentContext.findRenderObject();
      final Size widgetSize = widgetRenderBox.size;
      final double offset = (screenSize.height / 2 / widgetSize.height).ceilToDouble();
      tween = Tween<Offset>(
        begin: Offset(0.0, offset),
        end: Offset(0.0, 0.0),
        );
      animation = tween.animate(animationController);
      this.setState((){
        animationController.forward();
      });
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('ddddddd'),),
      body: Stack(
        alignment: Alignment.center,
        fit: StackFit.loose,
        children: <Widget>[
          SlideTransition(
              position: animation,
              child: Container(
                key: _widgetKey,
                  height:100.0,
                  width: 300.0,
                  color:Colors.indigo,
                  child:Center(
                    child:Text('ddddddddddddd'),
                    )
                  )
              ),
        ],
        ),
      );
  }
}

0 个答案:

没有答案