Add ability to customize `NavigationBar` indicator overlay and fix indicator shape for the overlay #138901

TahaTesser · 2023-11-22T16:26:35Z

fixes Provide ability to override NavigationBar indicator ink response overlay
fixes NavigationBar.indicatorShape is ignored, NavigationBarThemeData.indicatorShape is applied to the indicator inkwell

Code sample

expand to view the code sample

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        bottomNavigationBar: NavigationBarExample(),
      ),
    );
  }
}

class NavigationBarExample extends StatefulWidget {
  const NavigationBarExample({super.key});

  @override
  State<NavigationBarExample> createState() => _NavigationBarExampleState();
}

class _NavigationBarExampleState extends State<NavigationBarExample> {
  int index = 0;

  @override
  Widget build(BuildContext context) {
    return NavigationBar(
      elevation: 0,
      overlayColor: const MaterialStatePropertyAll<Color>(Colors.transparent),
      // indicatorShape: RoundedRectangleBorder(
      //   borderRadius: BorderRadius.circular(4.0),
      // ),
      indicatorColor: Colors.transparent,
      selectedIndex: index,
      onDestinationSelected: (int index) {
        setState(() {
          this.index = index;
        });
      },
      destinations: const <Widget>[
        NavigationDestination(
          selectedIcon: Icon(Icons.home_filled),
          icon: Icon(Icons.home_outlined),
          label: 'Home',
        ),
        NavigationDestination(
          selectedIcon: Icon(Icons.favorite),
          icon: Icon(Icons.favorite_outline),
          label: 'Favorites',
        ),
      ],
    );
  }
}

Before

Cannot override `NavigationBar` Indicator ink well overlay

Indicator shape is ignored for the indicator overlay

After

Can use `NavigationBar.overlayColor` or `NavigationBarThemeData.NavigationBar` to override default indicator overlay

overlayColor: MaterialStatePropertyAll<Color>(Colors.red.withOpacity(0.33)),

overlayColor: MaterialStatePropertyAll<Color>(Colors.transparent),

Indicator shape is respected for the indicator overlay

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.
All existing and new tests are passing.

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

flutter-dashboard · 2023-11-22T20:02:14Z

Golden file changes have been found for this pull request. Click here to view and triage (e.g. because this is an intentional change).

If you are still iterating on this change and are not ready to resolve the images on the Flutter Gold dashboard, consider marking this PR as a draft pull request above. You will still be able to view image results on the dashboard, commenting will be silenced, and the check will not try to resolve itself until marked ready for review.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

Changes reported for pull request #138901 at sha f45dae32609ccc8d987651052878a6b41a2155f7

…dicator shape for the overlay

HansMuller

LGTM

…d fix indicator shape for the overlay (flutter/flutter#138901)

Piinks · 2023-11-27T22:29:41Z

@TahaTesser would you like to prepare cherry pick? Or shall I? :)
https://github.com/flutter/flutter/wiki/Flutter-Cherrypick-Process

TahaTesser · 2023-11-27T22:52:41Z

@TahaTesser would you like to prepare cherry pick? Or shall I? :) https://github.com/flutter/flutter/wiki/Flutter-Cherrypick-Process

Please do!

Manual roll requested by [email protected] flutter/flutter@b5f163a...6bf3ccd 2023-11-27 [email protected] [flutter_tools] fix instructions to disable CLI animations (flutter/flutter#139094) 2023-11-27 [email protected] Roll Flutter Engine from 9fe149249957 to 900ce09b08b2 (3 revisions) (flutter/flutter#139095) 2023-11-27 [email protected] Wide gamut and platform view integration test. (flutter/flutter#138837) 2023-11-27 [email protected] Add ability to customize `NavigationBar` indicator overlay and fix indicator shape for the overlay (flutter/flutter#138901) 2023-11-27 [email protected] Roll Flutter Engine from cc57ace8e2e7 to 9fe149249957 (1 revision) (flutter/flutter#139077) 2023-11-27 [email protected] Add type validation to non-template .arb file parsing logic (flutter/flutter#139035) 2023-11-27 [email protected] Update Android app project template to apply Kotlin Gradle plugin declaratively (flutter/flutter#139006) 2023-11-27 [email protected] Prepare for dynamically sized views - pt. 2 (flutter/flutter#139079) 2023-11-27 [email protected] Prepare for dynamically sized views (flutter/flutter#138565) 2023-11-27 [email protected] Write tests for API examples of BottomNavigationBar and IconButton (flutter/flutter#138188) 2023-11-27 [email protected] Roll Flutter Engine from 9b610ecda771 to cc57ace8e2e7 (2 revisions) (flutter/flutter#139072) 2023-11-27 [email protected] Give an actionable error message when a Pod requires a higher minimum OS version (flutter/flutter#138097) 2023-11-27 [email protected] Edge case on flutter/flutter/issues/135402 with test (flutter/flutter#138814) 2023-11-27 [email protected] Roll Packages from 97f0a40 to e774e88 (4 revisions) (flutter/flutter#139066) 2023-11-27 [email protected] Roll Flutter Engine from 6f499ecea657 to 9b610ecda771 (1 revision) (flutter/flutter#139063) 2023-11-27 [email protected] Roll Flutter Engine from 61233cde4bb3 to 6f499ecea657 (2 revisions) (flutter/flutter#139051) 2023-11-27 [email protected] Roll Flutter Engine from 292a92166a94 to 61233cde4bb3 (1 revision) (flutter/flutter#139041) 2023-11-27 [email protected] Roll Flutter Engine from ebebb25aaa46 to 292a92166a94 (3 revisions) (flutter/flutter#139037) 2023-11-27 [email protected] Roll Flutter Engine from eb18add9ebc5 to ebebb25aaa46 (2 revisions) (flutter/flutter#139034) 2023-11-26 [email protected] Roll Flutter Engine from 77432202f766 to eb18add9ebc5 (1 revision) (flutter/flutter#139007) 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],[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

TahaTesser · 2023-11-28T19:12:51Z

@TahaTesser would you like to prepare cherry pick? Or shall I? :) https://github.com/flutter/flutter/wiki/Flutter-Cherrypick-Process

Filed CP issues #139159

@OverRide

…dicator shape for the overlay (flutter#138901) fixes [Provide ability to override `NavigationBar` indicator ink response overlay](flutter#138850) fixes [`NavigationBar.indicatorShape` is ignored, `NavigationBarThemeData.indicatorShape` is applied to the indicator inkwell](flutter#138900) ### Code sample <details> <summary>expand to view the code sample</summary> ```dart import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({super.key}); @OverRide Widget build(BuildContext context) { return const MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( bottomNavigationBar: NavigationBarExample(), ), ); } } class NavigationBarExample extends StatefulWidget { const NavigationBarExample({super.key}); @OverRide State<NavigationBarExample> createState() => _NavigationBarExampleState(); } class _NavigationBarExampleState extends State<NavigationBarExample> { int index = 0; @OverRide Widget build(BuildContext context) { return NavigationBar( elevation: 0, overlayColor: const MaterialStatePropertyAll<Color>(Colors.transparent), // indicatorShape: RoundedRectangleBorder( // borderRadius: BorderRadius.circular(4.0), // ), indicatorColor: Colors.transparent, selectedIndex: index, onDestinationSelected: (int index) { setState(() { this.index = index; }); }, destinations: const <Widget>[ NavigationDestination( selectedIcon: Icon(Icons.home_filled), icon: Icon(Icons.home_outlined), label: 'Home', ), NavigationDestination( selectedIcon: Icon(Icons.favorite), icon: Icon(Icons.favorite_outline), label: 'Favorites', ), ], ); } } ``` </details> ### Before #### Cannot override `NavigationBar` Indicator ink well overlay ![Screenshot 2023-11-22 at 18 22 48](https://github.com/flutter/flutter/assets/48603081/06f54335-71ee-4882-afb0-53b614933c38) #### Indicator shape is ignored for the indicator overlay ![Screenshot 2023-11-22 at 15 29 52](https://github.com/flutter/flutter/assets/48603081/913e0f77-48f4-4c6e-87f3-52c81b78f3d9) ### After #### Can use `NavigationBar.overlayColor` or `NavigationBarThemeData.NavigationBar` to override default indicator overlay `overlayColor: MaterialStatePropertyAll<Color>(Colors.red.withOpacity(0.33)),` ![Screenshot 2023-11-22 at 18 22 08](https://github.com/flutter/flutter/assets/48603081/28badae4-a7c7-4bf0-8bcc-278a1f84729d) `overlayColor: MaterialStatePropertyAll<Color>(Colors.transparent),` ![Screenshot 2023-11-22 at 18 22 25](https://github.com/flutter/flutter/assets/48603081/674b48b1-f66a-4d91-9f10-ad307416ac32) #### Indicator shape is respected for the indicator overlay ![Screenshot 2023-11-22 at 15 30 36](https://github.com/flutter/flutter/assets/48603081/ae9a3627-787e-45ac-9319-2ea8ea1e6ae6)

@OverRide

…ix in… (#139162) â�¦dicator shape for the overlay (#138901) fixes [Provide ability to override `NavigationBar` indicator ink response overlay](#138850) fixes [`NavigationBar.indicatorShape` is ignored, `NavigationBarThemeData.indicatorShape` is applied to the indicator inkwell](#138900) --- Cherry pick fixes #139159 --- ### Code sample <details> <summary>expand to view the code sample</summary> ```dart import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({super.key}); @OverRide Widget build(BuildContext context) { return const MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( bottomNavigationBar: NavigationBarExample(), ), ); } } class NavigationBarExample extends StatefulWidget { const NavigationBarExample({super.key}); @OverRide State<NavigationBarExample> createState() => _NavigationBarExampleState(); } class _NavigationBarExampleState extends State<NavigationBarExample> { int index = 0; @OverRide Widget build(BuildContext context) { return NavigationBar( elevation: 0, overlayColor: const MaterialStatePropertyAll<Color>(Colors.transparent), // indicatorShape: RoundedRectangleBorder( // borderRadius: BorderRadius.circular(4.0), // ), indicatorColor: Colors.transparent, selectedIndex: index, onDestinationSelected: (int index) { setState(() { this.index = index; }); }, destinations: const <Widget>[ NavigationDestination( selectedIcon: Icon(Icons.home_filled), icon: Icon(Icons.home_outlined), label: 'Home', ), NavigationDestination( selectedIcon: Icon(Icons.favorite), icon: Icon(Icons.favorite_outline), label: 'Favorites', ), ], ); } } ``` </details> ### Before #### Cannot override `NavigationBar` Indicator ink well overlay ![Screenshot 2023-11-22 at 18 22 48](https://github.com/flutter/flutter/assets/48603081/06f54335-71ee-4882-afb0-53b614933c38) #### Indicator shape is ignored for the indicator overlay ![Screenshot 2023-11-22 at 15 29 52](https://github.com/flutter/flutter/assets/48603081/913e0f77-48f4-4c6e-87f3-52c81b78f3d9) ### After #### Can use `NavigationBar.overlayColor` or `NavigationBarThemeData.NavigationBar` to override default indicator overlay `overlayColor: MaterialStatePropertyAll<Color>(Colors.red.withOpacity(0.33)),` ![Screenshot 2023-11-22 at 18 22 08](https://github.com/flutter/flutter/assets/48603081/28badae4-a7c7-4bf0-8bcc-278a1f84729d) `overlayColor: MaterialStatePropertyAll<Color>(Colors.transparent),` ![Screenshot 2023-11-22 at 18 22 25](https://github.com/flutter/flutter/assets/48603081/674b48b1-f66a-4d91-9f10-ad307416ac32) #### Indicator shape is respected for the indicator overlay ![Screenshot 2023-11-22 at 15 30 36](https://github.com/flutter/flutter/assets/48603081/ae9a3627-787e-45ac-9319-2ea8ea1e6ae6) *Replace this paragraph with a description of what this PR is changing or adding, and why. Consider including before/after screenshots.* *List which issues are fixed by this PR. You must list at least one issue. An issue is not required if the PR fixes something trivial like a typo.* *If you had to change anything in the [flutter/tests] repo, include a link to the migration guide as per the [breaking change policy].*

@OverRide

…dicator shape for the overlay (flutter#138901) fixes [Provide ability to override `NavigationBar` indicator ink response overlay](flutter#138850) fixes [`NavigationBar.indicatorShape` is ignored, `NavigationBarThemeData.indicatorShape` is applied to the indicator inkwell](flutter#138900) ### Code sample <details> <summary>expand to view the code sample</summary> ```dart import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({super.key}); @OverRide Widget build(BuildContext context) { return const MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( bottomNavigationBar: NavigationBarExample(), ), ); } } class NavigationBarExample extends StatefulWidget { const NavigationBarExample({super.key}); @OverRide State<NavigationBarExample> createState() => _NavigationBarExampleState(); } class _NavigationBarExampleState extends State<NavigationBarExample> { int index = 0; @OverRide Widget build(BuildContext context) { return NavigationBar( elevation: 0, overlayColor: const MaterialStatePropertyAll<Color>(Colors.transparent), // indicatorShape: RoundedRectangleBorder( // borderRadius: BorderRadius.circular(4.0), // ), indicatorColor: Colors.transparent, selectedIndex: index, onDestinationSelected: (int index) { setState(() { this.index = index; }); }, destinations: const <Widget>[ NavigationDestination( selectedIcon: Icon(Icons.home_filled), icon: Icon(Icons.home_outlined), label: 'Home', ), NavigationDestination( selectedIcon: Icon(Icons.favorite), icon: Icon(Icons.favorite_outline), label: 'Favorites', ), ], ); } } ``` </details> ### Before #### Cannot override `NavigationBar` Indicator ink well overlay ![Screenshot 2023-11-22 at 18 22 48](https://github.com/flutter/flutter/assets/48603081/06f54335-71ee-4882-afb0-53b614933c38) #### Indicator shape is ignored for the indicator overlay ![Screenshot 2023-11-22 at 15 29 52](https://github.com/flutter/flutter/assets/48603081/913e0f77-48f4-4c6e-87f3-52c81b78f3d9) ### After #### Can use `NavigationBar.overlayColor` or `NavigationBarThemeData.NavigationBar` to override default indicator overlay `overlayColor: MaterialStatePropertyAll<Color>(Colors.red.withOpacity(0.33)),` ![Screenshot 2023-11-22 at 18 22 08](https://github.com/flutter/flutter/assets/48603081/28badae4-a7c7-4bf0-8bcc-278a1f84729d) `overlayColor: MaterialStatePropertyAll<Color>(Colors.transparent),` ![Screenshot 2023-11-22 at 18 22 25](https://github.com/flutter/flutter/assets/48603081/674b48b1-f66a-4d91-9f10-ad307416ac32) #### Indicator shape is respected for the indicator overlay ![Screenshot 2023-11-22 at 15 30 36](https://github.com/flutter/flutter/assets/48603081/ae9a3627-787e-45ac-9319-2ea8ea1e6ae6)

…d fix indicator shape for the overlay (flutter/flutter#138901)

github-actions bot added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. labels Nov 22, 2023

TahaTesser mentioned this pull request Nov 22, 2023

Provide ability to override NavigationBar indicator ink response overlay #138850

Closed

2 tasks

flutter-dashboard bot added the will affect goldens Changes to golden files label Nov 22, 2023

TahaTesser requested a review from HansMuller November 22, 2023 20:15

TahaTesser added 2 commits November 27, 2023 09:39

Add ability to customize NavigationBar indicator overlay and fix in…

3f71534

…dicator shape for the overlay

Patch tests for web

8148f24

HansMuller force-pushed the navigation_bar_overlay branch from f45dae3 to 8148f24 Compare November 27, 2023 17:39

HansMuller approved these changes Nov 27, 2023

View reviewed changes

HansMuller added the autosubmit Merge PR when tree becomes green via auto submit App label Nov 27, 2023

auto-submit bot merged commit 397fd25 into flutter:master Nov 27, 2023

TahaTesser deleted the navigation_bar_overlay branch November 27, 2023 21:23

engine-flutter-autoroll mentioned this pull request Nov 27, 2023

Manual roll Flutter from b5f163a6f276 to 6bf3ccd47d5d (20 revisions) flutter/packages#5495

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 27, 2023

397fd25 Add ability to customize NavigationBar indicator overlay an…

6df13d2

…d fix indicator shape for the overlay (flutter/flutter#138901)

TahaTesser mentioned this pull request Nov 28, 2023

[CP] Add ability to customize NavigationBar indicator overlay and fix indicator shape for the overlay #139159

Closed

Piinks mentioned this pull request Nov 28, 2023

[CP] Add ability to customize NavigationBar indicator overlay and fix in… #139162

Merged

8 tasks

HansMuller mentioned this pull request Dec 1, 2023

Flutter Framework Team: Notable Commits #121415

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 16, 2024

397fd25 Add ability to customize NavigationBar indicator overlay an…

ddf1197

…d fix indicator shape for the overlay (flutter/flutter#138901)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add ability to customize `NavigationBar` indicator overlay and fix indicator shape for the overlay #138901

Add ability to customize `NavigationBar` indicator overlay and fix indicator shape for the overlay #138901

Uh oh!

TahaTesser commented Nov 22, 2023 •

edited

Loading

Uh oh!

flutter-dashboard bot commented Nov 22, 2023

Uh oh!

HansMuller left a comment

Uh oh!

Piinks commented Nov 27, 2023

Uh oh!

TahaTesser commented Nov 27, 2023

Uh oh!

TahaTesser commented Nov 28, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Add ability to customize NavigationBar indicator overlay and fix indicator shape for the overlay #138901

Add ability to customize NavigationBar indicator overlay and fix indicator shape for the overlay #138901

Uh oh!

Conversation

TahaTesser commented Nov 22, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code sample

Before

Cannot override NavigationBar Indicator ink well overlay

Indicator shape is ignored for the indicator overlay

After

Can use NavigationBar.overlayColor or NavigationBarThemeData.NavigationBar to override default indicator overlay

Indicator shape is respected for the indicator overlay

Pre-launch Checklist

Uh oh!

flutter-dashboard bot commented Nov 22, 2023

Uh oh!

HansMuller left a comment

Choose a reason for hiding this comment

Uh oh!

Piinks commented Nov 27, 2023

Uh oh!

TahaTesser commented Nov 27, 2023

Uh oh!

TahaTesser commented Nov 28, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Add ability to customize `NavigationBar` indicator overlay and fix indicator shape for the overlay #138901

Add ability to customize `NavigationBar` indicator overlay and fix indicator shape for the overlay #138901

TahaTesser commented Nov 22, 2023 •

edited

Loading

Cannot override `NavigationBar` Indicator ink well overlay

Can use `NavigationBar.overlayColor` or `NavigationBarThemeData.NavigationBar` to override default indicator overlay