Skip to content

Backdrop filter doesn't work the same on iOS and Android #16144

@fralways

Description

@fralways

Steps to Reproduce

I have a background image which fills whole screen and I want to blur only one part of the screen. Strange thing happens when I add Text widget, it seems that BackdropFilter then takes whole screen instead just part of it. Check the following code:

import 'dart:ui';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Stack(
        children: <Widget>[
          new Positioned(
            left: 0.0,
            top: 0.0,
            right: 0.0,
            bottom: 0.0,
            child: new Image.asset(
              'images/test.jpg',
              fit: BoxFit.fill,
            )
          ),
          new Positioned(
            top: 200.0,
            left: 100.0,
            right: 100.0,
            bottom: 200.0,
            child: new BackdropFilter(
              filter: new ImageFilter.blur(sigmaX: 12.0, sigmaY: 12.0),
//              child: new Text(
//                'test',
//                style: Theme.of(context).textTheme.headline,
//                textAlign: TextAlign.center,
//                maxLines: 1,
//              ),
              child: new Container(
                color: const Color.fromRGBO(0, 0, 0, 0.5),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

In this code I have two children of BackdropFilter widget - Container and Text. When I comment out Text and use Container as a child it works okay. If I comment out Container and use Text then BackdropFilter uses whole screen on my iPhone. Using the same code in Android simulator produces expected behavior - BackdropFilter only uses part of the screen.

Flutter Doctor

Paste the output of running flutter doctor -v here.

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, v0.2.5-pre.56, on Mac OS X 10.13.3 17D102, locale en-US)
[✓] Android toolchain - develop for Android devices (Android SDK 27.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 9.2)
[✓] Android Studio (version 3.1)
[✓] Connected devices (1 available)

• No issues found!
Process finished with exit code 0

Metadata

Metadata

Assignees

No one assigned

    Labels

    dependency: skiaSkia team may need to help usengineflutter/engine related. See also e: labels.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions