BottomAppBar: "Notch" shape silently broken in Material 3 #123283
Description
In Material 3, if you use BottomAppBar's shape param to ask for a "notched" shape for the FAB, it won't say anything, but the result is visually broken.
Probably the right answer here is to use an assert to disallow this, because Material 3 removed the notch shape in the spec.
I plan to send a PR soon with that assert, along with fixes for #123064 and #122667.
Steps to Reproduce
-
Copy code sample below to
main.dartin a newflutter createapp.The code sample configures
BottomAppBarto have a "notch", by settingshapeand by putting a docked FAB in the Scaffold. It also setsuseMaterial3: trueand an opaque color for the app bar. -
Look at the bottom app bar, where the "notch" is supposed to be.
-
Pass a translucent
colorto theBottomAppBar, likeColors.black45 -
Look at the bottom app bar again
Actual results
In step 2, with an opaque color, no notch is visible.
In step 4, with a translucent color, there's a broken sort-of-notch: a more opaque shape forms a notch, but the notch is painted through by a less opaque shape. (Also the shape doesn't fit the FAB; that's just because there isn't an out-of-the-box NotchedShape that would fit the Material 3 default FAB shape.)
| Material 2 (for comparison) | Material 3, opaque color (notch missing) |
Material 3, translucent color (notch broken) |
|---|---|---|
 |
 |
 |
Expected results
Arguably, it could show the notch.
But the notch isn't in the Material 3 spec, so probably the best answer is that BottomAppBar should not accept a shape in Material 3.
What it definitely shouldn't do is cheerfully accept shape and have it not work.
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 MaterialApp(
theme: Theme.of(context).copyWith(useMaterial3: true),
home: Scaffold(
floatingActionButton: FloatingActionButton(onPressed: () {}),
floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
bottomNavigationBar: BottomAppBar(
color: const Color.fromRGBO(0, 100, 0, 1),
// color: const Color.fromRGBO(0, 100, 0, 0.5), // <-- Try a translucent `color`
shape: const CircularNotchedRectangle(),
child: Row(children: [IconButton(onPressed: () {}, icon: const Icon(Icons.menu))])
),
),
);
}
}Code sample
Logs
No errors observed in the logs.
$ flutter analyze
Analyzing scratch...
No issues found! (ran in 1.2s)
$ flutter doctor -v
[✓] Flutter (Channel main, 3.9.0-13.0.pre.39, on macOS 13.0 22A380 darwin-x64, locale
en-US)
• Flutter version 3.9.0-13.0.pre.39 on channel main at
/Users/chrisbobbe/.local/lib/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 3fe5740153 (2 hours ago), 2023-03-22 11:58:57 -0700
• Engine revision 5775c6b05f
• Dart version 3.0.0 (build 3.0.0-348.0.dev)
• DevTools version 2.22.2
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
• Android SDK at /Users/chrisbobbe/Library/Android/sdk
• Platform android-33, build-tools 30.0.3
• ANDROID_HOME = /Users/chrisbobbe/Library/Android/sdk
• Java binary at: /Applications/Android
Studio.app/Contents/jre/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 14C18
• CocoaPods version 1.11.3
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2021.3)
• Android Studio at /Applications/Android Studio.app/Contents
• 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.76.2)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension can be installed from:
🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[✓] Connected device (3 available)
• iPhone 14 Pro (mobile) • B10DA4B8-480B-4FE1-A651-4DFBE39ABF71 • ios •
com.apple.CoreSimulator.SimRuntime.iOS-16-2 (simulator)
• macOS (desktop) • macos • darwin-x64 •
macOS 13.0 22A380 darwin-x64
• Chrome (web) • chrome • web-javascript •
Google Chrome 111.0.5563.64
[✓] Network resources
• All expected network resources are available.
• No issues found!