Adjacent Material Widgets in a Column/Row do not cast a shadow on each other

[zzzev]

Internal: b/292548582

Steps to Reproduce

When you create a widget that has a build method like this:

Widget build(BuildContext context) => return new Scaffold(
      appBar: new AppBar(
        title: new Text('Test'),
      ),
      body: new Column(
        children: <Widget>[
          new Material(
            color: Colors.blue.shade500,
            child: new Container(height: 100.0),
            elevation: 20.0,
          ),
          new Material(
            color: Colors.white,
            child: new Container(height: 100.0),
            elevation: 10.0,
          ),
          new Material(
            color: Colors.orange.shade500,
            child: new Container(height: 100.0),
            elevation: 20.0,
          ),
        ],
      ),
    );

You get this result:

As you can see, only the shadow from the bottom-most, orange Material is rendered. I would expect there to be a shadow rendered over the middle, white Material from both the above and below, as both of those have higher elevation.

For bonus points, I would also expect the shadow over the white Material to be about half as large as the one cast over the scaffold background by the orange Material (because the former is going from elevation 20 to 10, while the latter is going from elevation 20 to 0).

[zzzev]

Additionally -- though I'm less sure of this part -- the top Material should probably also be casting a shadow on the AppBar, which has an elevation of 6.0 vs. the Material's elevation of 20.0, but instead the Material has a shadow cast onto it from the AppBar.

[Hixie]

We don't do "real" shadows on Android and iOS, so I wouldn't expect the shadows to paint according to the elevations (e.g. the blue material should paint under the white material and the appbar).

It's weird that the white and orange boxes don't paint shadows on their previous siblings though...

[Hixie]

What happens if you flip the order of the boxes and use verticalDirection: VerticalDirection.up on the column?

[zzzev]

With your suggested change:

This makes more sense, but even with everything you mention I'm surprised the blue Material isn't casting a shadow upwards onto the scaffold like the orange one does in the first screenshot.

This also makes me even more confused about why the white one has no shadow in the first screenshot, very confusing. I think there must be some bug here, though I'm not sure how to dig in further exactly.

Aside from this behavior, a question: given this, if we do want to control the z-indexing more explicitly (i.e. to enable a layout like the one implied by the first example), is using a Stack or other more complex layout widget the way to go? It would be nice if we could get the layout behavior or row/column but decoupled from the ordering of rendering, i.e. allowing us to specify render ordering (in terms of timing, not layout), sort of like the inverse of how flex-box in css allows you to specify the order property.

[Hixie]

There's definitely a bug here, though I can't imagine what it is. It's almost like we're clipping more than we should...

To control the paint order, you can use verticalDirection, that's basically what I was testing above. We don't have a trivial way with Column to control the order in more precision than that. You can of course make your own layout widgets and then you can have them paint in whatever order you want.

[JeffersonBledsoe]

Just came across this myself and a quick workaround is to reverse the order of children in the column and set the verticalDirection to VerticalDirection.up. This causes the drop shadow to be drawn correctly.

[TahaTesser]

Issue still exist

Code Sample

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Material App',
      theme: ThemeData.dark(),
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: new Text('Test'),
      ),
      body: new Column(
        children: <Widget>[
          new Material(
            color: Colors.blue.shade500,
            child: new Container(height: 100.0),
            elevation: 20.0,
          ),
          new Material(
            color: Colors.white,
            child: new Container(height: 100.0),
            elevation: 10.0,
          ),
          new Material(
            color: Colors.orange.shade500,
            child: new Container(height: 100.0),
            elevation: 20.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!

[Katekko]

The issue still exist on beta: 1.22.0-12.0.pre

[darshankawar]

Issue replicable on latest stable and master.

latest stable and master flutter doctor -v

[✓] 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 (7 days 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-6222593)
    • 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.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 46.0.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)

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

[✓] Connected device (1 available)
    • SM G975F (mobile) • RZ8M802WY0X • android-arm64 • Android 10 (API 29)

• No issues found!


[✓] Flutter (Channel master, 1.26.0-2.0.pre.64, on Mac OS X 10.15.4 19E2269
    darwin-x64, locale en-IN)
    • Flutter version 1.26.0-2.0.pre.64 at
      /Users/dhs/documents/Fluttersdk/flutter
    • Framework revision 9ff4326e1f (26 hours ago), 2020-12-17 06:19:05 +0000
    • Engine revision 6edb402ee4
    • Dart version 2.12.0 (build 2.12.0-157.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-6222593)
    • 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

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

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 46.0.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)

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

[✓] Connected device (3 available)
    • sdk gphone x86 arm (mobile) • emulator-5554 • android-x86    • Android 11
      (API 30) (emulator)
    • 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

• No issues found!

[yahya-uddin]

Any update on this issue?

[darshankawar]

Verified on latest versions and observed that the issue persists.

stable, master flutter doctor -v

[✓] Flutter (Channel stable, 3.3.10, on macOS 12.2.1 21D62 darwin-x64, locale
    en-GB)
    • Flutter version 3.3.10 on channel stable at
      /Users/dhs/documents/fluttersdk/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 135454af32 (15 hours ago), 2022-12-15 07:36:55 -0800
    • Engine revision 3316dd8728
    • Dart version 2.18.6
    • DevTools version 2.15.0

[!] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ! Flutter recommends a minimum Xcode version of 13.
      Download the latest version or update via the Mac App Store.
    • CocoaPods version 1.11.2

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

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

[✓] Connected device (5 available)
    • SM G975F (mobile)       • RZ8M802WY0X • android-arm64   • Android 11 (API 30)
    • Darshan's iphone (mobile)  • 21150b119064aecc249dfcfe05e259197461ce23 •
      ios            • iOS 14.4.1 18D61
    • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729     •
      ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • macOS (desktop)            • macos                                    •
      darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
    • Chrome (web)               • chrome                                   •
      web-javascript • Google Chrome 98.0.4758.80

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

! Doctor found issues in 1 category.

[!] Flutter (Channel master, 3.7.0-13.0.pre.51, on macOS 12.2.1 21D62
    darwin-x64, locale en-GB)
    • Flutter version 3.7.0-13.0.pre.51 on channel master at
      /Users/dhs/documents/fluttersdk/flutter
    ! Warning: `flutter` on your path resolves to
      /Users/dhs/Documents/Fluttersdk/flutter/bin/flutter, which is not inside
      your current Flutter SDK checkout at
      /Users/dhs/documents/fluttersdk/flutter. Consider adding
      /Users/dhs/documents/fluttersdk/flutter/bin to the front of your path.
    ! Warning: `dart` on your path resolves to
      /Users/dhs/Documents/Fluttersdk/flutter/bin/dart, which is not inside your
      current Flutter SDK checkout at /Users/dhs/documents/fluttersdk/flutter.
      Consider adding /Users/dhs/documents/fluttersdk/flutter/bin to the front
      of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 6441a7dc62 (3 hours ago), 2022-12-22 20:38:18 -0500
    • Engine revision 12badb5459
    • Dart version 3.0.0 (build 3.0.0-60.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.

[!] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ! Flutter recommends a minimum Xcode version of 13.
      Download the latest version or update via the Mac App Store.
    • CocoaPods version 1.11.2

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

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

[✓] Connected device (5 available)
    • SM G975F (mobile)       • RZ8M802WY0X • android-arm64   • Android 11 (API 30)
    • Darshan's iphone (mobile)  • 21150b119064aecc249dfcfe05e259197461ce23 •
      ios            • iOS 14.4.1 18D61
    • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729     •
      ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • macOS (desktop)            • macos                                    •
      darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
    • Chrome (web)               • chrome                                   •
      web-javascript • Google Chrome 98.0.4758.80

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

! Doctor found issues in 1 category.