OverlayColor not working when Color is set in TableRow.decoration #110565

shaurya-src · 2022-08-30T04:43:51Z

Steps to Reproduce

Add BoxDecoration with colour to a TableRow widget
Add TableRowInkWell inside it with OverlayColour property
Hover above the widget and observe it's behaviour

Expected results: The Colour of the widget should be changed to overlayColour while hovering

Actual results: The colour stays the same as BoxDecoration colour. The same happens in case of container as well.

Code Sample

Table(
              children: [
                TableRow(
                    decoration: const BoxDecoration(color: Colors.cyan),
                    children: [
                      TableRowInkWell(
                        onTap: () => print('Testing'),
                        overlayColor: MaterialStateProperty.all(Colors.red),
                        child: const Text('Sample Text Row Widget'),
                      )
                    ])
              ],
            ),

Logs

flutter doctor -v

[✓] Flutter (Channel stable, 3.0.4, on macOS 12.5.1 21G83 darwin-arm, locale
    en-GB)
    • Flutter version 3.0.4 at /Users/shaurya/development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 85684f9300 (9 weeks ago), 2022-06-30 13:22:47 -0700
    • Engine revision 6ba2af10bb
    • Dart version 2.17.5
    • DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /Users/shaurya/Library/Android/sdk
    • Platform android-31, build-tools 33.0.0
    • 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 13.4.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • 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)

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 12.5.1 21G83 darwin-arm
    • Chrome (web)    • chrome • web-javascript • Google Chrome 104.0.5112.101

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

• No issues found!

Screen.Recording.2022-08-30.at.10.10.23.AM.mov

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

huycozy · 2022-08-30T10:45:29Z

Hi @shaurya-src, thanks for filing the issue. This issue is reproducible on the latest stable and master channels.
When removing TableRow's decoration, the overlayColor works as desired.

Web: ❌
MacOS: ❌

✅: No Issue ❌: Issue reproduced

Demo

with decoration	without decoration
Screen.Recording.2022-08-30.at.17.34.58.mp4	Screen.Recording.2022-08-30.at.17.44.29.mov

Sample code

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.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 Demo',
      localizationsDelegates: const [
        GlobalMaterialLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        DefaultCupertinoLocalizations.delegate,
      ],
      supportedLocales: const [
        Locale('en'),
      ],
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Table(
              children: [
                TableRow(
                  decoration: const BoxDecoration(color: Colors.cyan),
                  children: [
                    TableRowInkWell(
                      onTap: () => print('Testing'),
                      overlayColor: MaterialStateProperty.all(Colors.red),
                      child: const Text('Sample Text Row Widget'),
                    ),
                  ],
                ),
              ],
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        child: const Icon(Icons.add),
      ),
    );
  }
}

flutter doctor -v

[✓] Flutter (Channel stable, 3.0.5, on macOS 12.2.1 21D62 darwin-x64, locale en-VN)
    • Flutter version 3.0.5 at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f1875d570e (9 hours ago), 2022-07-13 11:24:16 -0700
    • Engine revision e85ea0e79c
    • Dart version 2.17.6
    • DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 31.0.0
    • ANDROID_HOME = /Users/huynq/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 13.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • 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 2020.3.3)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • 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

[✓] IntelliJ IDEA Community Edition (version 2022.1.1)
    • IntelliJ at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/221.5591.52/IntelliJ IDEA CE.app
    • 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

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

[✓] Connected device (3 available)
    • SM T225 (mobile) • R9JT3004VRJ • android-arm64  • Android 11 (API 30)
    • macOS (desktop)  • macos       • darwin-x64     • macOS 12.2.1 21D62 darwin-x64
    • Chrome (web)     • chrome      • web-javascript • Google Chrome 103.0.5060.114

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

• No issues found!

[✓] Flutter (Channel master, 3.1.0-0.0.pre.2572, on macOS 12.5 21G72 darwin-x64, locale en-EE)
    • Flutter version 3.1.0-0.0.pre.2572 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision cfee9c8467 (25 minutes ago), 2022-08-29 21:50:23 -0400
    • Engine revision 0bf86adeff
    • Dart version 2.19.0 (build 2.19.0-149.0.dev)
    • DevTools version 2.16.0

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 31.0.0
    • ANDROID_HOME = /Users/huynq/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 13.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 13E113
    • 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 2020.3.3)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • 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

[✓] IntelliJ IDEA Community Edition (version 2022.1.1)
    • IntelliJ at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/221.5591.52/IntelliJ IDEA CE.app
    • 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

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

[✓] Connected device (3 available)
    • SM T225 (mobile) • R9JT3004VRJ • android-arm64  • Android 12 (API 31)
    • macOS (desktop)  • macos       • darwin-x64     • macOS 12.5 21G72 darwin-x64
    • Chrome (web)     • chrome      • web-javascript • Google Chrome 104.0.5112.101

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

• No issues found!

gspencergoog · 2022-09-01T18:08:15Z

cc @HansMuller

TahaTesser · 2022-09-12T10:38:10Z

Here is a simple runnable code sample.

Code Sample

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Example(),
    );
  }
}

class Example extends StatelessWidget {
  const Example({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Example'),
      ),
      body: Table(
        children: [
          TableRow(
            decoration: const BoxDecoration(color: Colors.cyan),
            children: [
              TableRowInkWell(
                onTap: () => print('Testing'),
                overlayColor: MaterialStateProperty.all(Colors.red),
                child: const Padding(
                  padding: EdgeInsets.symmetric(vertical: 16.0, horizontal: 8.0),
                  child: Text('Sample Text Row Widget'),
                ),
              )
            ],
          )
        ],
      ),
    );
  }
}

dam-ease · 2023-05-05T09:00:40Z

I am able to reproduce this issue on the latest stable and master channels. The issue is reproducible on macOS and Chrome Web. When TableRow's decoration is removed or has a transparent color, the overlay works as expected. This is valid in the case of a Container being used as well.

Code Sample

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Example(),
    );
  }
}

class Example extends StatelessWidget {
  const Example({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Example'),
      ),
      body: Table(
        children: [
          TableRow(
            decoration: const BoxDecoration(color: Colors.cyan),
            children: [
              TableRowInkWell(
                onTap: () => print('Testing'),
                overlayColor: MaterialStateProperty.all(Colors.red),
                child: const Padding(
                  padding: EdgeInsets.symmetric(vertical: 16.0, horizontal: 8.0),
                  child: Text('Sample Text Row Widget'),
                ),
              )
            ],
          )
        ],
      ),
    );
  }
}

flutter doctor -v

[✓] Flutter (Channel master, 3.11.0-1.0.pre.65, on macOS 13.3 22E252 darwin-arm64, locale en-NG)
    • Flutter version 3.11.0-1.0.pre.65 on channel master at /Users/dammya/fvm/versions/master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 9b36fda920 (3 hours ago), 2023-05-05 01:54:23 -0400
    • Engine revision a885ed472e
    • Dart version 3.1.0 (build 3.1.0-77.0.dev)
    • DevTools version 2.23.1

[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    • Android SDK at /Users/dammya/Library/Android/sdk
    • Platform android-33, build-tools 32.1.0-rc1
    • 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.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14C18
    ✗ CocoaPods installed but not working.
        You appear to have CocoaPods installed but it is not working.
        This can happen if the version of Ruby that CocoaPods was installed with is different from the one being used to invoke it.
        This can usually be fixed by re-installing CocoaPods.
      To re-install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.

[✓] 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 2022.3.2)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • 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

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

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 13.3 22E252 darwin-arm64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 112.0.5615.137

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

[!] Flutter (Channel stable, 3.7.12, on macOS 13.3 22E252 darwin-arm64, locale en-NG)
    • Flutter version 3.7.12 on channel stable at /Users/dammya/fvm/versions/stable
    ! Warning: `flutter` on your path resolves to /Users/dammya/fvm/versions/master/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/dammya/fvm/versions/stable. Consider adding /Users/dammya/fvm/versions/stable/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/dammya/fvm/versions/master/bin/dart, which is not inside your current Flutter SDK checkout at /Users/dammya/fvm/versions/stable. Consider adding /Users/dammya/fvm/versions/stable/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 4d9e56e694 (2 weeks ago), 2023-04-17 21:47:46 -0400
    • Engine revision 1a65d409c7
    • Dart version 2.19.6
    • DevTools version 2.20.1
    • 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 32.1.0-rc1)
    • Android SDK at /Users/dammya/Library/Android/sdk
    • Platform android-33, build-tools 32.1.0-rc1
    • 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.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14C18
    ✗ CocoaPods installed but not working.
        You appear to have CocoaPods installed but it is not working.
        This can happen if the version of Ruby that CocoaPods was installed with is different from the one being used to invoke it.
        This can usually be fixed by re-installing CocoaPods.
      To re-install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.

[✓] 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 2022.3.2)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • 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

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

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 13.3 22E252 darwin-arm64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 112.0.5615.137

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

! Doctor found issues in 2 categories.

AhmedLSayed9 · 2024-04-06T19:37:54Z

We also encounter the same issue at AhmedLSayed9/dropdown_button2#239

AhmedLSayed9 · 2024-04-06T19:56:15Z

This can be produced with a simple InkWell around Container:

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('My Project'),
      ),
      body: Center(
        child: InkWell(
          onTap: () {},
          //focusColor: Colors.red,
          //hoverColor: Colors.red,
          //highlightColor: Colors.red,
          splashColor: Colors.red,
          child: Container(
            height: 200,
            width: 200,
            color: Colors.yellow,
          ),
        ),
      ),
    );

None of splashColor, highlightColor, hoverColor or focusColor has an effect (Same as using the alternative OverlayColor).

huycozy added the in triage Presently being triaged by the triage team label Aug 30, 2022

gspencergoog added the P2 Important issues not at the top of the work list label Sep 1, 2022

HansMuller changed the title ~~OverlayColor not working when Color is set in BoxDecoration~~ OverlayColor not working when Color is set in TableRow.decoration Sep 1, 2022

dam-ease added found in release: 3.7 Found to occur in 3.7 found in release: 3.11 Found to occur in 3.11 and removed found in release: 3.0 Found to occur in 3.0 found in release: 3.1 Found to occur in 3.1 labels May 5, 2023

flutter-triage-bot bot added multiteam-retriage-candidate team-desktop Owned by Desktop platforms team triaged-desktop Triaged by Desktop platforms team labels Jul 7, 2023

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

AhmedLSayed9 mentioned this issue Apr 6, 2024

overlayColor has no effect AhmedLSayed9/dropdown_button2#239

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

OverlayColor not working when Color is set in TableRow.decoration #110565

OverlayColor not working when Color is set in TableRow.decoration #110565

shaurya-src commented Aug 30, 2022

huycozy commented Aug 30, 2022

gspencergoog commented Sep 1, 2022

TahaTesser commented Sep 12, 2022 •

edited

dam-ease commented May 5, 2023

AhmedLSayed9 commented Apr 6, 2024

AhmedLSayed9 commented Apr 6, 2024

OverlayColor not working when Color is set in TableRow.decoration #110565

OverlayColor not working when Color is set in TableRow.decoration #110565

Comments

shaurya-src commented Aug 30, 2022

Steps to Reproduce

huycozy commented Aug 30, 2022

gspencergoog commented Sep 1, 2022

TahaTesser commented Sep 12, 2022 • edited

dam-ease commented May 5, 2023

AhmedLSayed9 commented Apr 6, 2024

AhmedLSayed9 commented Apr 6, 2024

TahaTesser commented Sep 12, 2022 •

edited