-
Notifications
You must be signed in to change notification settings - Fork 29.7k
Closed
Closed
Copy link
Labels
Design Systems StudyIssues identified during the custom design system study.Issues identified during the custom design system study.P2Important issues not at the top of the work listImportant issues not at the top of the work listc: new featureNothing broken; request for a new capabilityNothing broken; request for a new capabilityc: proposalA detailed proposal for a change to FlutterA detailed proposal for a change to Flutterf: material designflutter/packages/flutter/material repository.flutter/packages/flutter/material repository.frameworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.r: fixedIssue is closed as already fixed in a newer versionIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamOwned by Design Languages teamtriaged-designTriaged by Design Languages teamTriaged by Design Languages team
Description
Is there an existing issue for this?
- I have searched the existing issues
- I have read the guide to filing a bug
Use case
Currently, there is no overlayColor property in the NavigationBar which should allow overriding ink response overlay.
This is typically found in other material widgets
For cases when you want override ink focus, hover and highlight effects, a Material State overlay can be used.
Take this example where we can set indicator color to be transparent but cannot override ink response overlay.
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,
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'),
],
);
}
}
Screen.Recording.2023-11-22.at.01.08.30.mov
Proposal
Provide an overlay color property for the indicator ink response
overlayColor: MaterialStatePropertyAll(Colors.transparent), should be able to override the default ink response overlay.
Screen.Recording.2023-11-22.at.01.10.51.mov
Metadata
Metadata
Assignees
Labels
Design Systems StudyIssues identified during the custom design system study.Issues identified during the custom design system study.P2Important issues not at the top of the work listImportant issues not at the top of the work listc: new featureNothing broken; request for a new capabilityNothing broken; request for a new capabilityc: proposalA detailed proposal for a change to FlutterA detailed proposal for a change to Flutterf: material designflutter/packages/flutter/material repository.flutter/packages/flutter/material repository.frameworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.r: fixedIssue is closed as already fixed in a newer versionIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamOwned by Design Languages teamtriaged-designTriaged by Design Languages teamTriaged by Design Languages team
Type
Projects
Status
Done (PR merged)
Status
Done