Repository: flutter
Issue: AppBar's shadow is different from dropdown's shadow at the same elevation
Labels: framework,f: material design,d: api docs,has reproducible steps,P3,found in release: 3.3,found in release: 3.6,team-design,triaged-design

<!-- Thank you for using Flutter!

     If you are looking for support, please check out our documentation
     or consider asking a question on Stack Overflow:
      * https://flutter.dev/
      * https://api.flutter.dev/
      * https://stackoverflow.com/questions/tagged/flutter?sort=frequent

     If you have found a bug or if our documentation doesn't have an answer
     to what you're looking for, then fill out the template below. Please read
     our guide to filing a bug first: https://flutter.dev/docs/resources/bug-reports
-->

## Steps to Reproduce

<!-- You must include full steps to reproduce so that we can reproduce the problem. -->

Put the demo page into your flutter app to see the shadow problem.
```dart
import 'package:flutter/material.dart';

class DemoPage extends StatefulWidget {
  @override
  _DemoPageState createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  String dropdownValue = 'One';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 4,
        title: Text("Demo"),
      ),
      body: Center(
        child: DropdownButton<String>(
          value: dropdownValue,
          icon: Icon(Icons.arrow_downward),
          iconSize: 24,
          elevation: 4,
          style: TextStyle(color: Colors.deepPurple),
          underline: Container(
            height: 2,
            color: Colors.deepPurpleAccent,
          ),
          onChanged: (String newValue) {
            setState(() {
              dropdownValue = newValue;
            });
          },
          items: <String>['One', 'Two', 'Free', 'Four']
              .map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: SizedBox(
                width: 300,
                child: Text(value),
              ),
            );
          }).toList(),
        ),
      ),
    );
  }
}
```

**Expected results:** <!-- what did you want to see? -->
Expect AppBar's shadow is the same with dropdown's shadow  at the same elevation.

**Actual results:** <!-- what did you see? -->
AppBar's shadow is different from dropdown's shadow at the same elevation.

![image](https://user-images.githubusercontent.com/9800116/101764565-27a1c100-3b1b-11eb-99fe-d5a0ec4f5ead.png)

## Some Findings
After reading flutter's source code, we find AppBar widget uses `Material` widget which draws the shadow. `Material` widget uses APIs provided by flutter engine to actually draw the shadow. But DropdownButton's menus simulates a shadow with `BoxDecoration` according to the `kElevationToShadow` map.

https://github.com/flutter/flutter/blob/f55117840818eae1b3972a6abe9d2784fc8fb9b4/packages/flutter/lib/src/material/shadows.dart#L9-L60

Shadows drawn by `kElevationToShadow` respect the Material Design spec, But shadows drawn by `Material` widget not respect the spec. You can compare shadows in the **demo page** with shadows of Elevation in  Material-Baseline-Design-Kit in Figma(https://www.figma.com/file/QlQ7WusPHo5LLeCFTw9tZz/Material-Baseline-Design-Kit-(Community)?node-id=0%3A11). 

So, my question is why shadows at the same elevation is different when separately implemented by the `Material` widget and  the `kElevationToShadow` way?