Flutter - How to animate expansion of material card when adding more widgets?

I have been trying to figure out how to animate a material card for a login page. The first page will have a card with an email and password field. The second page will also have a card with a name, country, city and address field. I want to show some sort of nice animation between the two that shows the card expanding. Both cards are currently wrapped in a hero, but when I navigate from the first page to the second page I get an overflow exception. But after a short period of time, the exception clears and there are no yellow and black bars.

My question is how can I animate the card without having the exception (visually the yellow and black bar) show up?

I also tried to put the hero around a container that holds the material card. And around the SingleChildScrollView that contains the Container. And around the Center that contains the SingleChildScrollView. None of these work without spitting out an overflow.

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",
                                ...

The animation when going back is correct but going from first page to second page throws the error

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.