Dart 如何在flatter中制作小部件向下滑动动画？

我想为一个小部件做一个

向下滑动

动画。我在网上看到了很多例子，但没有一个符合我的要求。这是我需要的。下面是我制作的一个自定义小部件

Widget Toast(String content, ToastType type) {
  return Column(
    children: <Widget>[
      Padding(
        padding: const EdgeInsets.all(50),
        child: Card(
          elevation: 10,
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
          color: ToastColors[type.index],
          child: Padding(
            padding: const EdgeInsets.only(left: 15, right: 20, top: 10, bottom: 10),
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                ToastIcons[type.index],
                SizedBox(
                  width: 15,
                ),
                Flexible(
                  child: Text(
                    content,
                    style: TextStyle(
                      color: Colors.white,
                      fontWeight: FontWeight.w400,
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    ],
  );
}

Widget Toast（字符串内容，Toast类型）{
返回列(
儿童：[
填充物(
填充：常量边集。全部（50），
孩子：卡片(
标高：10，
形状：RoundedRectangleBorder（borderRadius:borderRadius.circular（5）），
颜色：ToastColors[type.index]，
孩子：填充(
填充：仅限常量边集（左：15，右：20，顶部：10，底部：10），
孩子：排(
mainAxisSize:mainAxisSize.min，
儿童：[
ToastIcons[类型索引]，
大小盒子(
宽度：15，
),
灵活的(
子：文本(
内容,，
样式：TextStyle(
颜色：颜色，白色，
fontWeight:fontWeight.w400，
),
),
),
],
),
),
),
),
],
);
}

这是一个祝酒词布局。我希望可以从应用程序中的任何位置访问此文件。这就是我为此创建单独的

dart

文件的原因

我想要什么？

---

当小部件显示时，我希望toast布局向下滑动。我不想循环或反转动画。动画完成后，小部件必须保持在结束位置。

我根据您对代码的描述推断，您希望能够创建从屏幕顶部向下滑动的toast，并且希望能够从任何位置创建它

你很幸运，弗利特有这个功能

showGeneralDialog

是您要查找的内容

下面是一个例子：

导入“包装：颤振/材料.省道”；
main（）=>runApp（TheApp（））；
类TheApp扩展StatefulWidget{
@凌驾
_应用程序状态createState（）=>\u应用程序状态（）；
}
类\u应用程序状态扩展{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
家：脚手架(
浮动操作按钮：生成器(
生成器：（上下文）{
返回浮动操作按钮(
子：图标(
Icons.add，
),
已按下：（）{
bool wasscompleted=false；
显示通用对话框(
上下文：上下文，
是的，
转换持续时间：持续时间（毫秒：500），
barrierLabel:MaterialLocalizations.of（context）.dialogLabel，
背景色：颜色。黑色。不透明度（0.5），
pageBuilder:（上下文，u，u）{
返回toast（）；
},
transitionBuilder:（上下文、动画、第二动画、子动画）{
如果（animation.status==AnimationStatus.completed）{
wasCompleted=true；
}
如果（已完成）{
返回衰减转换(
不透明度：动画，
孩子：孩子，
);
}否则{
返回幻灯片转换(
位置：曲线动画(
家长：动画，
曲线：Curves.easeOut，
).drive（Tween（开始：偏移量（0，-1.0），结束：偏移量.0）），
孩子：孩子，
);
}
},
);
},
);
},
),
主体：容器（），
),
);
}
}
类TheToast扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回中心(
孩子：卡片(
颜色：颜色，白色，
孩子：填充(
填充：边缘设置。全部（10），
子：文本(
“我干杯”，
样式：TextStyle（颜色：Colors.black），
),
),
),
);
}
}

您可以使自己的函数类似于showGeneralDialog（可能是showToast），并使用适当的文本调用它。我还使烤面包片在动画之后淡出；如果您只是想让它向上滑动，那就更简单了，您可以去掉转换逻辑的这一部分。我还使toast在点击背景时消失，但您可以禁用它，并在希望隐藏对话框时调用Navigator.pop（context）

---

您也可以直接使用覆盖条目执行此操作，但这显然更简单。

Nvm。我想出来了。首先，我创建了一个

StatefulWidget

，并将其用作

showToastWidget

函数中的子项

下面是

StatefulWidget

类

import 'package:flutter/material.dart';

class SlideToast extends StatefulWidget {
  final Widget _toast;

  SlideToast(this._toast);

  @override
  _SlideToastState createState() => _SlideToastState();
}

class _SlideToastState extends State<SlideToast> with TickerProviderStateMixin {
  AnimationController _controller;
  Animation<Offset> _offsetFloat;

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

    _controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 350),
    );

    _offsetFloat =
        Tween(begin: Offset(0.0, -0.03), end: Offset.zero).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Curves.fastOutSlowIn,
      ),
    );

    _offsetFloat.addListener(() {
      setState(() {});
    });

    _controller.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return SlideTransition(
      position: _offsetFloat,
      child: widget._toast,
    );
  }
}

最后像这样调用

showToastWidget

showToastWidget(
   Toast('Hello World!!!', ToastType.Warning),
   duration: Duration(seconds: 1),
);

---

当用户输入可见时，该对话框将阻止用户输入。我不想那样。顺便说一句，我正在使用图库展示toast。有一个很棒的图库，非常适合：-

showToastWidget(
   Toast('Hello World!!!', ToastType.Warning),
   duration: Duration(seconds: 1),
);