Wrong positioning of GridView in Hero animations #99084
Description
Steps to Reproduce
- Run the below modified version of the official
Herodocs. - Tap on the images to toggle/navigate between the two screens.
Expected results:
The GridView widget should smoothly animate from one screen to the other.
Actual results:
When animated, the GridView is incorrectly positioned on the screen, resulting in a visible jump right before the Hero animation finishes. (The bug is more visible when navigating to MainScreen, but it exists in both directions.)
Code & Logs
Code
import 'package:flutter/material.dart';
void main() => runApp(const HeroApp());
class HeroApp extends StatelessWidget {
const HeroApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Transition Demo',
home: MainScreen(),
);
}
}
class MainScreen extends StatelessWidget {
const MainScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Main Screen')),
body: GestureDetector(
onTap: () => Navigator.of(context).push(
MaterialPageRoute(builder: (_) => const DetailScreen()),
),
child: Hero(
tag: 'imageHero',
child: GridView.count(
crossAxisCount: 3,
shrinkWrap: true,
children: [
Image.network('https://picsum.photos/250?image=9'),
Image.network('https://picsum.photos/250?image=9'),
],
),
),
),
);
}
}
class DetailScreen extends StatelessWidget {
const DetailScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: GestureDetector(
onTap: () => Navigator.pop(context),
child: Hero(
tag: 'imageHero',
child: GridView.count(
crossAxisCount: 3,
shrinkWrap: true,
children: [
Image.network('https://picsum.photos/250?image=9'),
Image.network('https://picsum.photos/250?image=9'),
],
),
),
),
);
}
}Flutter Doctor
[✓] Flutter (Channel stable, 2.10.2, on macOS 12.0.1 21A559 darwin-x64, locale en-US)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2020.3)
[✓] VS Code (version 1.64.2)
[✓] Connected device (2 available)
[✓] HTTP Host Availability