Skip to content

SnackBar action hover state background too hard to see #141343

@parlough

Description

@parlough

Steps to reproduce

  1. Have a Material 3 theme enabled
  2. Build and show a SnackBar that is floating with an action (SnackBarAction) added
  3. Run the app. (I tried macOS and web-CanvasKit)
  4. Trigger the snackbar
  5. Hover over the action
  6. Notice the hover state is almost impossible to distinguish from the background color

Expected results

The action's hover state background should be distinguishable from the snackbar itself.

Actual results

The action's hover state background is almost impossible to see, particularly on the default light theme.

Code sample

Code sample
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: ScaffoldButton(),
        ),
      ),
    );
  }
}

class ScaffoldButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return TextButton(
      onPressed: () {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
            behavior: SnackBarBehavior.floating,
            width: 320,
            content: const Text('This is a snackbar!'),
            action: SnackBarAction(
              label: 'Close',
              onPressed: () {},
            ),
          ),
        );
      },
      child: Text('Launch snackbar'),
    );
  }
}

Screenshots

Screenshots

Default light theme action hover:
Default light theme Snackbar

Default dark theme action hover:
Default dark theme Snackbar

Flutter version

Version info
Flutter 3.19.0-3.0.pre.43 • channel main • https://github.com/flutter/flutter
Framework • revision f961fdf2ba (4 hours ago) • 2024-01-10 17:37:07 -0500
Engine • revision a045134c91
Tools • Dart 3.4.0 (build 3.4.0-14.0.dev) • DevTools 2.31.0

Metadata

Metadata

Assignees

Labels

P2Important issues not at the top of the work listf: material designflutter/packages/flutter/material repository.found in release: 3.16Found to occur in 3.16found in release: 3.18Found to occur in 3.18frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

Type

No type

Projects

Status

Done (PR merged)

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions