-
Taha Tesser authored
Add ability to customize `NavigationBar` indicator overlay and fix indicator shape for the overlay (#138901) fixes [Provide ability to override `NavigationBar` indicator ink response overlay](https://github.com/flutter/flutter/issues/138850) fixes [`NavigationBar.indicatorShape` is ignored, `NavigationBarThemeData.indicatorShape` is applied to the indicator inkwell](https://github.com/flutter/flutter/issues/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)