Repository navigation
When the on-screen keyboard is open, NavigationBar does not maintainBottomViewPadding in Edge-to-Edge mode #159526
Description
Steps to reproduce
- Create this NavigationBar example:
Alternatively you can clone
https://github.com/VinhNgT/navbar-edge2edge-bugand skip step 1 and 2.
flutter create --sample=material.NavigationBar.3 mysample- Enable Edge-To-Edge mode by adding these to
void main():
WidgetsFlutterBinding.ensureInitialized();
SystemChrome.setSystemUIOverlayStyle(
const SystemUiOverlayStyle(systemNavigationBarColor: Colors.transparent));
await SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);- Press "Push/list" -> "Push/text", then tap on the text field to open the on-screen keyboard.
- Notice every time you close/open the keyboard, the NavigationBar moves up and down.
Expected results
The NavigationBar should lock in place when the keyboard is open. Similar to SafeArea.maintainBottomViewPadding
Actual results
The NavigationBar follows padding instead of viewPadding, which causes it to move when the keyboard closes/opens.
Code sample
Code sample
Screenshots or Video
Screenshots / Video demonstration
screen-20241127-104148.mp4
Logs
No log
Flutter Doctor output
Doctor output
[√] Flutter (Channel stable, 3.24.5, on Microsoft Windows [Version 10.0.22631.4460], locale en-US)
• Flutter version 3.24.5 on channel stable at F:\tools\fvm\versions\3.24.5
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision dec2ee5c1f (13 days ago), 2024-11-13 11:13:06 -0800
• Engine revision a18df97ca5
• Dart version 3.5.4
• DevTools version 2.37.3
[√] Windows Version (Installed version of Windows is version 10 or higher)
[√] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
• Android SDK at C:\Users\victo\AppData\Local\Android\sdk
• Platform android-35, build-tools 35.0.0
• Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
• Java version OpenJDK Runtime Environment (build 21.0.3+-12282718-b509.11)
• All Android licenses accepted.
[X] Chrome - develop for the web (Cannot find Chrome executable at .\Google\Chrome\Application\chrome.exe)
! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.11.5)
• Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
• Visual Studio Community 2022 version 17.11.35327.3
• Windows 10 SDK version 10.0.22621.0
[√] Android Studio (version 2024.2)
• Android Studio at C:\Program Files\Android\Android Studio
• 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 21.0.3+-12282718-b509.11)
[√] VS Code (version 1.95.3)
• VS Code at C:\Users\victo\AppData\Local\Programs\Microsoft VS Code
• Flutter extension version 3.100.0
[√] Connected device (4 available)
• Redmi Note 8 (mobile) • 192.168.99.126:42415 • android-arm64 • Android 14 (API 34)
• Redmi Note 8 (mobile) • adb-139ed888-lNT5l9._adb-tls-connect._tcp • android-arm64 • Android 14 (API 34)
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.22631.4460]
• Edge (web) • edge • web-javascript • Microsoft Edge 130.0.2849.80
[√] Network resources
• All expected network resources are available.
! Doctor found issues in 1 category.Metadata
Metadata
Assignees
Labels
Important issues not at the top of the work listSystemChrome and Framework's Layout IssuesEntering text in a text field or keyboard related problemsFound to occur in 3.24Found to occur in 3.27flutter/packages/flutter repository. See also f: labels.The issue has been confirmed reproducible and is ready to work onmaterial_ui package in flutter/packagesIssue is closed as already fixed in a newer versionOwned by Design Languages teamTriaged by Design Languages teamThere is a workaround available to overcome the issue
Type
Projects
- Status
Activity
VinhNgT commentedon Nov 27, 2024
The current workaround is to wrap the NavigationBar inside SafeArea with maintainBottomViewPadding: true and a ColoredBox like this:
darshankawar commentedon Nov 27, 2024
Thanks for the report. I was able to replicate this using latest versions and seems specific to edge to edge. I tried with manual and immersive with which the navigationBar doesn't jump as shown below:
Screen_Recording_20241127_155430.mp4
Verified on Android S10+ device and also on emulator.
maybe related to #89914
3 remaining items
Add ability to maintain bottom view padding in `NavigationBar` safe a…
Add ability to maintain bottom view padding in `NavigationBar` safe a…
github-actions commentedon Feb 7, 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.