Repository navigation
CupertinoSheetRoute content extends beyond screen & affects hero animation #164087
Description
Steps to reproduce
- Copy and paste the example code below, which is a minimally modified version of the official example from the Flutter documentation.
- Tap the “Open Bottom Sheet” button.
- Notice that the FlutterLogo widget is not fully visible.
- (Optional) Uncomment the “Scroll Example” or “Hero Example” to observe the same issue in different scenarios.
I tested this using the Pixel 8 Pro emulator on Android and encountered the same issue on other platforms, including Windows and the web (Chrome).
Expected results
The entire content of the CupertinoSheetRoute should be fully visible.
Actual results
- The bottom of the
CupertinoSheetRouteextends beyond the screen, and the height of the portion outside the screen varies, likely due to changes in the device height. - Interestingly, the hero animation also seems to be affected by this issue, as shown in the video below—the widget makes a sudden jump after the animation is complete.
Code sample
Code sample
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
/// Flutter code sample for [CupertinoSheetRoute].
void main() {
runApp(const CupertinoSheetApp());
}
class CupertinoSheetApp extends StatelessWidget {
const CupertinoSheetApp({super.key});
@override
Widget build(BuildContext context) {
return const CupertinoApp(
theme: CupertinoThemeData(brightness: Brightness.light),
title: 'Cupertino Sheet',
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
navigationBar: const CupertinoNavigationBar(
middle: Text('Sheet Example'),
automaticBackgroundVisibility: false,
),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CupertinoButton.filled(
onPressed: () {
Navigator.of(context).push(
CupertinoSheetRoute<void>(
builder: (BuildContext context) => const _SheetScaffold(),
),
);
},
child: const Text('Open Bottom Sheet'),
),
],
),
),
);
}
}
class _SheetScaffold extends StatelessWidget {
const _SheetScaffold();
@override
Widget build(BuildContext context) {
return SafeArea(
child: Stack(
alignment: Alignment.bottomCenter,
children: [
GestureDetector(onTap: () {
if (CupertinoSheetRoute.hasParentSheet(context)) {
CupertinoSheetRoute.popSheet(context);
} else {
Navigator.pop(context);
}
}),
Container(
clipBehavior: Clip.hardEdge,
width: double.infinity,
decoration: BoxDecoration(
color: Theme.of(context).cardColor,
borderRadius: const BorderRadius.vertical(
top: Radius.circular(12),
),
boxShadow: [
BoxShadow(
color: Colors.black.withAlpha(80),
spreadRadius: 10,
blurRadius: 10,
offset: const Offset(0, 7),
),
],
),
child: const FlutterLogo(size: 200),
),
],
),
);
/*
TODO: Scroll example
Test with `CupertinoPageScaffold` but same result:
return CupertinoPageScaffold(
child: Scrollbar(
thumbVisibility: true,
trackVisibility: true,
child: ListView.builder(
physics: const ClampingScrollPhysics(),
itemCount: 7,
itemBuilder: (context, index) {
return Container(
color: Colors.amber,
child: const FlutterLogo(size: 200),
);
},
),
),
);
*/
/*
TODO: Hero example
return CupertinoPageScaffold(
child: Center(
child: GestureDetector(
onTap: () {
Navigator.push(
context,
CupertinoPageRoute(
builder: (_) {
return const CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
automaticBackgroundVisibility: false,
),
child: SafeArea(
child: Align(
alignment: Alignment.topCenter,
child: Hero(
tag: 'test',
child: FlutterLogo(size: 200),
),
),
),
);
},
),
);
},
child: const Hero(
tag: 'test',
child: FlutterLogo(size: 200),
),
),
),
);
*/
}
}Screenshots or Video
Screenshots / Video demonstration
Simple.mp4
Scroll.mp4
Hero.mp4
Logs
No response
Flutter Doctor output
Doctor output
[√] Flutter (Channel stable, 3.29.0, on Microsoft Windows [Version 10.0.26100.3194], locale de-CH) [791ms]
• Flutter version 3.29.0 on channel stable at C:\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 35c388afb5 (2 weeks ago), 2025-02-10 12:48:41 -0800
• Engine revision f73bfc4522
• Dart version 3.7.0
• DevTools version 2.42.2
[√] Windows Version (11 Home 64-bit, 24H2, 2009) [5.1s]
[√] Android toolchain - develop for Android devices (Android SDK version 34.0.0) [4.6s]
• Android SDK at C:\Users\AlexF\AppData\Local\Android\Sdk
• Platform android-35, build-tools 34.0.0
• ANDROID_HOME = C:\Users\AlexF\AppData\Local\Android\Sdk
• ANDROID_SDK_ROOT = C:\Users\AlexF\AppData\Local\Android\Sdk
• Java binary at: C:\Program Files\Android\Android Studio1\jbr\bin\java
This is the JDK bundled with the latest Android Studio installation on this machine.
To manually set the JDK path, use: `flutter config --jdk-dir="path/to/jdk"`.
• Java version OpenJDK Runtime Environment (build 17.0.10+0--11572160)
• All Android licenses accepted.
[√] Chrome - develop for the web [171ms]
• Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe
[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.5.0) [169ms]
• Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
• Visual Studio Community 2022 version 17.5.33414.496
• Windows 10 SDK version 10.0.22000.0
[√] Android Studio (version 2023.3) [38ms]
• Android Studio at C:\Program Files\Android\Android Studio1
• 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 17.0.10+0--11572160)
[√] VS Code (version 1.97.2) [36ms]
• VS Code at C:\Users\AlexF\AppData\Local\Programs\Microsoft VS Code
• Flutter extension version 3.104.0
[√] Connected device (3 available) [622ms]
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.26100.3194]
• Chrome (web) • chrome • web-javascript • Google Chrome 133.0.6943.127
• Edge (web) • edge • web-javascript • Microsoft Edge 132.0.2957.127
[√] Network resources [642ms]
• All expected network resources are available.
• No issues found!
Activity
maheshj01 commentedon Feb 26, 2025
Hello @hm21, Thanks for filing the detailed issue. Reproducible on latest stable and the master channel. I am quite not sure whether the jump in hero animation is related to this issue. Incase it is not we should file it separately,
flutter doctor -v
TahaTesser commentedon Mar 11, 2025
@maheshj01 Please label Cupertino widget issues with
team-designsince this is not a core framework widget.igor-kualia commentedon Mar 28, 2025
I think it has something to do with the extra padding at the top. You can notice the extra padding when you add an AppBar to your Scaffold. Or see an example in this duplicate-closed issue: #164779 (comment)
Fix: Update sheet route bottom padding with top padding (#164473)
Fix: Update sheet route bottom padding with top padding (flutter#164473)
Fix: Update sheet route bottom padding with top padding (flutter#164473)
github-actions commentedon Apr 30, 2025
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.Fix: Update sheet route bottom padding with top padding (flutter#164473)