Taha Tesser
397fd25be1
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
#### 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
2023-11-27 21:02:35 +00:00
..
2023-09-11 09:42:27 -07:00
2023-10-12 14:17:56 +00:00
2023-10-24 22:35:05 +00:00
2023-08-31 10:19:13 -07:00
2023-08-31 10:19:13 -07:00
2023-08-22 15:50:48 +00:00
2023-11-20 15:24:41 -08:00
2023-08-31 10:19:13 -07:00
2023-08-22 15:50:48 +00:00
2023-11-20 22:18:38 +00:00
2023-11-03 22:25:37 +00:00
2023-11-03 22:25:37 +00:00
2023-08-31 10:19:13 -07:00
2023-09-11 09:42:27 -07:00
2023-09-18 13:45:38 -07:00
2023-11-01 23:29:49 +00:00
2023-09-01 08:53:53 -07:00
2023-10-10 18:11:23 -07:00
2023-10-10 18:11:23 -07:00
2023-10-10 18:11:23 -07:00
2023-11-21 17:00:06 +00:00
2023-10-12 14:17:56 +00:00
2023-10-12 14:17:56 +00:00
2023-10-09 10:05:28 +00:00
2023-10-31 23:27:03 +00:00
2023-10-27 12:04:07 +03:00
2023-09-15 08:55:50 -07:00
2023-10-10 08:32:01 -07:00
2023-10-06 11:26:06 +00:00
2023-11-03 22:25:37 +00:00
2023-11-14 17:55:05 +00:00
2023-09-05 13:45:12 -07:00
2023-09-01 08:53:53 -07:00
2023-09-01 08:53:53 -07:00
2023-09-05 13:45:12 -07:00
2023-09-29 18:15:53 +00:00
2023-09-05 13:45:12 -07:00
2023-10-10 10:05:51 -07:00
2023-10-19 18:32:50 +00:00
2023-10-18 20:13:08 +00:00
2023-10-10 10:05:51 -07:00
2023-10-10 10:05:51 -07:00
2023-09-05 13:45:12 -07:00
2023-11-20 23:50:49 +00:00
2023-10-10 18:11:23 -07:00
2023-10-23 16:19:25 +00:00
2023-09-05 13:45:12 -07:00
2023-09-05 13:45:12 -07:00
2023-10-11 07:19:30 +00:00
2023-09-11 09:42:27 -07:00
2023-09-11 09:42:27 -07:00
2023-10-09 09:10:23 -07:00
2023-09-05 13:45:12 -07:00
2023-09-05 13:45:12 -07:00
2023-11-17 18:50:33 +00:00
2023-10-10 18:11:23 -07:00
2023-10-12 14:17:56 +00:00
2023-10-23 14:37:43 -07:00
2023-11-15 23:06:57 +00:00
2023-09-11 09:42:27 -07:00
2023-08-17 23:36:11 +00:00
2023-09-05 13:45:12 -07:00
2023-10-10 18:11:23 -07:00
2023-09-21 10:06:21 -07:00
2023-11-03 12:34:16 -07:00
2023-10-23 15:45:46 +00:00
2023-09-05 13:45:12 -07:00
2023-09-05 13:45:12 -07:00
2023-09-05 13:45:12 -07:00
2023-09-05 13:45:12 -07:00
2023-11-27 21:02:35 +00:00
2023-11-27 21:02:35 +00:00
2023-09-22 08:03:02 +00:00
2023-09-05 13:45:12 -07:00
2023-10-16 08:48:13 +00:00
2023-09-05 13:45:12 -07:00
2023-11-22 20:16:37 +00:00
2023-09-22 15:27:05 -07:00
2023-09-11 09:42:27 -07:00
2023-09-05 13:45:12 -07:00
2023-10-18 15:44:31 +00:00
2023-11-03 22:25:37 +00:00
2023-11-20 15:24:41 -08:00
2023-10-26 23:55:38 +00:00
2023-09-05 13:45:12 -07:00
2023-10-10 18:11:23 -07:00
2023-09-28 16:06:53 +00:00
2023-10-26 16:23:33 -07:00
2023-11-10 13:14:14 -08:00
2023-11-03 22:25:37 +00:00
2023-09-05 13:45:12 -07:00
2023-09-07 17:50:45 -07:00
2023-08-31 08:52:06 -07:00
2023-11-09 22:12:01 +00:00
2023-09-11 09:42:27 -07:00
2023-10-23 14:37:43 -07:00
2023-10-23 14:37:43 -07:00
2023-10-16 21:03:59 +00:00
2023-09-11 09:42:27 -07:00
2023-09-28 01:42:16 +00:00
2023-11-10 13:14:14 -08:00
2023-10-18 16:03:08 +00:00
2023-10-12 01:17:07 +00:00
2023-09-05 13:45:12 -07:00
2023-09-05 13:41:10 -07:00
2023-11-07 10:26:23 -08:00
2023-11-07 10:26:23 -08:00
2023-11-07 10:26:23 -08:00
2023-10-26 23:55:38 +00:00
2023-09-22 15:27:05 -07:00
2023-09-07 17:50:45 -07:00
2023-10-26 23:55:38 +00:00
2023-09-11 09:42:27 -07:00
2023-09-05 13:45:12 -07:00
2023-09-05 13:45:12 -07:00
2023-09-11 09:42:27 -07:00
2023-09-05 13:45:12 -07:00
2023-10-10 10:05:51 -07:00
2023-09-11 09:42:27 -07:00
2023-10-26 00:26:20 +00:00
2023-09-05 13:45:12 -07:00
2023-09-05 13:45:12 -07:00
2023-09-11 09:42:27 -07:00
2023-08-28 22:27:39 +00:00
2023-11-07 10:26:23 -08:00
2023-09-05 13:45:12 -07:00
2023-09-11 09:42:27 -07:00
2023-10-10 11:05:26 -07:00
2023-10-23 14:37:43 -07:00
2023-09-11 09:42:27 -07:00
2023-11-10 13:14:14 -08:00
2023-10-06 22:12:20 +00:00
2023-10-10 18:11:23 -07:00
2023-09-05 13:45:12 -07:00