flutter hero widget not working when going to new page - flutter

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"),
),
),
),
);
}
}