Repository: flutter
Issue: Hero don't respect Transform.scale and Stack order
Labels: framework,f: material design,has reproducible steps,found in release: 3.3,found in release: 3.7,team-design,triaged-design

Hello, I'm trying to create a transition between a stacked group of widget with different scale to a ListView where I can scroll etc.
The problem is that Hero respect the Stack order only the first time and put the ListView's widget with the same size as the Scaled down one so obviously it don't fit.
Take a look at this gif : 
![heroi bug](https://user-images.githubusercontent.com/42180076/99186793-0a174c80-2753-11eb-9f7b-9d28ca7ea08c.gif)

## Steps to Reproduce
Put this inside main.dart and run it

<details><summary>Code</summary>

```dart
import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
          primarySwatch: Colors.blue,
          scaffoldBackgroundColor: Coolors.background),
      home: Scaffold(
          appBar: AppBar(
            // Here we take the value from the MyHomePage object that was created by
            // the App.build method, and use it to set our appbar title.
            title: Text("hero bug"),
          ),
          body: ChatClosed()),
    );
  }
}

//Widget that contains 3 ChatBubble stacked with a different padding (like a grouped notification on IOS)
class ChatClosed extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Widget _bubble = ChatBubble("Hello", "dsd", "0", [
      ImagesUrl.url,
      ImagesUrl.url,
    ], [
      "Hello",
      "Hello",
      "Hello",
      "Hello",
      "Hello"
    ], [
      0,
      0
    ]);
    return GestureDetector(
      onTap: () => Navigator.push(
          context, HeroChat(builder: (BuildContext context) => ChatOpenned())),
      child: Stack(
        alignment: Alignment.bottomCenter,
        children: [
          Transform.scale(
            scale: 0.75,
            alignment: Alignment.bottomCenter,
            child: Hero(tag: "2", child: _bubble),
          ),
          Padding(
            padding: EdgeInsets.only(bottom: 8),
            child: Transform.scale(
              scale: 0.9,
              alignment: Alignment.bottomCenter,
              child: Hero(tag: "1", child: _bubble),
            ),
          ),
          Padding(
            padding: EdgeInsets.only(bottom: 20),
            child: Hero(tag: "0", child: _bubble),
          )
        ],
      ),
    );
  }
}

//The list
class ChatOpenned extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Material(
        type: MaterialType.transparency,
        child: BackdropFilter(
            //Probably need to put that in the previou route becuase the blur appear after the animation
            filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
            child: ListView.builder(
              clipBehavior: Clip.none,
              itemCount: 20,
              padding: EdgeInsets.all(20).copyWith(bottom: 0),
              itemBuilder: (context, i) => Padding(
                padding: EdgeInsets.only(bottom: 20),
                child: Hero(
                  tag: "$i",
                  child: ChatBubble("Hello", "dsd", "$i", [
                    ImagesUrl.url,
                    ImagesUrl.url,
                  ], [
                    "Hello",
                    "Hello",
                    "Hello",
                    "Hello",
                    "Hello"
                  ], [
                    0,
                    0
                  ]),
                ),
              ),
            )));
  }
}

//A single bubble of chat
class ChatBubble extends StatefulWidget {
  final String author;
  final String time;
  final String text;
  final List image;
  final List reaction;
  final List counter;

  const ChatBubble(
    this.author,
    this.time,
    this.text,
    this.image,
    this.reaction,
    this.counter, {
    Key key,
  }) : super(key: key);
  @override
  _ChatBubbleState createState() => _ChatBubbleState();
}

class _ChatBubbleState extends State<ChatBubble> {
  documentArranger() {
    List<Widget> result = [];
    for (int i = 0; i < widget.image.length; i++) {
      if (i < 1) {
        result.add(Container(
          width: 25,
          height: 27,
          decoration: BoxDecoration(
              image: DecorationImage(
                  fit: BoxFit.cover, image: NetworkImage(widget.image[i])),
              borderRadius: BorderRadius.all(Radius.circular(6)),
              boxShadow: [
                BoxShadow(
                  color: Coolors.black.withAlpha(50),
                  blurRadius: 12,
                  offset: Offset(0, 3),
                ),
              ]),
        ));
        if (!(i ==
            widget.image.length)) //mettre d'espace que si c'est le dernier
          result.add(SizedBox(width: 10));
      } else {
        result.add(Container(
          width: 25,
          height: 27,
          decoration: BoxDecoration(
              color: Coolors.main.withAlpha(50),
              borderRadius: BorderRadius.all(Radius.circular(6))),
          child: Center(
            child: Text(
              "+${widget.image.length - i}",
              style: TextStyle(color: Coolors.main, fontSize: 12),
            ),
          ),
        ));
        break;
      }
    }
    return [SizedBox(height: 10), Row(children: result)];
  }

  reactionArranger() {
    final overlap = 15.0;
    List<Widget> result = [];
    const double radius = 20;

    for (int i = 0; i < widget.reaction.length; i++) {
      if (i < 6)
        result.add(Container(
          width: radius,
          height: radius,
          decoration: BoxDecoration(
              image: DecorationImage(
                  fit: BoxFit.cover, image: NetworkImage((ImagesUrl.url))),
              borderRadius: BorderRadius.all(Radius.circular(15)),
              border: Border.all(color: Coolors.backfloor, width: 2)),
        ));
      else {
        result.add(Padding(
          padding: EdgeInsets.only(left: 5),
          child: Container(
            width: radius - 2,
            height: radius - 2,
            child: Align(
              alignment: Alignment(0, -0.2),
              child: Text(
                "+$i",
                style: TextStyle(color: Coolors.main, fontSize: 8),
              ),
            ),
            decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(10)),
                color: Coolors.main.withAlpha(50)),
          ),
        ));
        break;
      }
    }
    List<Widget> stackLayers = List<Widget>.generate(result.length, (index) {
      return Padding(
        padding: EdgeInsets.fromLTRB(index.toDouble() * overlap, 0, 0, 0),
        child: result[index],
      );
    });

    return Stack(children: stackLayers);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(50),
          color: Coolors.backfloor,
          boxShadow: [
            BoxShadow(
              color: Coolors.black.withAlpha(50),
              blurRadius: 50,
            ),
          ]),
      padding: EdgeInsets.only(top: 25, left: 25, right: 25, bottom: 20),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          //Profile picture, etc
          Row(
            children: [
              Container(
                width: 27,
                height: 27,
                decoration: BoxDecoration(
                    image: DecorationImage(
                        fit: BoxFit.cover,
                        image: NetworkImage((ImagesUrl.url))),
                    borderRadius: BorderRadius.all(Radius.circular(7))),
              ),
              SizedBox(width: 5),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      widget.author,
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(color: Coolors.main, fontSize: 12),
                    ),
                    Text(
                      "Aujourd'hui à 08:32 ", // mettre librairie
                      style: TextStyle(color: Coolors.subtitle, fontSize: 10),
                    )
                  ],
                ),
              ),
              if (widget.image.length > 0) ...(documentArranger()),
            ],
          ),
          SizedBox(height: 10),
          //Text
          Text(
            widget.text,
            overflow: TextOverflow.ellipsis,
            maxLines: 3,
            style: TextStyle(color: Coolors.black, fontSize: 13),
          ),
          SizedBox(height: 10),
          //reactions
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              Row(
                children: [
                  Icon(Icons.favorite_rounded,
                      size: 20, color: Coolors.subtitle),
                  Text("${widget.counter[0]}",
                      style: TextStyle(fontSize: 12, color: Coolors.black))
                ],
              ),
              if (widget.reaction.length > 0) reactionArranger(),
              Row(
                children: [
                  Icon(Icons.insert_comment_rounded,
                      size: 20, color: Coolors.subtitle),
                  Text("${widget.counter[1]}",
                      style: TextStyle(fontSize: 12, color: Coolors.black))
                ],
              )
            ],
          )
        ],
      ),
    );
  }
}

class HeroChat<T> extends PageRoute<T> {
  HeroChat({this.builder}) : super();

  final WidgetBuilder builder;

  @override
  bool get opaque => false;

  @override
  bool get barrierDismissible => true;

  @override
  Duration get transitionDuration => Duration(seconds: 1);

  @override
  bool get maintainState => true;

  @override
  Color get barrierColor => Colors.black.withAlpha(50);

  @override
  Widget buildTransitions(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation, Widget child) {
    return FadeTransition(
        opacity: CurvedAnimation(parent: animation, curve: Curves.linear),
        child: child);
  }

  @override
  Widget buildPage(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation) {
    return builder(context);
  }

  @override
  String get barrierLabel => null;
}

class Coolors {
  static const main = Color(0xFF685DFB);
  static const background = Color(0xFFF6F5FB);
  static const backfloor = Colors.white;
  static const black = Color(0xFF383B3D);
  static const subtitle = Color(0xFFA0A7BA);
}

class ImagesUrl {
  static const String url =
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fthumb%2Ff%2Ffa%2FPiburger_See%252C_Austria_(Unsplash).jpg%2F320px-Piburger_See%252C_Austria_(Unsplash).jpg&f=1&nofb=1";
}

```
</details>

<details><summary>flutter doctor -v</summary>

```
[√] Flutter (Channel master, 1.24.0-8.0.pre.251, on Microsoft Windows [version 10.0.19042.610], locale fr-FR)
    • Flutter version 1.24.0-8.0.pre.251 at C:\Users\Karim\Documents\Github\flutter
    • Framework revision 836efaecf0 (32 hours ago), 2020-11-13 21:51:04 -0800
    • Engine revision e06f106385
    • Dart version 2.12.0 (build 2.12.0-40.0.dev)

[!] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    • Android SDK at C:\Users\Karim\AppData\Local\Android\sdk
    • Platform android-R, build-tools 29.0.3
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses

[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.4.4)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
    • Visual Studio Community 2019 version 16.4.29728.190
    • Windows 10 SDK version 10.0.17763.0

[√] Android Studio (version 4.1.0)
    • Android Studio at C:\Program Files\Android\Android Studio
    • 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-b01)

[√] VS Code (version 1.51.0)
    • VS Code at C:\Users\Karim\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.16.0

[√] Connected device (1 available)
    • Windows (desktop) • windows • windows-x64 • Microsoft Windows [version 10.0.19042.610]

! Doctor found issues in 1 category.

```
</details>

Also, if I wrap the widget into a `Material` in the flight it add a background, even with `colors: Colors.transparent`. But I can give it a borderRadius property so thats okay