Add `clipBehavior` to `Snackbar` #98252

TahaTesser · 2022-02-11T12:46:32Z

regression: #94811
context: #94811 (review)
fixes: #98205

We didn't know why ClipRect was present as it wasn't failing any test but looks like it does affect BackdropFilter when applied to Snackbar's content

For regular widgets, BackdropFilter could use some clipping thus ClipRect is usually applied, see this #16614 (comment)
For Snackbar, it is not possible since you can only provide Snackbar to showSnackbar function and this issue shows when trying to apply BackdropFilter Snackbar's Content to achieve the desired results, blur area is not clipped.

So this PR introduces clip behavior, which when not set to Clip.none, applies ClipRect to the Snackbar itself. This is same as CupertinoFormSection clipBehavior code.

This way clipping is achievable when needed without breaking previous issue or new issue.

minimal code sample

import 'dart:ui';

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key, this.dark = false}) : super(key: key);

  final bool dark;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Material App',
      theme: dark ? ThemeData.dark() : ThemeData.light(),
      home: const SnackarSample(),
    );
  }
}

class SnackarSample extends StatelessWidget {
  const SnackarSample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Snackar Sample'),
      ),
      body: Center(
        child: OutlinedButton(
          onPressed: () {
            ScaffoldMessenger.of(context).showSnackBar(SnackBar(
              clipBehavior: Clip.hardEdge,
              backgroundColor: Colors.transparent,
              content: BackdropFilter(
                filter: ImageFilter.blur(
                  sigmaX: 20.0,
                  sigmaY: 20.0,
                ),
                child: const Text('I am a snack bar.'),
              ),
              duration: const Duration(seconds: 2),
              action: SnackBarAction(label: 'ACTION', onPressed: () {}),
              behavior: SnackBarBehavior.fixed,
            ));
          },
          child: const Text('Show Snackbar'),
        ),
      ),
      floatingActionButton: FloatingActionButton(onPressed: () {}),
    );
  }
}

Preview

Golden test

Pre-launch Checklist

I read the Contributor Guide and followed the process outlined there for submitting PRs.
I read the Tree Hygiene wiki page, which explains my responsibilities.
I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
I signed the CLA.
I listed at least one issue that this PR fixes in the description above.
I updated/added relevant documentation (doc comments with ///).
I added new tests to check the change I am making, or this PR is test-exempt.
All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

packages/flutter/lib/src/material/snack_bar.dart

flutter-dashboard · 2022-02-15T10:19:57Z

Golden file changes have been found for this pull request. Click here to view and triage (e.g. because this is an intentional change).

If you are still iterating on this change and are not ready to resolve the images on the Flutter Gold dashboard, consider marking this PR as a draft pull request above. You will still be able to view image results on the dashboard, commenting will be silenced, and the check will not try to resolve itself until marked ready for review.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

Changes reported for pull request #98252 at sha cd629487561f4da4de6775d277f8a585ac3b806e

flar · 2022-02-15T21:49:36Z

So are we adding a clip to all snackbars in case a particular child needs it? Could the responsibility be pushed to the child that actually adds the BackdropFilter? Isn't that a widget that we control?

TahaTesser · 2022-02-16T04:21:11Z

Hey @flar
ClipRect was present before but for another issue, we had to remove it #94811
Looks like it is needed so this PR adds it back but with clipBehavior.

showSnackbar only takes Snackbar, not Widget such as Snackbar wrapped with ClipRect.
and if you apply clipping to content of Snackbar you get something like this

While the desired effect is

Piinks · 2022-02-17T23:57:03Z

packages/flutter/lib/src/material/snack_bar.dart

Since this was a regression, should we restore the original behavior that clipped, and let those that do not want it to set Clip.none?
I can see folks not wanting a subtle shadow clip, but I can also understand folks that were broken by removing the clip, and in the case of the backdrop filter experiencing a very disruptive change.

I like this idea, I think restoring original clipping would help most folks. Removing it when needed is easy with PR now :)

flutter-dashboard · 2022-02-18T13:45:05Z

Golden file changes are available for triage from new commit, Click here to view.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

Changes reported for pull request #98252 at sha 95cbb654559d580de9b7eb9433f6363948832b24

Piinks

Approved golden files, LGTM

fluttergithubbot · 2022-02-25T02:51:25Z

