Hero works great! except with text

wafrat -

You can watch the 1 minute YouTube demo on the documentation:

Hero class - widgets library - Dart API
API docs for the Hero class from the widgets library, for the Dart programming language.
Dart API

There's also a full page that goes in-depth about the topic: https://flutter.dev/docs/development/ui/animations/hero-animations

But for basic use cases, you can simply take a look at the snippets below:

With an image

In the main list view:

leading: Hero(
  tag: 'thumbnail' + youtuberId.toString(),
  child: Image.network(youtuberInfo.thumbnailUrl),
),

In the details page, I can even use clipping:

Hero(
    tag: 'thumbnail' + youtuberInfo.id.toString(),
    child: ClipRRect(
      borderRadius: BorderRadius.all(Radius.circular(16)),
      child: Image.network(youtuberInfo.thumbnailUrl),
    )),

Text

With text it should be simple but it's really not. There has been a long standing issue that makes text turn red and flicker during the animation. See this issue from end of 2017: https://github.com/flutter/flutter/issues/12463.

Hopefully it'll be fixed soon. You can check the latest status on this issue at https://github.com/flutter/flutter/issues/36220.