-
Notifications
You must be signed in to change notification settings - Fork 26.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
BottomAppBar elevation doesn't seem to do anything #27585
Comments
Shadow seems to be at bottom side (see image below), maybe we should specify shadow direction as well (and default it to top direction in case of @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
bottomNavigationBar: Transform.translate(
offset: Offset(0.0, -100),
child: BottomAppBar(
child: Container(
color: Colors.blue,
height: 56,
),
elevation: 10,
),
),
body: Container());
} |
I came up with a workaround by applying a BoxShadow. You can play with the offset and blurRadius to replicate the elevation effect @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
bottomNavigationBar: Container(
decoration: BoxDecoration(
boxShadow: [BoxShadow(color: Colors.black54, blurRadius: 10)]),
child: BottomAppBar(
child: Container(),
),
),
body: Container());
} |
Same here im using Material Widget with elevation but doesn't seem to reflect, i used box shadow and solved it. |
When using a FloatingActionButton with a notch the BoxShadow does not respect the notch. |
Consider drawing the bottom navigation bar using this technique and applying shadow using the drawShadow method. |
I'm having the same problem...
|
Same thing here |
same |
Elevation property of BottomNavigationBar works, but.... Widget with screen content, placed above bottom bar drawn after bar itself, so shadow is painted over( If you use one root bottom bar for all screens (like me) - BoxShadow won't solve the problem. |
Code Sample
flutter doctor -v
|
Looks like elevation shadow is hidden due to tighter constraints, adding top padding worked for me. |
Issue is still reproducible on latest Master & Stable channel. code sampleimport 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
bottomNavigationBar: BottomAppBar(
elevation: 16,
child: Container(
height: 56,
color: Colors.blue,
),
),
),
);
}
} flutter doctor -v[✓] Flutter (Channel stable, 1.22.5, on Mac OS X 10.15.7 19H114 darwin-x64, locale en)
• Flutter version 1.22.5 at /Users/pedromassango/Code/flutter_stable
• Framework revision 7891006299 (6 weeks ago), 2020-12-10 11:54:40 -0800
• Engine revision ae90085a84
• Dart version 2.10.4
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
• Android SDK at /Users/pedromassango/Library/Android/sdk
• Platform android-30, build-tools 30.0.2
• Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 12.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Xcode 12.1, Build version 12A7403
• CocoaPods version 1.9.3
[!] Android Studio (version 4.1)
• Android Studio at /Applications/Android Studio.app/Contents
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
[✓] IntelliJ IDEA Community Edition (version 2020.3.1)
• IntelliJ at /Applications/IntelliJ IDEA CE.app
• Flutter plugin installed
• Dart plugin version 203.6912
[✓] VS Code (version 1.52.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.18.1
[✓] Connected device (1 available)
• sdk gphone x86 64 (mobile) • emulator-5554 • android-x64 • Android 11 (API 30) (emulator)
! Doctor found issues in 1 category. [✓] Flutter (Channel master, 1.26.0-2.0.pre.419, on Mac OS X 10.15.7 19H114 darwin-x64, locale en)
• Flutter version 1.26.0-2.0.pre.419 at /Users/pedromassango/Code/flutter_master
• Framework revision 913d5933c1 (4 hours ago), 2021-01-19 22:34:03 -0800
• Engine revision b58dbc88fc
• Dart version 2.12.0 (build 2.12.0-240.0.dev)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
• Android SDK at /Users/pedromassango/Library/Android/sdk
• Platform android-30, build-tools 30.0.2
• Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
• All Android licenses accepted.
[!] Xcode - develop for iOS and macOS
• Xcode at /Applications/Xcode.app/Contents/Developer
• Xcode 12.1, Build version 12A7403
! CocoaPods 1.9.3 out of date (1.10.0 is recommended).
CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
Without CocoaPods, plugins will not work on iOS or macOS.
For more info, see https://flutter.dev/platform-plugins
To upgrade see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 4.1)
• 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 1.8.0_242-release-1644-b3-6915495)
[✓] IntelliJ IDEA Community Edition (version 2020.3.1)
• IntelliJ at /Applications/IntelliJ IDEA CE.app
• Flutter plugin version 52.2.5
• Dart plugin version 203.6912
[✓] VS Code (version 1.52.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.18.1
[✓] Connected device (3 available)
• sdk gphone x86 64 (mobile) • emulator-5554 • android-x64 • Android 11 (API 30) (emulator)
• macOS (desktop) • macos • darwin-x64 • Mac OS X 10.15.7 19H114 darwin-x64
• Chrome (web) • chrome • web-javascript • Google Chrome 87.0.4280.141
! Doctor found issues in 1 category. |
what if the BottomAppBar come with property shape: CircularNotchedRectangle() ? |
I can reproduce the issue on stable 3.3 and master 3.7 BottomAppBar (elevation:10)@Hixie This also reproduces with BottomNavigationBar, Do we need to file a separate issue for this or can be tracked under this? BottomNavigationBar (default elevation:8)BottomNavigationBar (elevation:1)code sample (BottomAppBar)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(
title: 'Material App',
home: Home(),
);
}
}
class Home extends StatelessWidget {
const Home({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('App'),
),
bottomNavigationBar: Transform.translate(
offset: const Offset(0.0, -100),
child: BottomAppBar(
elevation: 10,
child: Container(
color: Colors.blue,
height: 56,
),
),
),
body: Container());
}
}
code sample(BottomNavigationBar)import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: _title,
home: MyStatefulWidget(),
);
}
}
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({super.key});
@override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int _selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
Text(
'Index 0: Home',
style: optionStyle,
),
Text(
'Index 1: Business',
style: optionStyle,
),
Text(
'Index 2: School',
style: optionStyle,
),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('BottomNavigationBar Sample'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: Transform.translate(
offset: const Offset(0,-100),
child: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'School',
),
],
elevation: 1,
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
),
);
}
}
flutter doctor -v (mac)
|
Having the same issue. The shadow added by elevation is very very slight even when setting the elevation value to 100. |
This comment was marked as off-topic.
This comment was marked as off-topic.
The elevation actually works. The problem is that it works exactly like on all the other widgets - adding a shadow at the bottom, which doesn't make much sense on |
No description provided.
The text was updated successfully, but these errors were encountered: