Repository: flutter
Issue: FAB Hero Animation:  A RenderFlex overflowed issue
Labels: framework,a: animation,f: material design,has reproducible steps,found in release: 2.0,found in release: 2.5,found in release: 2.6,team-design,triaged-design

<!-- Thank you for using Flutter!

     If you are looking for support, please check out our documentation
     or consider asking a question on Stack Overflow:
      * https://flutter.dev/
      * https://api.flutter.dev/
      * https://stackoverflow.com/questions/tagged/flutter?sort=frequent

     If you have found a bug or if our documentation doesn't have an answer
     to what you're looking for, then fill out the template below. Please read
     our guide to filing a bug first: https://flutter.dev/docs/resources/bug-reports
-->

Until the font loads, font-jumping occurs which causes an ugly effect and an error `A RenderFlex overflowed by 1181 pixels on the bottom.` (not every time FAB is tapped on, though)

## Steps to Reproduce

<!-- You must include full steps to reproduce so that we can reproduce the problem. -->

1. Run `min repro code`.
2. watch the font jump
3. watch the `A RenderFlex overflowed by 1181 pixels on the bottom.` error in the debug console

**Expected results:** <!-- what did you want to see? -->
no font jump but a smooth Hero animation

**Actual results:** <!-- what did you see? -->


https://user-images.githubusercontent.com/25743901/111540977-c87dc900-8767-11eb-8024-b5d2a5fa6ff2.mp4



<details>
  <summary>min repro code main.dart</summary>

```dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FAB Issue'),
      ),
      floatingActionButton: MyFAB(),
    );
  }
}

class MyFAB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => Navigator.push(context, MaterialPageRoute(builder: (context) => FullscreenActiveAnimation())),
      child: Hero(
        tag: 'fab',
        child: Container(
          margin: EdgeInsets.only(right: 8),
          height: 100,
          width: 75,
          decoration: BoxDecoration(
              color: Colors.deepPurple,
              image: DecorationImage(
                fit: BoxFit.cover,
                image: NetworkImage(
                    'https://images.pexels.com/photos/33041/antelope-canyon-lower-canyon-arizona.jpg?cs=srgb&dl=pexels-paul-ijsendoorn-33041.jpg&fm=jpg'),
              )),
        ),
      ),
    );
  }
}

class FullscreenActiveAnimation extends StatefulWidget {
  @override
  _FullscreenActiveAnimationState createState() => _FullscreenActiveAnimationState();
}

class _FullscreenActiveAnimationState extends State<FullscreenActiveAnimation> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        child: Hero(
          tag: 'fab',
          child: Container(
            width: double.infinity,
            height: double.infinity,
            decoration: BoxDecoration(
                image: DecorationImage(
                    fit: BoxFit.cover,
                    image: NetworkImage(
                        'https://images.pexels.com/photos/33041/antelope-canyon-lower-canyon-arizona.jpg?cs=srgb&dl=pexels-paul-ijsendoorn-33041.jpg&fm=jpg'))),
            child: SafeArea(
              child: Padding(
                padding: const EdgeInsets.all(24),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Column(
                      children: [
                        Align(
                          alignment: Alignment.topLeft,
                          child: GestureDetector(
                            onTap: () => Navigator.pop(context),
                            child: Stack(
                              children: [
                                Icon(
                                  Icons.lens,
                                  color: Colors.white.withOpacity(0.5),
                                  size: 60,
                                ),
                                Positioned(
                                  top: 6,
                                  left: 6,
                                  child: Icon(
                                    Icons.keyboard_arrow_down_rounded,
                                    color: Colors.black,
                                    size: 48,
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                        Text('Canyon Scene', textAlign: TextAlign.center),
                      ],
                    ),
                    Text('Choose a room'),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}
```

</details>
<details>
  <summary>Logs</summary>

<!--
      Run your application with `flutter run --verbose` and attach all the
      log output below between the lines with the backticks. If there is an
      exception, please see if the error message includes enough information
      to explain how to solve the issue.
-->

```
```

<!--
     Run `flutter analyze` and attach any output of that command below.
     If there are any analysis errors, try resolving them before filing this issue.
-->

```
```

<!-- Finally, paste the output of running `flutter doctor -v` here. -->

```
[✓] Flutter (Channel beta, 2.0.2, on macOS 11.1 20C69 darwin-x64, locale es-ES)
    • Flutter version 2.0.2 at /Users/tomas/code/flutter
    • Framework revision 8962f6dc68 (6 days ago), 2021-03-11 13:22:20 -0800
    • Engine revision 5d8bf811b3
    • Dart version 2.12.1

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/tomas/Library/Android/sdk
    • Platform android-30, build-tools 30.0.2
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    • CocoaPods version 1.10.0

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)

[✓] VS Code (version 1.54.3)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.20.0

[✓] Connected device (2 available)
    • iPhone 12 mini (mobile) • 7BBA6B7C-8A33-48B1-9EEC-49BEA3273F00 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • Chrome (web)            • chrome                               • web-javascript • Google Chrome 89.0.4389.90

• No issues found!
```

</details>