This pull request is not suitable for automatic merging in its current state.

The status or check suite Google testing has failed. Please fix the issues identified (or deflake) before re-applying this label.

flutter-dashboard bot added f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels. labels Feb 11, 2022

TahaTesser force-pushed the fix-snackbar-cliprect branch from bd36fd5 to 2a2a5eb Compare February 11, 2022 12:47

TahaTesser changed the title ~~Add clipBehaviour for Snackbar~~ Add clipBehavior for Snackbar Feb 11, 2022

TahaTesser requested a review from Piinks February 11, 2022 12:51

This comment was marked as resolved.

Sign in to view

HansMuller requested a review from flar February 11, 2022 17:57

TahaTesser mentioned this pull request Feb 11, 2022

[stable 2.10+] Snackbar with a BackdropFilter blurs entire screen. #98205

Closed

TahaTesser changed the title ~~Add clipBehavior for Snackbar~~ Add clipBehavior to Snackbar Feb 11, 2022

Hixie reviewed Feb 12, 2022

View reviewed changes

packages/flutter/lib/src/material/snack_bar.dart Outdated Show resolved Hide resolved

TahaTesser force-pushed the fix-snackbar-cliprect branch from 9c3aa7c to 14c4507 Compare February 15, 2022 08:05

This comment was marked as resolved.

Sign in to view

nt4f04uNd mentioned this pull request Feb 15, 2022

Make Clip widgets do nothing when they rececive Clip.none #98483

Closed

This comment was marked as resolved.

Sign in to view

TahaTesser force-pushed the fix-snackbar-cliprect branch from 11bbc3c to cd62948 Compare February 15, 2022 09:55

TahaTesser mentioned this pull request Feb 15, 2022

Remove clipBehavior == Clip.none conditions from widgets #98487

Closed

flutter-dashboard bot added the will affect goldens Changes to golden files label Feb 15, 2022

Piinks reviewed Feb 17, 2022

View reviewed changes

TahaTesser force-pushed the fix-snackbar-cliprect branch from 29e8f67 to 95cbb65 Compare February 18, 2022 13:15

TahaTesser requested a review from Piinks February 18, 2022 15:35

Piinks approved these changes Feb 25, 2022

View reviewed changes

Piinks added the waiting for tree to go green label Feb 25, 2022

engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Feb 27, 2022

d8e93ff Add clipBehavior to Snackbar (flutter/flutter#98252)

3639118

engine-flutter-autoroll mentioned this pull request Feb 28, 2022

Roll Flutter from 47b5ed3948e8 to 70919533d834 (37 revisions) flutter/plugins#4952

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Feb 28, 2022

d8e93ff Add clipBehavior to Snackbar (flutter/flutter#98252)

1779075

engine-flutter-autoroll mentioned this pull request Feb 28, 2022

Roll Flutter from 47b5ed3948e8 to 70919533d834 (37 revisions) flutter/plugins#4953

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Feb 28, 2022

d8e93ff Add clipBehavior to Snackbar (flutter/flutter#98252)

f913b17

engine-flutter-autoroll mentioned this pull request Feb 28, 2022

Roll Flutter from 47b5ed3948e8 to fc2a0847fbae (38 revisions) flutter/plugins#4954

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Feb 28, 2022

d8e93ff Add clipBehavior to Snackbar (flutter/flutter#98252)

6cf935c

engine-flutter-autoroll mentioned this pull request Feb 28, 2022

Roll Flutter from 47b5ed3948e8 to 47ec605e9132 (39 revisions) flutter/plugins#4955

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Feb 28, 2022

d8e93ff Add clipBehavior to Snackbar (flutter/flutter#98252)

7e1568b

engine-flutter-autoroll mentioned this pull request Feb 28, 2022

Roll Flutter from 47b5ed3948e8 to f27b9f82c1b1 (40 revisions) flutter/plugins#4956

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Feb 28, 2022

d8e93ff Add clipBehavior to Snackbar (flutter/flutter#98252)

f45e155

engine-flutter-autoroll mentioned this pull request Feb 28, 2022

Roll Flutter from 47b5ed3948e8 to f27b9f82c1b1 (40 revisions) flutter/plugins#4957

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Feb 28, 2022

d8e93ff Add clipBehavior to Snackbar (flutter/flutter#98252)

c9cb6e1

engine-flutter-autoroll mentioned this pull request Feb 28, 2022

Roll Flutter from 47b5ed3948e8 to 8fe895dc95f9 (41 revisions) flutter/plugins#4959

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Feb 28, 2022

d8e93ff Add clipBehavior to Snackbar (flutter/flutter#98252)

5f5ccf3

engine-flutter-autoroll mentioned this pull request Feb 28, 2022

Roll Flutter from 47b5ed3948e8 to ff3333d53624 (42 revisions) flutter/plugins#4960

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Feb 28, 2022

d8e93ff Add clipBehavior to Snackbar (flutter/flutter#98252)

40c63b2

engine-flutter-autoroll mentioned this pull request Feb 28, 2022

Roll Flutter from 47b5ed3948e8 to 504e66920005 (45 revisions) flutter/plugins#4961

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Feb 28, 2022

d8e93ff Add clipBehavior to Snackbar (flutter/flutter#98252)

d5ce307

engine-flutter-autoroll mentioned this pull request Feb 28, 2022

Roll Flutter from 47b5ed3948e8 to c80ff45afe11 (47 revisions) flutter/plugins#4962

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Feb 28, 2022

d8e93ff Add clipBehavior to Snackbar (flutter/flutter#98252)

d20383d

engine-flutter-autoroll mentioned this pull request Feb 28, 2022

Roll Flutter from 47b5ed3948e8 to b44cbe1dd5e4 (51 revisions) flutter/plugins#4963

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Feb 28, 2022

d8e93ff Add clipBehavior to Snackbar (flutter/flutter#98252)

47d3407

engine-flutter-autoroll mentioned this pull request Feb 28, 2022

Roll Flutter from 83a88058d695 to b44cbe1dd5e4 (33 revisions) flutter/packages#978

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 28, 2022

d8e93ff Add clipBehavior to Snackbar (flutter/flutter#98252)

c8b48f0

engine-flutter-autoroll mentioned this pull request Feb 28, 2022

Roll Flutter from 47b5ed3948e8 to 7959c3953dbe (52 revisions) flutter/plugins#4964

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Feb 28, 2022

d8e93ff Add clipBehavior to Snackbar (flutter/flutter#98252)

115b65a

clocksmith pushed a commit to clocksmith/flutter that referenced this pull request Mar 8, 2022

Add clipBehavior to Snackbar (flutter#98252)

0206f77

dkwingsmt mentioned this pull request Apr 23, 2025

fixed clipping of snack bar when swipe direction is horizontal #166974

Closed

9 tasks

dkwingsmt mentioned this pull request May 7, 2025

SnackBar cuts when dismiss direction is horizontal #165150

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add `clipBehavior` to `Snackbar` #98252

Add `clipBehavior` to `Snackbar` #98252

Uh oh!

TahaTesser commented Feb 11, 2022 •

edited

Loading

Uh oh!

This comment was marked as resolved.

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

flutter-dashboard bot commented Feb 15, 2022

Uh oh!

flar commented Feb 15, 2022

Uh oh!

TahaTesser commented Feb 16, 2022

Uh oh!

Piinks Feb 17, 2022

Uh oh!

TahaTesser Feb 18, 2022

Uh oh!

flutter-dashboard bot commented Feb 18, 2022

Uh oh!

Piinks left a comment

Uh oh!

fluttergithubbot commented Feb 25, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

Add clipBehavior to Snackbar #98252

Add clipBehavior to Snackbar #98252

Uh oh!

Conversation

TahaTesser commented Feb 11, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pre-launch Checklist

Uh oh!

This comment was marked as resolved.

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

flutter-dashboard bot commented Feb 15, 2022

Uh oh!

flar commented Feb 15, 2022

Uh oh!

TahaTesser commented Feb 16, 2022

Uh oh!

Piinks Feb 17, 2022

Choose a reason for hiding this comment

Uh oh!

TahaTesser Feb 18, 2022

Choose a reason for hiding this comment

Uh oh!

flutter-dashboard bot commented Feb 18, 2022

Uh oh!

Piinks left a comment

Choose a reason for hiding this comment

Uh oh!

fluttergithubbot commented Feb 25, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

Add `clipBehavior` to `Snackbar` #98252

Add `clipBehavior` to `Snackbar` #98252

TahaTesser commented Feb 11, 2022 •

edited

Loading