flutter hero widget not working when going to new page

Question

i am currently using the hero widget for flutter. my issue is that the hero is only working when i go from profile screen to chat screen and not from chat screen to profile screen. the tags are the same but i just cannot wrap my head around why is it not working. tia for all inputs

chat screen

class _AppBarTitle extends StatelessWidget {
  const _AppBarTitle({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final channel = StreamChannel.of(context).channel;
    return Row(
      children: [
        Hero(
          tag: 'community-profile-picture',
          child: Padding(
            padding: const EdgeInsets.only(bottom: 4),
            child: Avatar.medium(
                url: Helpers.randomPictureUrl(), // can be a random image url
                onTap: () {
                  Navigator.of(context).push(
                      PersonalDevelopmentProfileScreen.routeWithChannel(
                          channel));
                }),
          ),
        ),
        const SizedBox(
          width: 16,
        ),
        Expanded(
            child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              Helpers.getChannelName(channel, context.currentUser!),
              overflow: TextOverflow.ellipsis,
              style: const TextStyle(
                fontSize: 16,
              ),
            ),
            const SizedBox(height: 2),
          ],
        )),
        Padding(
            padding: const EdgeInsets.all(8),
            child: IconBackground(
              icon: CupertinoIcons.info_circle,
              onTap: () => showDialog<String>(
                context: context,
                builder: (BuildContext context) => AlertDialog(
                  title: Center(
                    child: Text(
                        'About ${Helpers.getChannelName(channel, context.currentUser!)}'),
                  ),
                  content: Text(
                      '${Helpers.getChannelName(channel, context.currentUser!)} Description'),
                  actions: <Widget>[
                    TextButton(
                      style: TextButton.styleFrom(
                          shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(30.0)),
                          primary: AppColors.accent),
                      onPressed: () => Navigator.pop(context, 'OK'),
                      child: const Text('OK',
                          style: TextStyle(color: AppColors.secondary)),
                    ),
                  ],
                ),
              ),
            ))
      ],
    );
  }
}

scaffold for chat screen

return Scaffold(
      appBar: AppBar(
        leadingWidth: 54,
        leading: Align(
          alignment: Alignment.centerRight,
          child: IconBackground(
            icon: CupertinoIcons.chevron_back,
            onTap: () => Navigator.of(context).push(CustomPageRoute(
                child: const HomeScreen(), direction: AxisDirection.right)),
          ),
        ),
        title: const _AppBarTitle(),
      ),

profile screen

class _AppBarTitle extends StatelessWidget {
  const _AppBarTitle({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
            child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('Members Of Community',
                style: GoogleFonts.lato(
                    fontSize: 24,
                    fontWeight: FontWeight.bold,
                    color: Colors.black)),
            const SizedBox(height: 2),
          ],
        )),
        const SizedBox(
          width: 16,
        ),
        Hero(
          tag: 'community-profile-picture',
          child: Padding(
            padding: const EdgeInsets.only(bottom: 4),
            child: Avatar.medium(
                url: Helpers.randomPictureUrl(), // can be a random image url
                onTap: () => Navigator.of(context).pop()),
          ),
        ),
      ],
    );
  }
}

scaffold for profile screen

return Scaffold(
          appBar: AppBar(
            leadingWidth: 54,
            leading: Align(
              alignment: Alignment.centerRight,
              child: IconBackground(
                  icon: CupertinoIcons.chevron_back,
                  onTap: () => Navigator.of(context).pop()),
            ),
            title: const _AppBarTitle(),
          ),

avatar

class Avatar extends StatelessWidget {
  const Avatar({
    Key? key,
    this.url,
    required this.radius,
    this.onTap,
  }) : super(key: key);

  const Avatar.small({
    Key? key,
    this.url,
    this.onTap,
  })  : radius = 18,
        super(key: key);

  const Avatar.medium({
    Key? key,
    this.url,
    this.onTap,
  })  : radius = 26,
        super(key: key);

  const Avatar.large({
    Key? key,
    this.url,
    this.onTap,
  })  : radius = 34,
        super(key: key);

  final double radius;
  final String? url;
  final VoidCallback? onTap;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: _avatar(context),
    );
  }

  Widget _avatar(BuildContext context) {
    if (url != null) {
      return CircleAvatar(
        radius: radius,
        backgroundImage: CachedNetworkImageProvider(url!),
        backgroundColor: Theme.of(context).cardColor,
      );
    } else {
      return CircleAvatar(
        radius: radius,
        backgroundColor: Theme.of(context).cardColor,
        child: Center(
          child: Text(
            '?',
            style: TextStyle(fontSize: radius),
          ),
        ),
      );
    }
  }
}

Answer 1

Provide hero top level on second widget and follow this pattern,

chat screen

class _AppBarTitle extends StatelessWidget {
  const _AppBarTitle({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: row(context),
      ),
    );
  }

  Row row(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Hero(
          tag: 'community-profile-picture',
          child: Padding(
            padding: const EdgeInsets.only(bottom: 4),
            child: GestureDetector(
              onTap: () {
                Navigator.of(context).push(
                  MaterialPageRoute(
                    builder: (context) => _2AppBarTitle(),
                  ),
                );
              },
              child: Material(
                child: Container(
                    height: 100,
                    width: 100,
                    color: Colors.green,
                    child: Text("tap")),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

profile screen

class _2AppBarTitle extends StatelessWidget {
  const _2AppBarTitle({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Hero(
      tag: 'community-profile-picture',
      child: Scaffold(
        body: Padding(
          padding: const EdgeInsets.only(bottom: 4),
          child: GestureDetector(
            onTap: () => Navigator.of(context).pop(),
            child: Text("pop"),
          ),
        ),
      ),
    );
  }
}