BottomAppBar: Material 3 makes the color too opaque #122667
Description
Steps to Reproduce
- Copy code sample below to
main.dartin a newflutter createapp - Look at the color of the
AppBarat the top and theBottomAppBarat the bottom
Expected results: They should be the same color, since the code sets the AppBar's backgroundColor and the BottomAppBar's color to the same value, Colors.black45.
Actual results: The BottomAppBar appears more opaque than the AppBar.
main.dart
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
Color color = Colors.black45;
return MaterialApp(
theme: Theme.of(context).copyWith(useMaterial3: true),
home: Scaffold(
appBar: AppBar(
backgroundColor: color,
),
bottomNavigationBar: BottomAppBar(
color: color
),
),
);
}
}Logs
(No errors expected or observed in the logs.)
$ flutter analyze
Analyzing scratch...
No issues found! (ran in 1.8s)
$ flutter doctor -v
[✓] Flutter (Channel main, 3.9.0-7.0.pre.32, on macOS 13.0 22A380 darwin-x64, locale en-US)
• Flutter version 3.9.0-7.0.pre.32 on channel main at /Users/chrisbobbe/.local/lib/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision e2e313ecf6 (2 hours ago), 2023-03-14 19:13:21 -0700
• Engine revision e80266b78e
• Dart version 3.0.0 (build 3.0.0-322.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.1)
• 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 (4 available)
• Chris’s iPhone (mobile) • 00008110-000924383632801E • ios • iOS 16.1 20B82
• 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
! Error: Chris’s Apple Watch needs to connect to determine its availability. Check the connection between the
device and its companion iPhone, and the connection between the iPhone and Xcode. Both devices may also need to
be restarted and unlocked. (code 1)
[✓] Network resources
• All expected network resources are available.
• No issues found!
It looks like the color is being applied at two layers, making the element more opaque than it would if the color were applied at just one layer.
See these lines in bottom_app_bar.dart; I've annotated two lines in my quote below:
final Material material = Material(
key: materialKey,
type: isMaterial3 ? MaterialType.canvas : MaterialType.transparency,
elevation: elevation,
color: isMaterial3 ? effectiveColor : null, // <---------- here, and…
surfaceTintColor: surfaceTintColor,
shadowColor: shadowColor,
child: SafeArea(child: child),
);
final PhysicalShape physicalShape = PhysicalShape(
clipper: clipper,
elevation: elevation,
shadowColor: shadowColor,
color: effectiveColor, // <---------- …here
clipBehavior: widget.clipBehavior,
child: material,
);