Add ability to maintain bottom view padding in `NavigationBar` safe area #162076

TahaTesser · 2025-01-23T14:10:54Z

Fixes When the on-screen keyboard is open, NavigationBar does not maintainBottomViewPadding in Edge-to-Edge mode

Description

According to the SafeArea.maintainBottomViewPadding docs, it is expected that NavigationBar will shift when the view padding changes. This PR provides ability to override the maintainBottomViewPadding property in the under SafeArea in the NavigationBar.

Code Sample

expand to view the code sample

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Sample'),
        ),
        body: const Center(
          child: Padding(
            padding: EdgeInsets.all(16.0),
            child: TextField(
              decoration: InputDecoration(border: OutlineInputBorder()),
            ),
          ),
        ),
        bottomNavigationBar: NavigationBar(
          maintainBottomViewPadding: true,
          destinations: const <Widget>[
          NavigationDestination(icon: Icon(Icons.favorite_rounded), label: 'Favorite'),
          NavigationDestination(icon: Icon(Icons.favorite_rounded), label: 'Favorite'),
          NavigationDestination(icon: Icon(Icons.favorite_rounded), label: 'Favorite')
        ]),
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}

With `maintainBottomViewPadding: false` (Default)

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-01-23.at.15.40.57.mp4

With `maintainBottomViewPadding: true`

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-01-23.at.15.41.46.mp4

Pre-launch Checklist

I read the Contributor Guide and followed the process outlined there for submitting PRs.
I read the Tree Hygiene wiki page, which explains my responsibilities.
I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
I signed the CLA.
I listed at least one issue that this PR fixes in the description above.
I updated/added relevant documentation (doc comments with ///).
I added new tests to check the change I am making, or this PR is test-exempt.
I followed the breaking change policy and added Data Driven Fixes where supported.
All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

QuncCccccc

LGTM. Thanks!

QuncCccccc · 2025-01-23T19:29:04Z

packages/flutter/lib/src/material/navigation_bar.dart

+  /// When true, this will prevent the [NavigationBar] from shifting when opening a
+  /// software keyboard due to the change in the padding value, especially when the
+  /// app uses [SystemUiMode.edgeToEdge], which renders the navigation elements over
+  /// the application instead of outside it.


This is a bit confusing. Maybe "which renders the system bars over the application instead of outside it."?

I copied this wording from official SystemUiMode.edgeToEdge docs. It might be too confusing for NavigationBar docs.

…` safe area (flutter/flutter#162076)

@OverRide

…rea (flutter#162076) Fixes [When the on-screen keyboard is open, NavigationBar does not maintainBottomViewPadding in Edge-to-Edge mode](flutter#159526) ### Description According to the [SafeArea.maintainBottomViewPadding](https://api.flutter.dev/flutter/widgets/SafeArea/maintainBottomViewPadding.html) docs, it is expected that `NavigationBar` will shift when the view padding changes. This PR provides ability to override the `maintainBottomViewPadding` property in the under `SafeArea` in the `NavigationBar`. ### Code Sample <details> <summary>expand to view the code sample</summary> ```dart import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; void main() async { WidgetsFlutterBinding.ensureInitialized(); await SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge); runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @OverRide Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( appBar: AppBar( title: const Text('Sample'), ), body: const Center( child: Padding( padding: EdgeInsets.all(16.0), child: TextField( decoration: InputDecoration(border: OutlineInputBorder()), ), ), ), bottomNavigationBar: NavigationBar( maintainBottomViewPadding: true, destinations: const <Widget>[ NavigationDestination(icon: Icon(Icons.favorite_rounded), label: 'Favorite'), NavigationDestination(icon: Icon(Icons.favorite_rounded), label: 'Favorite'), NavigationDestination(icon: Icon(Icons.favorite_rounded), label: 'Favorite') ]), floatingActionButton: FloatingActionButton( onPressed: () {}, child: const Icon(Icons.add), ), ), ); } } ``` </details> ### With `maintainBottomViewPadding: false` (Default) https://github.com/user-attachments/assets/1cea27d4-2d6d-4bca-bb9a-53c0a21fdb4d ### With `maintainBottomViewPadding: true` https://github.com/user-attachments/assets/b6c7487f-e23c-43db-a365-90bf69fa03dd ## Pre-launch Checklist - [x] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [x] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [x] I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement]. - [x] I signed the [CLA]. - [x] I listed at least one issue that this PR fixes in the description above. - [x] I updated/added relevant documentation (doc comments with `///`). - [x] I added new tests to check the change I am making, or this PR is [test-exempt]. - [ ] I followed the [breaking change policy] and added [Data Driven Fixes] where supported. - [x] All existing and new tests are passing. If you need help, consider asking for advice on the #hackers-new channel on [Discord].  [Contributor Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview [Tree Hygiene]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md [test-exempt]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests [Flutter Style Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md [Features we expect every widget to implement]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement [CLA]: https://cla.developers.google.com/ [flutter/tests]: https://github.com/flutter/tests [breaking change policy]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes [Discord]: https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md [Data Driven Fixes]: https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md

…` safe area (flutter/flutter#162076)

Manual roll requested by [email protected] flutter/flutter@c1561a4...c1ffaa9 2025-01-24 [email protected] Fix link to hotfix documentation best practices (flutter/flutter#162116) 2025-01-24 [email protected] Add integration test for cutout rotation evaluation (flutter/flutter#160354) 2025-01-24 [email protected] Reland "[Impeller] Migrate unit tests off of Skia geometry classes (#161855)" (flutter/flutter#162146) 2025-01-24 [email protected] Fix TextField intrinsic width when hint is not visible (flutter/flutter#161235) 2025-01-24 [email protected] When parsing flavors, handle Xcode build configurations that are not lowercase (flutter/flutter#161455) 2025-01-24 [email protected] [Impeller] Fix source offset in PathBuilder::AddPath (flutter/flutter#162052) 2025-01-24 [email protected] Add to Setup Path Example to Engine README (flutter/flutter#162115) 2025-01-23 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Unskip test. (#162106)" (flutter/flutter#162122) 2025-01-23 [email protected] feat: Add `hint` (Widget) property to InputDecoration (flutter/flutter#161424) 2025-01-23 [email protected] Fix skwasm target in wasm_debug_unopt build. (flutter/flutter#162100) 2025-01-23 [email protected] Marks Linux_android_emu android views to be unflaky (flutter/flutter#160493) 2025-01-23 [email protected] Unskip test. (flutter/flutter#162106) 2025-01-23 [email protected] Add ability to maintain bottom view padding in `NavigationBar` safe area (flutter/flutter#162076) 2025-01-23 [email protected] Roll pub packages (flutter/flutter#162095) 2025-01-23 [email protected] Delete an unused (manual) workflow, added missing copyright headers. (flutter/flutter#162050) 2025-01-23 [email protected] Android templates: update default Kotlin from 1.8.22 to 2.1.0, update default Gradle from 8.9 to 8.12 (flutter/flutter#160974) 2025-01-23 [email protected] flutter_tools: flutter_tester is a host artifact (flutter/flutter#162047) 2025-01-23 [email protected] [Impeller] Make glIsTexture mockable for use by the ReactorGLES.NameUntrackedHandle test (flutter/flutter#162082) 2025-01-23 [email protected] Remove "Mac Designed for iPad" as a discoverable `flutter run` device (flutter/flutter#161459) 2025-01-23 [email protected] Show error on macOS if missing Local Network permissions (flutter/flutter#161846) 2025-01-23 [email protected] Autocomplete keyboard navigation (flutter/flutter#159455) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages Please CC [email protected],[email protected] on the revert to ensure that a human is aware of the problem. To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://issues.skia.org/issues/new?component=1389291&template=1850622 Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md

…` safe area (flutter/flutter#162076)

) Manual roll requested by [email protected] flutter/flutter@c1561a4...c1ffaa9 2025-01-24 [email protected] Fix link to hotfix documentation best practices (flutter/flutter#162116) 2025-01-24 [email protected] Add integration test for cutout rotation evaluation (flutter/flutter#160354) 2025-01-24 [email protected] Reland "[Impeller] Migrate unit tests off of Skia geometry classes (#161855)" (flutter/flutter#162146) 2025-01-24 [email protected] Fix TextField intrinsic width when hint is not visible (flutter/flutter#161235) 2025-01-24 [email protected] When parsing flavors, handle Xcode build configurations that are not lowercase (flutter/flutter#161455) 2025-01-24 [email protected] [Impeller] Fix source offset in PathBuilder::AddPath (flutter/flutter#162052) 2025-01-24 [email protected] Add to Setup Path Example to Engine README (flutter/flutter#162115) 2025-01-23 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Unskip test. (#162106)" (flutter/flutter#162122) 2025-01-23 [email protected] feat: Add `hint` (Widget) property to InputDecoration (flutter/flutter#161424) 2025-01-23 [email protected] Fix skwasm target in wasm_debug_unopt build. (flutter/flutter#162100) 2025-01-23 [email protected] Marks Linux_android_emu android views to be unflaky (flutter/flutter#160493) 2025-01-23 [email protected] Unskip test. (flutter/flutter#162106) 2025-01-23 [email protected] Add ability to maintain bottom view padding in `NavigationBar` safe area (flutter/flutter#162076) 2025-01-23 [email protected] Roll pub packages (flutter/flutter#162095) 2025-01-23 [email protected] Delete an unused (manual) workflow, added missing copyright headers. (flutter/flutter#162050) 2025-01-23 [email protected] Android templates: update default Kotlin from 1.8.22 to 2.1.0, update default Gradle from 8.9 to 8.12 (flutter/flutter#160974) 2025-01-23 [email protected] flutter_tools: flutter_tester is a host artifact (flutter/flutter#162047) 2025-01-23 [email protected] [Impeller] Make glIsTexture mockable for use by the ReactorGLES.NameUntrackedHandle test (flutter/flutter#162082) 2025-01-23 [email protected] Remove "Mac Designed for iPad" as a discoverable `flutter run` device (flutter/flutter#161459) 2025-01-23 [email protected] Show error on macOS if missing Local Network permissions (flutter/flutter#161846) 2025-01-23 [email protected] Autocomplete keyboard navigation (flutter/flutter#159455) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages Please CC [email protected],[email protected] on the revert to ensure that a human is aware of the problem. To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://issues.skia.org/issues/new?component=1389291&template=1850622 Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md

Add ability to maintain bottom view padding in NavigationBar safe area

c1e1fc6

github-actions bot added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. labels Jan 23, 2025

TahaTesser marked this pull request as ready for review January 23, 2025 15:44

TahaTesser requested a review from QuncCccccc January 23, 2025 15:53

QuncCccccc approved these changes Jan 23, 2025

View reviewed changes

Address feedback

f91d163

TahaTesser added the autosubmit Merge PR when tree becomes green via auto submit App label Jan 23, 2025

auto-submit bot added this pull request to the merge queue Jan 23, 2025

Merged via the queue into flutter:master with commit 1c0b336 Jan 23, 2025
97 checks passed

flutter-dashboard bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Jan 23, 2025

TahaTesser deleted the NavigationBar_maintainBottomViewPadding branch January 24, 2025 08:09

engine-flutter-autoroll mentioned this pull request Jan 24, 2025

Roll Flutter from c1561a41c530 to bf7daf22a51e (19 revisions) flutter/packages#8495

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jan 24, 2025

1c0b336 Add ability to maintain bottom view padding in `NavigationBar…

3cbd02c

…` safe area (flutter/flutter#162076)

engine-flutter-autoroll mentioned this pull request Jan 24, 2025

Roll Flutter from c1561a41c530 to 02e11f95a18a (20 revisions) flutter/packages#8496

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jan 24, 2025

1c0b336 Add ability to maintain bottom view padding in `NavigationBar…

082d5a1

…` safe area (flutter/flutter#162076)

engine-flutter-autoroll mentioned this pull request Jan 24, 2025

Roll Flutter from c1561a41c530 to c1ffaa9d9deb (21 revisions) flutter/packages#8497

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jan 24, 2025

1c0b336 Add ability to maintain bottom view padding in `NavigationBar…

fe2ed03

…` safe area (flutter/flutter#162076)

engine-flutter-autoroll mentioned this pull request Jan 24, 2025

Manual roll Flutter from c1561a41c530 to c1ffaa9d9deb (21 revisions) flutter/packages#8498

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jan 24, 2025

1c0b336 Add ability to maintain bottom view padding in `NavigationBar…

841bf24

…` safe area (flutter/flutter#162076)

engine-flutter-autoroll mentioned this pull request Jan 24, 2025

Roll Flutter from c1561a41c530 to c1ffaa9d9deb (21 revisions) flutter/packages#8500

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jan 24, 2025

1c0b336 Add ability to maintain bottom view padding in `NavigationBar…

78daa4f

…` safe area (flutter/flutter#162076)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 20, 2025

1c0b336 Add ability to maintain bottom view padding in `NavigationBar…

62417f1

…` safe area (flutter/flutter#162076)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 20, 2025

1c0b336 Add ability to maintain bottom view padding in `NavigationBar…

03d4928

…` safe area (flutter/flutter#162076)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 21, 2025

1c0b336 Add ability to maintain bottom view padding in `NavigationBar…

f6ea4f3

…` safe area (flutter/flutter#162076)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add ability to maintain bottom view padding in `NavigationBar` safe area #162076

Add ability to maintain bottom view padding in `NavigationBar` safe area #162076

Uh oh!

TahaTesser commented Jan 23, 2025 •

edited

Loading

Uh oh!

QuncCccccc left a comment

Uh oh!

QuncCccccc Jan 23, 2025

Uh oh!

TahaTesser Jan 23, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Add ability to maintain bottom view padding in NavigationBar safe area #162076

Add ability to maintain bottom view padding in NavigationBar safe area #162076

Uh oh!

Conversation

TahaTesser commented Jan 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Code Sample

With maintainBottomViewPadding: false (Default)

With maintainBottomViewPadding: true

Pre-launch Checklist

Uh oh!

QuncCccccc left a comment

Choose a reason for hiding this comment

Uh oh!

QuncCccccc Jan 23, 2025

Choose a reason for hiding this comment

Uh oh!

TahaTesser Jan 23, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Add ability to maintain bottom view padding in `NavigationBar` safe area #162076

Add ability to maintain bottom view padding in `NavigationBar` safe area #162076

TahaTesser commented Jan 23, 2025 •

edited

Loading

With `maintainBottomViewPadding: false` (Default)

With `maintainBottomViewPadding: true`