M3 Navigation widgets use wrong ripple #114618
Description
Navigation widgets (NavigationBar and NavigationRail) seem to use a not-spec ripple effect that also is wrongly clipped.
Steps to Reproduce
- Create a NavigationBar or NavigationRail
- .Hover an item
Expected results:
I expected to see an M3 spec ripple on the pill.
This is the spec:
Actual results:
As you can see on the third item the ripple is not only behind the "pill" but is behind the entire item, as I said is clipped wrong and it doesn't even go behind the system navigation with the rest of the NavigationBar.
To be mentioned
The exact same problem is present with NavigationRail.
The dot represents a device camera
Some apps adapted this design for the ripple, that extends behind the system navigation:
And it would be an amazing thing if this could be implemented in some way.
Code sample
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
bottomNavigationBar: NavigationBar(
labelBehavior: NavigationDestinationLabelBehavior.onlyShowSelected,
selectedIndex: 0,
destinations: const [
NavigationDestination(
icon: Icon(Icons.home),
label: 'Page 1',
),
NavigationDestination(
icon: Icon(Icons.abc),
label: 'Page 2',
),
],
onDestinationSelected: (_) {},
),
),
);
}
}Logs
[✓] Flutter (Channel beta, 3.4.0-34.1.pre, on Ubuntu 22.10 5.19.0-23-generic, locale en_GB.UTF-8)
• Flutter version 3.4.0-34.1.pre on channel beta at /home/rares/.apps/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 71520442d4 (4 weeks ago), 2022-10-05 16:38:28 -0500
• Engine revision db0cbb2145
• Dart version 2.19.0 (build 2.19.0-255.2.beta)
• DevTools version 2.18.0
Checking Android licenses is taking an unexpectedly long time...[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
• Android SDK at /home/rares/.apps/android-sdk/
• Platform android-33, build-tools 33.0.0
• Java binary at: /home/rares/.apps/jetbrains-toolbox/apps/AndroidStudio/ch-0/213.7172.25.2113.9123335/jre/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
• All Android licenses accepted.
[✓] Chrome - develop for the web
• Chrome at google-chrome
[✓] Linux toolchain - develop for Linux desktop
• Ubuntu clang version 15.0.2-1
• cmake version 3.24.2
• ninja version 1.11.0
• pkg-config version 0.29.2
[✓] Android Studio (version 2021.3)
• Android Studio at /home/rares/.apps/jetbrains-toolbox/apps/AndroidStudio/ch-0/213.7172.25.2113.9123335
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
[✓] VS Code (version 1.72.2)
• VS Code at /usr/share/code
• Flutter extension version 3.52.0
[✓] Connected device (2 available)
• Linux (desktop) • linux • linux-x64 • Ubuntu 22.10 5.19.0-23-generic
• Chrome (web) • chrome • web-javascript • Google Chrome 107.0.5304.87
[✓] HTTP Host Availability
• All required HTTP hosts are available
• No issues found!
Metadata
Metadata
Assignees
Labels
Critical issues such as a build break or regressionflutter/packages/flutter/material repository.Found to occur in 3.3Found to occur in 3.4flutter/packages/flutter repository. See also f: labels.The issue has been confirmed reproducible and is ready to work onIssue is closed as already fixed in a newer version
Type
Projects
Status