Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
ccadieux opened this issue Feb 10, 2022 · 4 comments · Fixed by #98252
Closed

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

ccadieux opened this issue Feb 10, 2022 · 4 comments · Fixed by #98252
Assignees
@TahaTesser
Labels
c: regression It was better in the past than it is now customer: crowd Affects or could affect many people, though not necessarily a specific customer. f: material design flutter/packages/flutter/material repository. found in release: 2.10 Found to occur in 2.10 found in release: 2.11 Found to occur in 2.11 framework flutter/packages/flutter repository. See also f: labels. has reproducible steps The issue has been confirmed reproducible and is ready to work on r: fixed Issue is closed as already fixed in a newer version
Projects
Nevercode

Comments

@ccadieux
Copy link

Steps to Reproduce

  1. Execute flutter run on the code sample.
  2. Tap Show SnackBar

Expected results:
In Flutter 2.8.1 this only blurred the Snackbar.

Actual results:
In Flutter 2.10.0 the entire screen is blurred.

The issue seems to have been introduced with this change that removed ClipRect from Snackbar.
https://github.com/flutter/flutter/pull/94811/files

Without this ClipRect I haven't found a way to get this same behaviour in our app.

Code sample 
import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
  runApp(const SnackBarDemo());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SnackBar Demo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('SnackBar Demo'),
        ),
        body: const SnackBarPage(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () {
          final snackBar = SnackBar(
            content: const BlurSnackbar(),
            action: SnackBarAction(
              label: 'Undo',
              onPressed: () {
              },
            ),
          );

          ScaffoldMessenger.of(context).showSnackBar(snackBar);
        },
        child: const Text('Show SnackBar'),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 16,
      color: Colors.transparent,
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 20.0, sigmaY: 20.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const <Widget>[
            Icon(
              Icons.cloud_off,
            ),
            SizedBox(width: 8.0),
            Text('Snackbar')
          ],
        ),
      ),
    );
  }
}
Logs

I didn't run these but can provide if needed. They didn't seem needed for this issue.
flutter run --verbose
flutter analyze
flutter doctor -v

Flutter 2.10
Screen Shot 2022-02-10 at 10 05 20 AM

Flutter 2.8.1
Screen Shot 2022-02-10 at 10 03 36 AM
@danagbemava-nc danagbemava-nc added the in triage Presently being triaged by the triage team label Feb 11, 2022
@danagbemava-nc
Copy link
Member

Issue is reproducible on stable 2.10.1 and master, but not on stable 2.8.1.

videos
stable 2.10.1 & master stable 2.8.1
Screen.Recording.2022-02-11.at.09.52.12.mov
Screen.Recording.2022-02-11.at.09.48.30.mov
flutter doctor -v 
[✓] Flutter (Channel stable, 2.10.1, on macOS 12.2 21D49 darwin-arm, locale en-GB)
    • Flutter version 2.10.1 at /Users/nexus/dev/sdks/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision db747aa133 (2 days ago), 2022-02-09 13:57:35 -0600
    • Engine revision ab46186b24
    • Dart version 2.16.1
    • DevTools version 2.9.2

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-31, build-tools 31.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2020.3)
    • Android Studio at /Applications/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.10+0-b96-7249189)

[☠] IntelliJ IDEA Community Edition (the doctor check crashed)
    ✗ Due to an error, the doctor check did not complete. If the error message below is not helpful, please let us know about this issue at https://github.com/flutter/flutter/issues.
    ✗ FormatException: Unexpected extension byte (at offset 5)
    • #0      _Utf8Decoder.convertSingle (dart:convert-patch/convert_patch.dart:1789:7)
      #1      Utf8Decoder.convert (dart:convert/utf.dart:351:42)
      #2      InputStream.readString (package:archive/src/util/input_stream.dart:207:30)
      #3      new ZipDirectory.read (package:archive/src/zip/zip_directory.dart:40:30)
      #4      ZipDecoder.decodeBuffer (package:archive/src/zip_decoder.dart:19:30)
      #5      ZipDecoder.decodeBytes (package:archive/src/zip_decoder.dart:14:12)
      #6      IntelliJPlugins._findPluginXml (package:flutter_tools/src/intellij/intellij.dart:130:44)
      #7      IntelliJPlugins._readPackageVersion (package:flutter_tools/src/intellij/intellij.dart:141:40)
      #8      IntelliJPlugins.validatePackage (package:flutter_tools/src/intellij/intellij.dart:63:35)
      #9      IntelliJValidator.validate (package:flutter_tools/src/intellij/intellij_validator.dart:103:15)
      #10     asyncGuard.<anonymous closure> (package:flutter_tools/src/base/async_guard.dart:111:32)
      #11     asyncGuard.<anonymous closure> (package:flutter_tools/src/base/async_guard.dart:109:18)
      #12     _rootRun (dart:async/zone.dart:1426:13)
      #13     _CustomZone.run (dart:async/zone.dart:1328:19)
      #14     _runZoned (dart:async/zone.dart:1861:10)
      #15     runZonedGuarded (dart:async/zone.dart:1849:12)
      #16     runZoned (dart:async/zone.dart:1780:12)
      #17     asyncGuard (package:flutter_tools/src/base/async_guard.dart:109:3)
      #18     Doctor.startValidatorTasks (package:flutter_tools/src/doctor.dart:205:9)
      #19     Doctor.diagnose (package:flutter_tools/src/doctor.dart:309:47)
      #20     DoctorCommand.runCommand (package:flutter_tools/src/commands/doctor.dart:50:48)
      #21     FlutterCommand.verifyThenRunCommand (package:flutter_tools/src/runner/flutter_command.dart:1320:12)
      <asynchronous suspension>
      #22     FlutterCommand.run.<anonymous closure> (package:flutter_tools/src/runner/flutter_command.dart:1161:27)
      <asynchronous suspension>
      #23     AppContext.run.<anonymous closure> (package:flutter_tools/src/base/context.dart:150:19)
      <asynchronous suspension>
      #24     CommandRunner.runCommand (package:args/command_runner.dart:209:13)
      <asynchronous suspension>
      #25     FlutterCommandRunner.runCommand.<anonymous closure> (package:flutter_tools/src/runner/flutter_command_runner.dart:281:9)
      <asynchronous suspension>
      #26     AppContext.run.<anonymous closure> (package:flutter_tools/src/base/context.dart:150:19)
      <asynchronous suspension>
      #27     FlutterCommandRunner.runCommand (package:flutter_tools/src/runner/flutter_command_runner.dart:229:5)
      <asynchronous suspension>
      #28     run.<anonymous closure>.<anonymous closure> (package:flutter_tools/runner.dart:62:9)
      <asynchronous suspension>
      #29     AppContext.run.<anonymous closure> (package:flutter_tools/src/base/context.dart:150:19)
      <asynchronous suspension>
      #30     main (package:flutter_tools/executable.dart:94:3)
      <asynchronous suspension>


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

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 12.2 21D49 darwin-arm
    • Chrome (web)    • chrome • web-javascript • Google Chrome 98.0.4758.80

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

! Doctor found issues in 1 category.
[✓] Flutter (Channel master, 2.11.0-0.0.pre.509, on macOS 12.2 21D49 darwin-arm, locale en-GB)
    • Flutter version 2.11.0-0.0.pre.509 at /Users/nexus/dev/sdks/flutters
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 6656356bbf (6 hours ago), 2022-02-10 20:30:17 -0800
    • Engine revision a57061eda8
    • Dart version 2.17.0 (build 2.17.0-87.0.dev)
    • DevTools version 2.10.0

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-31, build-tools 31.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2020.3)
    • Android Studio at /Applications/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.10+0-b96-7249189)

[✓] IntelliJ IDEA Community Edition (version 2021.3)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin version 213.5744.122

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

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 12.2 21D49 darwin-arm
    • Chrome (web)    • chrome • web-javascript • Google Chrome 98.0.4758.80

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

• No issues found!

@danagbemava-nc danagbemava-nc added f: material design flutter/packages/flutter/material repository. found in release: 2.10 Found to occur in 2.10 found in release: 2.11 Found to occur in 2.11 framework flutter/packages/flutter repository. See also f: labels. has reproducible steps The issue has been confirmed reproducible and is ready to work on c: regression It was better in the past than it is now and removed in triage Presently being triaged by the triage team labels Feb 11, 2022
@TahaTesser TahaTesser added this to To do in Nevercode via automation Feb 11, 2022
@TahaTesser TahaTesser self-assigned this Feb 11, 2022
@TahaTesser TahaTesser added the customer: crowd Affects or could affect many people, though not necessarily a specific customer. label Feb 11, 2022
@TahaTesser TahaTesser mentioned this issue Feb 11, 2022
Merged
8 tasks
@danagbemava-nc danagbemava-nc added waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds and removed waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds labels Feb 11, 2022
@danagbemava-nc danagbemava-nc changed the title Snackbar BackdropFilter Flutter 2.10 blurs entire screen. [stable 2.10] Snackbar with a BackdropFilter blurs entire screen. Feb 11, 2022
@danagbemava-nc danagbemava-nc changed the title [stable 2.10] Snackbar with a BackdropFilter blurs entire screen. [stable 2.10+] Snackbar with a BackdropFilter blurs entire screen. Feb 11, 2022
@flar flar mentioned this issue Feb 11, 2022
Merged
8 tasks
@flar
Copy link
Contributor

flar commented Feb 11, 2022

BackdropFilter will blur the entire screen if you don't put a clip around it. That isn't a side effect, the clip is explicitly required to limit the blur. From the documentation for BackdropFilter:

The filter will be applied to all the area within its parent or ancestor widget's clip. If there's no clip, the filter will be applied to the full screen.

I also mentioned this on the PR comments just now.

@TahaTesser
Copy link
Member

TahaTesser commented Feb 11, 2022 •
edited
Loading

Hey @flar
Thanks for confirming, I've always seen clipping is required for Backdropfilter to limit the blur area. For instance #16614 (comment) and many more times.

The problem is you cannot clip the Snackbar directly so I filed PR that provides to get clipping for Snackbar #98252 and I have seen a similar code design in another widget, which inspired me to make this new PR

@TahaTesser TahaTesser moved this from To do to PR submitted in Nevercode Feb 11, 2022
Nevercode automation moved this from PR submitted to Done (PR merged) Feb 25, 2022
@github-actions
Copy link

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.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Mar 11, 2022
@danagbemava-nc danagbemava-nc added the r: fixed Issue is closed as already fixed in a newer version label Mar 14, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@TahaTesser TahaTesser

Labels
c: regression It was better in the past than it is now customer: crowd Affects or could affect many people, though not necessarily a specific customer. f: material design flutter/packages/flutter/material repository. found in release: 2.10 Found to occur in 2.10 found in release: 2.11 Found to occur in 2.11 framework flutter/packages/flutter repository. See also f: labels. has reproducible steps The issue has been confirmed reproducible and is ready to work on r: fixed Issue is closed as already fixed in a newer version
Projects
Nevercode
Status: Done (PR merged)
Nevercode
  
Done (PR merged)
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add clipBehavior to Snackbar NevercodeHQ/flutter
4 participants
@ccadieux @TahaTesser @flar @danagbemava-nc