Translucent FloatingActionButton get's a persistent highlight when clicked/touched

[cafelasm]

Steps to Reproduce

This problem did not occur until Flutter Ver.2.2.3. This happens in v.2.5.0 and v2.5.1.

1. Create a new Flutter project in Android Studio.
2. Set the FloatingActionButton to be translucent.
   example:

      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add_sharp),
        backgroundColor: Color.fromARGB(110, 0x30, 0xe0, 0xa0),
        foregroundColor: Color.fromARGB(200, 255, 255, 255),
        elevation: 3.0,
        mini: true,
      )

Expected results:
The display returns to the original when you stop touching the button.

Actual results:
The display may not return to its original state even if you stop touching the button.
If you don't do setState (), it won't return for sure.

[danagbemava-nc]

Issue is reproducible on master and stable 2.5.1 but not stable 2.2.3.

The FAB seems to be highlighted when it is touched and it persists for some time.

This issue might share a root cause with #90254

See attached videos.

code sample

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {
  String? _text;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'You have entered: $_text',
            ),
            TextFormField(
              obscureText: true,
              onChanged: (text) {
                print('Entered: $text');
                setState(() {
                  _text = text;
                });
              },
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: Icon(Icons.add_sharp),
        backgroundColor: Color.fromARGB(110, 0x30, 0xe0, 0xa0),
        foregroundColor: Color.fromARGB(200, 255, 255, 255),
        elevation: 3.0,
        mini: true,
      ),
    );
  }
}

videos

stable 2.2.3

Simulator.Screen.Recording.-.iPhone.12.Pro.-.2021-09-27.at.14.09.03.mp4

stable 2.5.1 & master

Simulator.Screen.Recording.-.iPhone.12.Pro.-.2021-09-27.at.14.11.06.mp4

flutter doctor -v

[✓] 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.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)

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

[✓] Connected device (3 available)
    • Nexus’ IPhone (mobile) • 00008020-001875E83A38002E • ios            • iOS 14.8
    • 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.1, on macOS 11.5.1 20G80 darwin-arm, locale en-GB)
    • Flutter version 2.5.1 at /Users/nexus/dev/sdks/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ffb2ecea52 (10 days ago), 2021-09-17 15:26:33 -0400
    • Engine revision b3af521a05
    • Dart version 2.14.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 at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.5.1, Build version 12E507
    • 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)

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

[✓] Connected device (3 available)
    • Nexus’ IPhone (mobile) • 00008020-001875E83A38002E • ios            • iOS 14.8 18H17
    • 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 master, 2.6.0-12.0.pre.98, on macOS 11.5.1 20G80 darwin-arm, locale en-GB)
    • Flutter version 2.6.0-12.0.pre.98 at /Users/nexus/dev/sdks/flutters
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 48e6758fb5 (12 hours ago), 2021-09-26 21:28:03 -0400
    • Engine revision 65ad5a4836
    • Dart version 2.15.0 (build 2.15.0-150.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.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)

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

[✓] Connected device (3 available)
    • Nexus’ IPhone (mobile) • 00008020-001875E83A38002E • ios            • iOS 14.8 18H17
    • 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: added code sample

[HansMuller]

CC @rami-a

[HansMuller]

Here's a further reduced test case. The problem goes away if the tooltip is not included.

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add_sharp),
        backgroundColor: Colors.blue.withOpacity(0.95),
        tooltip: 'tooltip',
      ),
      body: Center(child: Text('Sticky FAB')),
    );
  }
}

void main() {
  runApp(MaterialApp(home: Home()));
}

[zs-dima]

@HansMuller issue still there even without tooltip.

[HansMuller]

@zs-dima - you're correct. What I'd noticed is that, on MacOS, when the gesture-recognizer detects the long-tap that causes the tool-tip to be shown, the FAB's elevation change disappears because the simple tap gesture was cancelled. This doesn't feel quite right, but it's not really the issue that's been raised here.

On Android, it's easy to see that the button highlight does get stuck, even if the tooltip is not specified. Still looking into that.

[HansMuller]

@flar - I've bisected this issue back to this engine PR:

[flow] Switch to directional shadows #27124

which landed in an [engine roll](Engine roll - #86596) on July 19th. I can't say that I understand the regression. It occurs on Android and desktop (MacOS):

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: RawMaterialButton(
        onPressed: () {},
        child: Icon(Icons.add_sharp),
        fillColor: Colors.blue.withOpacity(0.25),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(home: Home()));
}

But only if the RawMaterialButton is the Scaffold's floatingActionButton. It does not occur if the same button is just centered:

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Align(
        alignment: Alignment.center,
        child: RawMaterialButton(
          onPressed: () {},
          child: Icon(Icons.add_sharp),
          fillColor: Colors.blue.withOpacity(0.25),
        ),
      ),
    );
  }
}

This is an odd case because ordinarily Material widget's with non-zero elevations are filled with an opaque color, so the inner part of the shadow can't be seen.

[HansMuller]

@cafelasm It's true that this is a regression. However it's also an odd case (noted above). Why create a FAB with a translucent background color?

[flar]

The change to shadow rendering made so many shadows that used to be so faint as to not be visible become visible after the change. It made shadows consistent across more ranges of sizes and elevations. So, while this may look like a regression caused by that engine change, it is more likely an issue that was always happening, but we just didn't see it before. Is the press/mouse-over causing a second shadow to be rendered which used to not be visible?

(For reference, I took a look at Hans' test case with the tooltip...)

[HansMuller]

I haven't been able to reproduce the issue with a build before the shadow rendering change, e.g.

git checkout e9c1c1627adc424cf3dc78ef3994e457e041503f

Even if the initial button elevation is 12, which produces a big default shadow, nothing like the rendering anomaly reported here shows up.

[cafelasm]

@HansMuller In the app I created, the display behind the buttons contained important information, so I wanted it to be readable even if the buttons overlapped. I searched for various parameters and chose the most appropriate value, which resulted in my sample code.

[HansMuller]

@cafelasm - that makes sense. Unfortunately, we draw shadows "under" Material widgets by effectively stacking the the material on top of a filled shadow-colored figure with the same shape as the material. The shadow-colored figure is filled and its edges are blurred beyond the shape's boundaries to create the drop shadow effect. Unfortunately, this approach doesn't work well with translucent material, since you can see the filled figure through the material.

That doesn't explain exactly why event handling has gone awry in this case.

[flutter-triage-bot]

This issue is assigned but has had no recent status updates. Please consider unassigning this issue if it is not going to be addressed in the near future. This allows people to have a clearer picture of what work is actually planned. Thanks!

[flutter-triage-bot]

This issue was assigned to @HansMuller but has had no status updates in a long time. To remove any ambiguity about whether the issue is being worked on, the assignee was removed.