-
Notifications
You must be signed in to change notification settings - Fork 30.1k
Closed
Labels
dependency: skiaSkia team may need to help usSkia team may need to help usengineflutter/engine related. See also e: labels.flutter/engine related. See also e: labels.
Description
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
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
dependency: skiaSkia team may need to help usSkia team may need to help usengineflutter/engine related. See also e: labels.flutter/engine related. See also e: labels.