Skip to content

SnackBarBehavior.floating works improperly with FloatingActionButtonLocation.endContained and M3 theme #136162

@CaLouro

Description

@CaLouro

Is there an existing issue for this?

Steps to reproduce

  1. Use Material 3 theming;
  2. Create a view with Scaffold containing a BottomAppBar on the bottomNavigationBar attribute;
  3. Have a FAB with FloatingActionButtonLocation.endContained on the same Scaffold;
  4. Display a SnackBar with the floating behaviour;
  5. SnackBar doesn't look floating.

Expected results

SnackBar is expected to look like the screenshot

Floating SnackBar

Actual results

SnackBar does not look floating and seems to touch the BottomAppBar

Wrong Floating SnackBar

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
Floating SnackBar Wrong Floating 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

P2Important issues not at the top of the work listf: material designflutter/packages/flutter/material repository.found in release: 3.13Found to occur in 3.13found in release: 3.16Found to occur in 3.16frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onr: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions