Dots appear under FAB with elevation without a background color #90254
Labels
c: regression
It was better in the past than it is now
dependency: skia
Skia team may need to help us
f: material design
flutter/packages/flutter/material repository.
found in release: 2.5
Found to occur in 2.5
found in release: 2.6
Found to occur in 2.6
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
Comments
|
Issue is reproducible on I played around with OP's code and here are my findings. screenshotsVarious elevations levels
updated main.dartimport 'package:flutter/material.dart';
import 'themes.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Shadow Flickering',
theme: Themes.light,
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
FloatingActionButton(
heroTag: hashCode,
tooltip: 'filter',
elevation: 13.5,
onPressed: () {},
backgroundColor: Colors.transparent,
foregroundColor: Colors.white,
child: Image.asset(
'images/filter_menu.png',
height: 32,
color: Themes.mainColor,
),
),
Material(
elevation: 13.5,
color: Colors.transparent,
child: Container(
height: 32,
width: 32,
margin: EdgeInsets.only(left: 12.0),
decoration: BoxDecoration(shape: BoxShape.circle),
child: Image.asset(
'images/filter_menu.png',
color: Themes.mainColor,
height: 32,
),
),
),
FloatingActionButton(
heroTag: hashCode + 1,
tooltip: 'filter',
elevation: 0,
onPressed: () {},
child: Image.asset(
'images/filter_menu.png',
height: 32,
color: Themes.mainColor,
),
),
],
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
body: CustomScrollView(
slivers: [
const SliverAppBar(
backgroundColor: Themes.mainColor,
leading: SizedBox(),
floating: true,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
titlePadding: EdgeInsets.only(bottom: 16),
title: Text('articles'),
),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(ctx, index) => Padding(
padding: const EdgeInsets.all(10),
child: Card(
color: Themes.mainColor,
child: SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height / 4,
),
),
),
childCount: 50,
),
),
],
),
);
}
}
flutter doctor -v[✓] Flutter (Channel master, 2.6.0-6.0.pre.128, on macOS 11.5.1 20G80 darwin-arm, locale en-GB)
• Flutter version 2.6.0-6.0.pre.128 at /Users/nexus/dev/sdks/flutters
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision fa9790ca47 (7 hours ago), 2021-09-17 01:37:03 -0400
• Engine revision e70febab63
• Dart version 2.15.0 (build 2.15.0-118.0.dev)
[✓] 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 12.5.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• CocoaPods version 1.11.0
[✓] 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)
[✓] VS Code (version 1.60.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.26.0
[✓] Connected device (3 available)
• sdk gphone64 arm64 (mobile) • emulator-5554 • android-arm64 • Android 12 (API 31) (emulator)
• macOS (desktop) • macos • darwin-arm64 • macOS 11.5.1 20G80 darwin-arm
• Chrome (web) • chrome • web-javascript • Google Chrome 93.0.4577.82
• No issues found![✓] Flutter (Channel stable, 2.5.0, on macOS 11.5.1 20G80 darwin-arm, locale en-GB)
• Flutter version 2.5.0 at /Users/nexus/dev/sdks/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 4cc385b4b8 (9 days ago), 2021-09-07 23:01:49 -0700
• Engine revision f0826da7ef
• Dart version 2.14.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 at /Applications/Xcode.app/Contents/Developer
• Xcode 12.5.1, Build version 12E507
• CocoaPods version 1.11.0
[✓] 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)
[✓] VS Code (version 1.60.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.26.0
[✓] Connected device (3 available)
• sdk gphone64 arm64 (mobile) • emulator-5554 • android-arm64 • Android 12 (API 31) (emulator)
• macOS (desktop) • macos • darwin-arm64 • macOS 11.5.1 20G80 darwin-arm
• Chrome (web) • chrome • web-javascript • Google Chrome 93.0.4577.82
• No issues found![✓] Flutter (Channel stable, 2.2.3, on macOS 11.5.1 20G80 darwin-arm, locale en-GB)
• Flutter version 2.2.3 at /Users/nexus/dev/sdks/flutter_rc/flutter
• Framework revision f4abaa0735 (3 months ago), 2021-07-01 12:46:11 -0700
• Engine revision 241c87ad80
• Dart version 2.13.4
[✓] 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/jdk/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 at /Applications/Xcode.app/Contents/Developer
• Xcode 12.5.1, Build version 12E507
• CocoaPods version 1.11.0
[✓] 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)
[✓] VS Code (version 1.60.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.26.0
[✓] Connected device (3 available)
• sdk gphone64 arm64 (mobile) • emulator-5554 • android-arm64 • Android 12 (API 31) (emulator)
• macOS (desktop) • macos • darwin-arm64 • macOS 11.5.1 20G80 darwin-arm
• Chrome (web) • chrome • web-javascript • Google Chrome 93.0.4577.82
• No issues found!Edit: add more info |
danagbemava-nc
added
f: material design
danagbemava-nc
changed the title
|
CC @rami-a |
|
Same issue here, Strange dot will appear when FAB backgound color defined by "Color.fromARGB(0, 71, 150, 236)" |
|
I just spent some time trying to bisect this only to realize that this bug is happening randomly. If I hard restart the repro app, it has a ~50% chance of occurring or not. Bisecting again with a bunch of restarts, I see that this first appeared in 2.5.0-1.0 pre. The commit that caused it was eb64852 from the engine PR flutter/engine#27124. Looks like that brought in a shadow change from Skia. @untp @yjbanov @flar Do you have any idea what in that PR caused this regression and what we can do to fix it? |
|
@justinmc Thanks for mentioning me. I didn't know there was a regression. I digged down the issue and found Skia causing the issue. Here is my findings: The issue is reproduced when
|
|
@untp Thanks for the analysis! I'll get ahold of the Skia team. |
|
I created a Skia bug here: https://bugs.chromium.org/p/skia/issues/detail?id=12773 |
|
The Skia bug has been fixed. We can try this out again once that fix makes its way into Flutter master. |
|
Looks this is fixed, can't see dots when testing the sample on master, closing. |
TahaTesser
added
the
r: fixed
|
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 |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Description
After upgrading from flutter 2.2.3 as in title to 2.5.0 strange dots appears underneath floating action buttons.
Shadow appear with dot.
I noticed also when removing shadow from one of the button, dot dissapear on another one.
Tested on real devices on both platforms Android and IOS.
Sample tested also on master channel 2b6f3bf, bug still persist.
I allowed myself to tag @zanderso since you told me to create new issue.
Thanks a lot of for digging into it.
Steps to Reproduce
flutter create bug-shadow-flutter.Main:
themes file:
Expected results:
Floating action buttons without strange dot underneath.
Actual results:
Strange dot underneath floating action buttons:
Logs
flutter run --verbose
flutter analyze
flutter doctor -v
The text was updated successfully, but these errors were encountered: