Flutter - 添加更多小部件时如何动画扩展材质卡？

Question

我一直在试图弄清楚如何为登录页面制作材料卡的动画。第一页将有一张带有电子邮件和密码字段的卡片。第二页还有一张卡片，上面有姓名、国家、城市和地址字段。我想在两者之间展示一些不错的动画来显示卡片的扩展。两张卡目前都包装在一个英雄中，但是当我从第一页导航到第二页时，我得到了溢出异常。但过一会，异常就消失了，没有黄黑条了。

我的问题是如何在不显示异常（视觉上的黄色和黑色条）的情况下为卡片设置动画？

我还尝试将英雄放在一个装有材料卡的容器周围。并且围绕着包含 Container 的 SingleChildScrollView。并围绕包含 SingleChildScrollView 的中心。如果没有溢出溢出，这些都不起作用。

class FirstSignUpState extends State<FirstSignUp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.orangeAccent,
          title: Text("Sign Up"),
        ),
        body: Stack(children: <Widget>[
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage("assets/bg.jpg"),
                fit: BoxFit.cover,
              ),
            ),
          ),
          Center(
              child: SingleChildScrollView(
            child: Container(
                padding: EdgeInsets.symmetric(horizontal: 20.0),
                child: Hero(
                  tag: "hey",
                  child: Card(
                      child: Padding(
                    padding:
                        EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        Padding(padding: new EdgeInsets.all(10.0)),
                        TextFormField(
                          decoration: InputDecoration(

                           ...

class SecondSignUpState extends State<SecondSignUp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Sign Up"),
      ),
      body: Stack(children: <Widget>[
        Container(
          decoration: BoxDecoration(
            image: DecorationImage(image: AssetImage("assets/bg.jpg"), fit: BoxFit.cover,),
          ),
        ),
        Center(
          child: SingleChildScrollView(
          child: Container(
            padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 50.0),
              child: Hero(
                tag: "hey",
                child: Card(
                    child: Padding(
                      padding: new EdgeInsets.all(20.0),
                      child: Column(
                        children: <Widget>[
                          new Padding(padding: new EdgeInsets.all(10.0)),
                          TextFormField(
                            decoration: InputDecoration(
                                labelText: "Full Name",
                                ...

返回时的动画是正确的，但是从第一页到第二页会抛出错误

https://streamable.com/n4w9v

flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
flutter: The following message was thrown during layout:
flutter: A RenderFlex overflowed by 60 pixels on the bottom.
flutter:
flutter: The overflowing RenderFlex has an orientation of Axis.vertical.
flutter: The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
flutter: black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
flutter: Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
flutter: RenderFlex to fit within the available space instead of being sized to their natural size.
flutter: This is considered an error condition because it indicates that there is content that cannot be
flutter: seen. If the content is legitimately bigger than the available space, consider clipping it with a
flutter: ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
flutter: like a ListView.
flutter: The specific RenderFlex in question is:
flutter:   RenderFlex#0a7dc OVERFLOWING
flutter:   creator: Column ← Padding ← DefaultTextStyle ← AnimatedDefaultTextStyle ←
flutter:   _InkFeatures-[GlobalKey#a0d6d ink renderer] ← NotificationListener<LayoutChangedNotification> ←
flutter:   CustomPaint ← _ShapeBorderPaint ← PhysicalShape ← _MaterialInterior ← Material ← Padding ← ⋯
flutter:   parentData: offset=Offset(20.0, 20.0) (can use size)
flutter:   constraints: BoxConstraints(w=326.0, h=303.9)
flutter:   size: Size(326.0, 303.9)
flutter:   direction: vertical
flutter:   mainAxisAlignment: start
flutter:   mainAxisSize: max
flutter:   crossAxisAlignment: center
flutter:   verticalDirection: down
flutter: ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
flutter: ════════════════════════════════════════════════════════════════════════════════════════════════════
flutter: Another exception was thrown: A RenderFlex overflowed by 128 pixels on the bottom.
flutter: Another exception was thrown: A RenderFlex overflowed by 134 pixels on the bottom.

Answer 1

RenderFlex 溢出错误通常发生在小部件超出其给定范围时，可能重叠在不同的小部件上。您可以在这里做的是定义布局边界，例如使用 Expanded 或定义约束，例如 SizedBox。