SnackBar action button is moved to next row despite having enough space

It looks like code of SnackBar was redesigned du to support Material 3 design. But now I have a problem when the action button is moved to another line whereas virtually there is a free space for it.

I investigated the code and found that there is a condition for action + close combined width should be less than 25% of total SnackBar width. I think it is bad idea to hard some values which can depends on some thing.

It would be good to make this parameter as class property. Also it would be good to set style for SnackBarAction.

@bambinoua

Hello @bambinoua. Thank you for filing this issue. Can you please provide the following information?

A complete and minimal, reproducible code sample. Ideally, a single main.dart file that can be run directly.
The output of flutter doctor -v

Please provide the information in the form of text. See how to make collapsible sections with Markdown here.

@exaby73

Hello, @exaby73.
It is tested on Android emulator (Pixel 4a, SDK 31)

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(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('SnackBar'),
      ),
      body: Center(
        child: TextButton(
          child: const Text('Show SnackBar'),
          onPressed: () {
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                behavior: SnackBarBehavior.floating,
                content: const Text('Some not long text'),
                action: SnackBarAction(
                  label: 'Some long label'.toUpperCase(),
                  onPressed: () {},
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

Triage report

I can reproduce this issue with Master (3.8.0-3.0.pre.21). Even though the text is small and should be able to fit on one line with the action, the action is being sent to the next line. This occurs for both floating and fixed SnackBars

Related: #61949

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(
      title: 'Flutter Demo',
      theme: ThemeData(useMaterial3: true),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('SnackBar'),
      ),
      body: Center(
        child: TextButton(
          child: const Text('Show SnackBar'),
          onPressed: () {
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                behavior: SnackBarBehavior.floating,
                content: const Text('Some not long text'),
                action: SnackBarAction(
                  label: 'Some long label'.toUpperCase(),
                  onPressed: () {},
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

Screenshot

flutter doctor -v (Master)

[!] Flutter (Channel master, 3.8.0-3.0.pre.21, on macOS 13.1 22C65 darwin-arm64, locale en-US)
    • Flutter version 3.8.0-3.0.pre.21 on channel master at /Users/nabeelparkar/fvm/versions/master
    ! Warning: `dart` on your path resolves to /opt/homebrew/Cellar/dart/2.19.1/libexec/bin/dart, which is not inside your current Flutter SDK checkout at /Users/nabeelparkar/fvm/versions/master. Consider adding /Users/nabeelparkar/fvm/versions/master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f3effce630 (2 hours ago), 2023-02-03 00:07:10 -0500
    • Engine revision e3fe6dade9
    • Dart version 3.0.0 (build 3.0.0-198.0.dev)
    • DevTools version 2.21.1
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /Users/nabeelparkar/Library/Android/sdk/
    • Platform android-33, build-tools 33.0.0
    • ANDROID_SDK_ROOT = /Users/nabeelparkar/Library/Android/sdk/
    • Java binary at: /Users/nabeelparkar/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/213.7172.25.2113.9123335/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_EXECUTABLE = /Applications/Brave Browser.app/Contents/MacOS/Brave Browser

[✓] Android Studio (version 2021.3)
    • Android Studio at /Users/nabeelparkar/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/213.7172.25.2113.9123335/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)

[!] Android Studio (version 2022.1)
    • Android Studio at /Users/nabeelparkar/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/221.6008.13.2211.9477386/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
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] VS Code (version 1.74.3)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.58.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 13.1 22C65 darwin-arm64
    • Chrome (web)    • chrome • web-javascript • Brave Browser 109.1.47.186

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 2 categories.

Marking closed due to PR fix.

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 -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

`SnackBar` action button is moved to next row despite having enough space #119809

Triage report

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

SnackBar action button is moved to next row despite having enough space #119809

Description

Activity

exaby73 commented on Feb 2, 2023

bambinoua commented on Feb 3, 2023

exaby73 commented on Feb 3, 2023

Triage report

esouthren commented on Feb 24, 2023

github-actions commented on Mar 10, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

`SnackBar` action button is moved to next row despite having enough space #119809