Repository navigation
SnackBarBehavior.floating works improperly with FloatingActionButtonLocation.endContained and M3 theme #136162
Description
Is there an existing issue for this?
- I have searched the existing issues
- I have read the guide to filing a bug
Steps to reproduce
- Use Material 3 theming;
- Create a view with
Scaffoldcontaining aBottomAppBaron thebottomNavigationBarattribute; - Have a FAB with
FloatingActionButtonLocation.endContainedon the sameScaffold; - Display a
SnackBarwith thefloatingbehaviour; SnackBardoesn't look floating.
Expected results
SnackBar is expected to look like the screenshot
Actual results
SnackBar does not look floating and seems to touch the BottomAppBar
Code sample
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: ThemeData(
colorSchemeSeed: Colors.green,
useMaterial3: true,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.endContained,
bottomNavigationBar: const BottomAppBar(),
body: Center(
child: ElevatedButton(
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Content'),
behavior: SnackBarBehavior.floating,
),
);
},
child: const Text('Show SnackBar'),
),
),
);
}
}
Screenshots or Video
Same screenshots from above for side-by-side comparison
Screenshots / Video demonstration
| Right looking SnackBar | Wrong looking SnackBar |
|---|---|
|
|
Logs
Logs
[Paste your logs here]Flutter Doctor output
Doctor output (stable)
[✓] Flutter (Channel stable, 3.13.6, on Microsoft Windows [Version 10.0.22621.2283], locale en-CA)
• Flutter version 3.13.6 on channel stable at C:\Users\Caio\Tools\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision ead455963c (12 days ago), 2023-09-26 18:28:17 -0700
• Engine revision a794cf2681
• Dart version 3.1.3
• DevTools version 2.25.0
[✓] Windows Version (Installed version of Windows is version 10 or higher)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
• Android SDK at C:\Users\Caio\AppData\Local\Android\sdk
• Platform android-33, build-tools 33.0.2
• Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
• Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-10027231)
• All Android licenses accepted.
[✓] Chrome - develop for the web
• Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe
[✗] Visual Studio - develop Windows apps
✗ Visual Studio not installed; this is necessary to develop Windows apps.
Download at https://visualstudio.microsoft.com/downloads/.
Please install the "Desktop development with C++" workload, including all of its default components
[✓] Android Studio (version 2022.3)
• Android Studio at C:\Program Files\Android\Android Studio
• 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 17.0.6+0-b2043.56-10027231)
[✓] VS Code (version 1.82.2)
• VS Code at C:\Users\Caio\AppData\Local\Programs\Microsoft VS Code
• Flutter extension version 3.64.0
[✓] Connected device (4 available)
• sdk gphone x86 64 (mobile) • emulator-5554 • android-x64 • Android 13 (API 33) (emulator)
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.22621.2283]
• Chrome (web) • chrome • web-javascript • Google Chrome 117.0.5938.134
• Edge (web) • edge • web-javascript • Microsoft Edge 117.0.2045.60
[✓] Network resources
• All expected network resources are available.
! Doctor found issues in 1 category.Metadata
Metadata
Assignees
Labels
Important issues not at the top of the work listFound to occur in 3.13Found to occur in 3.16flutter/packages/flutter repository. See also f: labels.The issue has been confirmed reproducible and is ready to work onmaterial_ui package in flutter/packagesIssue is closed as already fixed in a newer versionOwned by Design Languages teamTriaged by Design Languages team
Activity
danagbemava-nc commentedon Oct 9, 2023
Reproducible using the code sample provided above.
flutter doctor -v
[-]SnackBarBehavior.floating works inproperly with FloatingActionButtonLocation.endContained and M3 theme[/-][+]SnackBarBehavior.floating works improperly with FloatingActionButtonLocation.endContained and M3 theme[/+]Floating `SnackBar` should always float above the bottom widgets (#13…
github-actions commentedon Oct 26, 2023
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.