Skip to content

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

Closed
@ccadieux

Description

@ccadieux

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

Metadata

Metadata

Assignees

Labels

c: regressionIt was better in the past than it is nowcustomer: crowdAffects or could affect many people, though not necessarily a specific customer.f: material designflutter/packages/flutter/material repository.found in release: 2.10Found to occur in 2.10found in release: 2.11Found to occur in 2.11frameworkflutter/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 version

Type

No type

Projects

Status

Done (PR merged)

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions