Incorrect z-order in IconButton click animation #49417

Dasha6elka · 2020-01-24T08:40:02Z

We just found an issue with IconButton inside Table widget: z-order of click animation is incorrect. Please look at the screenshot:

We able to reproduce the issue on Web/Android on master/stable channels. We don't have iPhone so we are not sure if it works on iOS.

Expected results:
We are expect that an animation will be shown above TableRow background

Actual results:
An animation shows below row background. It looks as at screenshot below

Steps to Reproduce

This problem can be easily seen in this minimal example:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
          body: Table(
            children: [
              TableRow(
                children: [IconButton(icon: Icon(Icons.add), onPressed: () {})],
                decoration: BoxDecoration(color: Colors.white),
              ),
              TableRow(
                children: [IconButton(icon: Icon(Icons.add), onPressed: () {})],
              ),
            ],
          ),
        ),
      );
}

Logs

flutter doctor -v output:

[√] Flutter (Channel stable, v1.12.13+hotfix.5, on Microsoft Windows [Version 10.0.17763.914], locale ru-RU)
    • Flutter version 1.12.13+hotfix.5 at C:\Users\darya.scheglova\FlutterSdk
    • Framework revision 27321ebbad (6 weeks ago), 2019-12-10 18:15:01 -0800
    • Engine revision 2994f7e1e6
    • Dart version 2.7.0

[!] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at C:\Users\darya.scheglova\AppData\Local\Android\android-sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-29, build-tools 29.0.2
    • Java binary at: C:\Program Files\Java\jdk1.8.0_221\bin\java
    • Java version Java(TM) SE Runtime Environment (build 1.8.0_221-b11)
    X Android license status unknown.
      Try re-installing or updating your Android SDK Manager.
      See https://developer.android.com/studio/#downloads or visit https://flutter.dev/setup/#android-setup for detailed instructions.

[!] Android Studio (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/setup/#android-setup for detailed instructions).

[√] VS Code (version 1.41.1)
    • VS Code at C:\Users\darya.scheglova\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.7.1

[√] Connected device (1 available)
    • Mi A1 • 995797660804 • android-arm64 • Android 9 (API 28)

! Doctor found issues in 2 categories.

The text was updated successfully, but these errors were encountered:

HansMuller · 2020-01-24T14:20:39Z

Unlike the button classes (FlatButton, RaisedButton, OutlineButton) which are based on RawMaterialButton, IconButton doesn't bring along its own Material widget. It just builds an InkResponse, which paints on the underlying Material. In this case the underlying Material is behind the TableRow's decoration.

TahaTesser · 2020-04-08T13:15:26Z

Issue exist

Code Sample

code sample

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        body: Center(
          child: Table(
            children: [
              TableRow(
                children: [IconButton(icon: Icon(Icons.add), onPressed: () {})],
                decoration: BoxDecoration(color: Colors.white),
              ),
              TableRow(
                children: [IconButton(icon: Icon(Icons.add), onPressed: () {})],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

flutter doctor -v

[✓] Flutter (Channel dev, v1.18.0, on Mac OS X 10.15.4 19E266, locale en-GB)
    • Flutter version 1.18.0 at /Users/taha/Code/flutter_dev
    • Framework revision 8f7327f83a (31 hours ago), 2020-04-06 22:11:01 -0400
    • Engine revision 49891e0653
    • Dart version 2.8.0 (build 2.8.0-dev.20.0 1210d27678)
 
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    • Android SDK at /Users/taha/Code/sdk
    • Platform android-29, build-tools 29.0.3
    • ANDROID_HOME = /Users/taha/Code/sdk
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_212-release-1586-b4-5784211)
    • All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 11.4)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.4, Build version 11E146
    • CocoaPods version 1.9.1
[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 3.6)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 45.0.1
    • Dart plugin version 192.7761
    • Java version OpenJDK Runtime Environment (build
      1.8.0_212-release-1586-b4-5784211)
[✓] VS Code (version 1.43.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.9.1
[✓] Connected device (4 available)
    • SM M305F   • 32003c30dc19668f • android-arm64  • Android 10 (API 29)
    • macOS      • macOS            • darwin-x64     • Mac OS X 10.15.4 19E266
    • Chrome     • chrome           • web-javascript • Google Chrome
      80.0.3987.149
    • Web Server • web-server       • web-javascript • Flutter Tools
• No issues found!

TahaTesser · 2020-12-29T15:33:37Z

flutter doctor -v

[✓] Flutter (Channel stable, 1.22.5, on macOS 11.1 20C69 darwin-x64, locale en-GB)
    • Flutter version 1.22.5 at /Users/tahatesser/Code/flutter_stable
    • Framework revision 7891006299 (3 weeks ago), 2020-12-10 11:54:40 -0800
    • Engine revision ae90085a84
    • Dart version 2.10.4

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Volumes/Extreme/sdk
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Volumes/Extreme/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    • CocoaPods version 1.10.0

[!] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)

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

[✓] Connected device (3 available)
    • RMX2001 (mobile)     • EUYTFEUSQSRGDA6D                     • android-arm64 • Android 10 (API 29)
    • Taha’s iPad (mobile) • 00008020-000255113EE8402E            • ios           • iOS 14.3
    • iPhone 12 (mobile)   • 12D8FF8E-2815-436E-9951-B8A6A42E4ACF • ios           • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)

! Doctor found issues in 1 category.

[✓] Flutter (Channel master, 1.26.0-2.0.pre.145, on macOS 11.1 20C69 darwin-x64, locale en-GB)
    • Flutter version 1.26.0-2.0.pre.145 at /Users/tahatesser/Code/flutter_master
    • Framework revision 38fe7e2b1c (12 hours ago), 2020-12-28 21:39:03 -0500
    • Engine revision 892034dc6a
    • Dart version 2.12.0 (build 2.12.0-179.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Volumes/Extreme/sdk
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Volumes/Extreme/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    • CocoaPods version 1.10.0

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.1)
    • 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 1.8.0_242-release-1644-b3-6915495)

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

[✓] Connected device (5 available)
    • RMX2001 (mobile)     • EUYTFEUSQSRGDA6D                     • android-arm64  • Android 10 (API 29)
    • Taha’s iPad (mobile) • 00008020-000255113EE8402E            • ios            • iOS 14.3
    • iPhone 12 (mobile)   • 12D8FF8E-2815-436E-9951-B8A6A42E4ACF • ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • macOS (desktop)      • macos                                • darwin-x64     • macOS 11.1 20C69 darwin-x64
    • Chrome (web)         • chrome                               • web-javascript • Google Chrome 87.0.4280.88

• No issues found!

maheshmnj · 2022-12-06T04:28:15Z

Reproduces on stable 3.3 and master 3.7

flutter doctor -v (mac)

[✓] Flutter (Channel master, 3.7.0-3.0.pre.33, on macOS 12.6 21G115 darwin-arm64, locale en-IN)
    • Flutter version 3.7.0-3.0.pre.33 on channel master 
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 5201856805 (38 minutes ago), 2022-12-05 18:27:21 -0800
    • Engine revision a309d239c4
    • Dart version 2.19.0 (build 2.19.0-463.0.dev)
    • DevTools version 2.20.0
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly
      to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc4)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0-rc4
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14A400
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.2)
    • 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.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

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

[✓] Connected device (3 available)
    • iPhone 12 Pro (mobile) • 026D5789-9E78-4AD5-B1B2-3F8D4E7F65E4 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 12.6 21G115 darwin-arm64
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 108.0.5359.94

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

[✓] Flutter (Channel stable, 3.3.9, on macOS 12.6 21G115 darwin-arm, locale en-IN)
    • Flutter version 3.3.9 on channel stable at /Users/mahesh/Development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b8f7f1f986 (24 hours ago), 2022-11-23 06:43:51 +0900
    • Engine revision 8f2221fbef
    • Dart version 2.18.5
    • DevTools version 2.15.0

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc4)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0-rc4
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14A400
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.2)
    • 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.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

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

[✓] Connected device (3 available)
    • iPhone 12 Pro (mobile) • 026D5789-9E78-4AD5-B1B2-3F8D4E7F65E4 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 12.6 21G115 darwin-arm
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 107.0.5304.110

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

flutter-triage-bot · 2024-04-15T02:56:50Z

This issue is missing a priority label. Please set a priority label when adding the triaged-design label.

Piinks · 2024-05-08T19:11:26Z

It looks like this was fixed, as it is no longer reproducing. 🎉

dnfield added f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels. labels Jan 24, 2020

TahaTesser added the has reproducible steps The issue has been confirmed reproducible and is ready to work on label Apr 8, 2020

TahaTesser added the found in release: 1.18 Occurs in 1.18 label Jul 30, 2020

TahaTesser added found in release: 1.22 Found to occur in 1.22 found in release: 1.26 Found to occur in 1.26 and removed found in release: 1.18 Occurs in 1.18 labels Dec 29, 2020

maheshmnj added found in release: 3.3 Found to occur in 3.3 found in release: 3.7 Found to occur in 3.7 and removed found in release: 1.22 Found to occur in 1.22 found in release: 1.26 Found to occur in 1.26 labels Dec 6, 2022

flutter-triage-bot bot added multiteam-retriage-candidate team-design Owned by Design Languages team triaged-design Triaged by Design Languages team labels Jul 8, 2023

Hixie removed the multiteam-retriage-candidate label Mar 6, 2024

flutter-triage-bot bot removed the triaged-design Triaged by Design Languages team label Apr 15, 2024

Piinks added triaged-design Triaged by Design Languages team P2 Important issues not at the top of the work list labels May 8, 2024

Piinks closed this as completed May 8, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Incorrect z-order in IconButton click animation #49417

Incorrect z-order in IconButton click animation #49417

Dasha6elka commented Jan 24, 2020

HansMuller commented Jan 24, 2020

TahaTesser commented Apr 8, 2020 •

edited

TahaTesser commented Dec 29, 2020

maheshmnj commented Dec 6, 2022

flutter-triage-bot bot commented Apr 15, 2024

Piinks commented May 8, 2024

Incorrect z-order in IconButton click animation #49417

Incorrect z-order in IconButton click animation #49417

Comments

Dasha6elka commented Jan 24, 2020

Steps to Reproduce

HansMuller commented Jan 24, 2020

TahaTesser commented Apr 8, 2020 • edited

Code Sample

TahaTesser commented Dec 29, 2020

maheshmnj commented Dec 6, 2022

flutter-triage-bot bot commented Apr 15, 2024

Piinks commented May 8, 2024

TahaTesser commented Apr 8, 2020 •

edited