Adjacent Material widgets in Column with equal elevation cast shadows on each other #20591

lucaslcode · 2018-08-14T20:26:42Z

Interestingly opposite to #12206, I would expect two material widgets next to each other to cast shadows below, but not on the other. Instead I get this (code here):

Would also appreciate a workaround. I looked into MergeableMaterial but it didn't seem appropriate since it needs to be unconstrained and I'm using a CustomSingleChildLayout as a PopupRoute (like PopupMenu does).

tobytraylor · 2019-02-02T00:01:46Z

I've run into this as well. Any ideas for how to keep them from casting shadows on each other would be great.

zoechi · 2019-02-12T14:12:12Z

@tobytraylor Using "add reaction" on the initial comment would increase priority.

TahaTesser · 2020-04-22T13:43:36Z

Issue still exist

Code Sample

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Bug Demo',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Bug Demo'),
        ),
        body: new Center(
          child: new Row(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              new Material(
                elevation: 8.0,
                child: new SizedBox(width: 50.0, height: 50.0),
              ),
              new Material(
                elevation: 8.0,
                child: new SizedBox(width: 150.0, height: 150.0),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

flutter doctor -v

[✓] Flutter (Channel dev, v1.18.0-6.0.pre, on Mac OS X 10.15.4 19E287, locale
    en-GB)
    • Flutter version 1.18.0-6.0.pre at /Users/taha/Code/flutter_dev
    • Framework revision 84c84fb249 (31 hours ago), 2020-04-20 21:35:01 -0400
    • Engine revision 2bde4f0ae4
    • Dart version 2.9.0 (build 2.9.0-1.0.dev a12c36dd97)
 
[✓] 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.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.4.1, Build version 11E503a
    • 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.1.1
    • Dart plugin version 192.7761
    • Java version OpenJDK Runtime Environment (build
      1.8.0_212-release-1586-b4-5784211)
[✓] VS Code (version 1.44.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 19E287
    • Chrome     • chrome           • web-javascript • Google Chrome
      81.0.4044.113
    • Web Server • web-server       • web-javascript • Flutter Tools
• No issues found!

tobytraylor · 2020-11-23T23:30:54Z

Would be really nice if this worked.

ctrysbita · 2020-12-17T08:06:10Z

Any update here? This issue breaks the fundamental rule of material design.

darshankawar · 2020-12-30T12:58:44Z

Issue replicable on latest master and on latest stable.

flutter doctor -v

[✓] Flutter (Channel master, 1.26.0-2.0.pre.137, on Mac OS X 10.15.4 19E2269
    darwin-x64, locale en-IN)
    • Flutter version 1.26.0-2.0.pre.137 at
      /Users/dhs/documents/Fluttersdk/flutter
    • Framework revision 8f5d0371af (4 days ago), 2020-12-26 11:07:36 +0330
    • Engine revision f5364860ab
    • Dart version 2.12.0 (build 2.12.0-179.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.0)
    • Android SDK at /Users/dhs/Library/Android/sdk
    • Platform android-30, build-tools 30.0.0
    • 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.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.0.1, Build version 12A7300
    ! CocoaPods 1.9.3 out of date (1.10.0 is recommended).
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin
        code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To upgrade 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 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.51.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.16.0

[✓] Connected device (4 available)
    • SM A260G (mobile)                   • 5200763ebcfa861f
      • android-arm    • Android 8.1.0 (API 27)
    • iPhone SE (2nd generation) (mobile) • 6C85835D-FBFD-4AB3-8DE8-B4FAD35E5367
      • ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-0 (simulator)
    • macOS (desktop)                     • macos
      • darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
    • Chrome (web)                        • chrome
      • web-javascript • Google Chrome 87.0.4280.88

! Doctor found issues in 1 category.

[✓] Flutter (Channel stable, 1.22.5, on Mac OS X 10.15.4 19E2269 darwin-x64,
    locale en-IN)
    • Flutter version 1.22.5 at /Users/dhs/documents/Fluttersdk/flutter
    • 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.0)
    • Android SDK at /Users/dhs/Library/Android/sdk
    • Platform android-30, build-tools 30.0.0
    • 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.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.0.1, Build version 12A7300
    • CocoaPods version 1.9.3

[!] 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.51.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.16.0

[✓] Connected device (2 available)
    • SM A260G (mobile)           • 5200763ebcfa861f • android-arm • Android
      8.1.0 (API 27)
    • sdk gphone x86 arm (mobile) • emulator-5554    • android-x86 • Android 11
      (API 30) (emulator)

! Doctor found issues in 1 category.

kozmabalazs · 2021-11-28T16:37:02Z

This is still a problem in 2021. I would expect that widgets on the same elevation would not cast shadow on each other.

lebtron · 2022-09-27T20:46:56Z

no updates on this issue?

Also, the shadow is only cast on the LEFT child in all layouts.

danagbemava-nc · 2023-03-20T11:16:39Z

Reproduces on the latest versions of flutter.

updated code sample

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Bug Demo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Bug Demo'),
        ),
        body: const Center(
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Material(
                elevation: 8.0,
                child: SizedBox(width: 50.0, height: 50.0),
              ),
              Material(
                elevation: 8.0,
                child: SizedBox(width: 150.0, height: 150.0),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

flutter doctor -v

[✓] Flutter (Channel stable, 3.7.7, on macOS 13.2.1 22D68 darwin-arm64, locale en-GB)
    • Flutter version 3.7.7 on channel stable at /Users/nexus/dev/sdks/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 2ad6cd72c0 (12 days ago), 2023-03-08 09:41:59 -0800
    • Engine revision 1837b5be5f
    • Dart version 2.19.4
    • DevTools version 2.20.1

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0
    • Java binary at: /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/221.6008.13.2211.9619390/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)
    • All Android licenses accepted.

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

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

[✓] Android Studio (version 2022.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 11.0.15+0-b2043.56-8887301)

[✓] Android Studio (version 2022.1)
    • Android Studio at /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/221.6008.13.2211.9477386/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.15+0-b2043.56-8887301)

[✓] Android Studio (version 2022.1)
    • Android Studio at /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/221.6008.13.2211.9619390/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.15+0-b2043.56-8887301)

[✓] IntelliJ IDEA Community Edition (version 2022.3.3)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 72.1.4
    • Dart plugin version 223.8888

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

[✓] Connected device (3 available)
    • M2007J20CG (mobile) • adb-5dd3be00-17AYzd._adb-tls-connect._tcp. • android-arm64  • Android 12 (API 31)
    • macOS (desktop)     • macos                                      • darwin-arm64   • macOS 13.2.1 22D68 darwin-arm64
    • Chrome (web)        • chrome                                     • web-javascript • Google Chrome 111.0.5563.64

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

• No issues found!

[!] Flutter (Channel master, 3.9.0-11.0.pre.7, on macOS 13.2.1 22D68 darwin-arm64, locale en-GB)
    • Flutter version 3.9.0-11.0.pre.7 on channel master at /Users/nexus/dev/sdks/flutters
    ! Warning: `flutter` on your path resolves to /Users/nexus/dev/sdks/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutters. Consider adding /Users/nexus/dev/sdks/flutters/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/nexus/dev/sdks/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutters. Consider adding /Users/nexus/dev/sdks/flutters/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 1cd55934f9 (5 hours ago), 2023-03-20 02:26:27 -0400
    • Engine revision 19a5f61ff7
    • Dart version 3.0.0 (build 3.0.0-339.0.dev)
    • DevTools version 2.22.2
    • 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)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0
    • Java binary at: /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/221.6008.13.2211.9619390/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)
    • All Android licenses accepted.

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

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

[✓] Android Studio (version 2022.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 11.0.15+0-b2043.56-8887301)

[✓] Android Studio (version 2022.1)
    • Android Studio at /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/221.6008.13.2211.9477386/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.15+0-b2043.56-8887301)

[✓] Android Studio (version 2022.1)
    • Android Studio at /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/221.6008.13.2211.9619390/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.15+0-b2043.56-8887301)

[✓] IntelliJ IDEA Community Edition (version 2022.3.3)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 72.1.4
    • Dart plugin version 223.8888

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

[✓] Connected device (3 available)
    • M2007J20CG (mobile) • adb-5dd3be00-17AYzd._adb-tls-connect._tcp. • android-arm64  • Android 12 (API 31)
    • macOS (desktop)     • macos                                      • darwin-arm64   • macOS 13.2.1 22D68 darwin-arm64
    • Chrome (web)        • chrome                                     • web-javascript • Google Chrome 111.0.5563.64

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

! Doctor found issues in 1 category.

zoechi added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. a: fidelity Matching the OEM platforms better labels Aug 22, 2018

zoechi added this to the Goals milestone Aug 22, 2018

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

kf6gpe added the P2 Important issues not at the top of the work list label May 29, 2020

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

Hixie removed this from the None. milestone Aug 17, 2020

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

danagbemava-nc added found in release: 3.7 Found to occur in 3.7 found in release: 3.9 Found to occur in 3.9 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 Mar 20, 2023

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adjacent Material widgets in Column with equal elevation cast shadows on each other #20591

Adjacent Material widgets in Column with equal elevation cast shadows on each other #20591

lucaslcode commented Aug 14, 2018

tobytraylor commented Feb 2, 2019

zoechi commented Feb 12, 2019

TahaTesser commented Apr 22, 2020

tobytraylor commented Nov 23, 2020

ctrysbita commented Dec 17, 2020 •

edited

Loading

darshankawar commented Dec 30, 2020 •

edited

Loading

kozmabalazs commented Nov 28, 2021 •

edited

Loading

lebtron commented Sep 27, 2022 •

edited

Loading

danagbemava-nc commented Mar 20, 2023

Adjacent Material widgets in Column with equal elevation cast shadows on each other #20591

Adjacent Material widgets in Column with equal elevation cast shadows on each other #20591

Comments

lucaslcode commented Aug 14, 2018

tobytraylor commented Feb 2, 2019

zoechi commented Feb 12, 2019

TahaTesser commented Apr 22, 2020

Code Sample

tobytraylor commented Nov 23, 2020

ctrysbita commented Dec 17, 2020 • edited Loading

darshankawar commented Dec 30, 2020 • edited Loading

kozmabalazs commented Nov 28, 2021 • edited Loading

lebtron commented Sep 27, 2022 • edited Loading

danagbemava-nc commented Mar 20, 2023

ctrysbita commented Dec 17, 2020 •

edited

Loading

darshankawar commented Dec 30, 2020 •

edited

Loading

kozmabalazs commented Nov 28, 2021 •

edited

Loading

lebtron commented Sep 27, 2022 •

edited

Loading