Repository: flutter
Issue: UI creates shadow-like artifacts on macOS Desktop app w/ transparent background
Labels: engine,platform-mac,c: rendering,a: desktop,has reproducible steps,P2,found in release: 3.7,found in release: 3.9,team-macos,triaged-macos

![image](https://user-images.githubusercontent.com/1448144/223553236-b8ed0ca6-39f3-40ee-a7b1-ac1a1c87d5f9.png)

## Steps to Reproduce

<!-- Please include full steps to reproduce so that we can reproduce the problem. -->

1. Execute `flutter run` on the code sample on `macOS`.
2. Drag app window in front of a lighter / white background.
3. Click on the "[1] Click me first!" button.
4. Click on a different app, or the desktop, so that this app loses focus.
5. Click on the "[2] De-focus the app..." button.
6. Alternate between focusing and de-focusing the app to see different shadow-outlines.

Does NOT repro on Windows 11.
Requires that your app background be transparent -- see **Code sample** below.
Does repro with both Flutter 3.7.6 and 3.3.10.

The app generates the shadow-like artifacts WITHOUT changing UI element layout/position, but the bug is much more obvious when you do move UI around.

**Expected results:** 
The behavior that a `Windows` build of similar code has:
- When the app has a transparent background, UI elements only display user or Theme-specified shadows.
- Changing app focus between UI state changes results in consistent UI rendering.

**Actual results:** 
- When the app has a transparent background, UI elements implicitly render mystery shadows that also get left behind when you move UI elements. 
- Changing app focus between state changes further creates different UI rendering results.

<details>
<summary>Code sample</summary>

macOS: 
Add two lines to `macos/Runner/MainFlutterWindow.swift`

```swift
import Cocoa
import FlutterMacOS

class MainFlutterWindow: NSWindow {
  override func awakeFromNib() {
    let flutterViewController = FlutterViewController.init()
    flutterViewController.backgroundColor = .clear //<--- ADDED <---
    let windowFrame = self.frame
    self.contentViewController = flutterViewController
    self.setFrame(windowFrame, display: true)

    RegisterGeneratedPlugins(registry: flutterViewController)
    self.backgroundColor = NSColor.clear //<--- ADDED <---

    super.awakeFromNib()
  }
}
```
`main.dart`
```dart
import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.transparent,
        body: BuggedShadowWidget(),
      ),
    );
  }
}

class BuggedShadowWidget extends StatefulWidget {
  const BuggedShadowWidget({super.key});

  @override
  State<BuggedShadowWidget> createState() => _BuggedShadowWidgetState();
}

class _BuggedShadowWidgetState extends State<BuggedShadowWidget> {
  int step = 0;

  String get upText => step < 1
      ? 'Click me first!'
      : 'I left the "Click me first!" shadow.\n It\'s visible while the app is focused';

  String get downText => step < 2
      ? 'DE-FOCUS the app... then click me.'
      : 'I left the "De-focus the app..." shadow.\nIt\'s only visible if the app is UN-focused.';

  void _incrementStep() {
    setState(() {
      step += 1;
    });
  }

  @override
  Widget build(BuildContext context) {
    final upChild = step == 1
        ? Container()
        : OutlinedButton.icon(
            onPressed: () {
              _incrementStep();
            },
            icon: const Icon(Icons.looks_one, size: 50),
            label: Text(upText, style: const TextStyle(fontSize: 16)));
    final downChild = step < 1
        ? Container()
        : OutlinedButton.icon(
            onPressed: () {
              _incrementStep();
            },
            icon: const Icon(Icons.looks_two, size: 50),
            label: Text(downText, style: const TextStyle(fontSize: 16)));

    return SizedBox(
      width: 800,
      height: 600,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment:
            step < 2 ? CrossAxisAlignment.start : CrossAxisAlignment.end,
        children: [
          Container(
              color: Colors.white,
              padding: const EdgeInsets.all(8),
              child: const Text('''
UI leaves outlines + shadows behind when rendered on a transparent app background -- you won't notice the shadows 
unless app is in front of a light-background.\n
If you de-focus the app after launching it, but before clicking "Click me first", a different behavior will 
occur than described below.\n''')),
          Text(
            step < 2
                ? 'Hello World!'
                : 'I left a "Hello World!" shadow\n after alignment changed.',
            style: const TextStyle(
                color: Colors.green, fontWeight: FontWeight.bold, fontSize: 22),
          ),
          upChild,
          downChild,
        ],
      ),
    );
  }
}
```

---

Note -- if you want to confirm this behavior does not exist on Windows, use this code from the `window_manager` package to set the background color to transparent: 
https://github.com/leanflutter/window_manager/blob/main/windows/window_manager.cpp#L411
</details>

<details>
  <summary>Logs</summary>

<!-- Finally, paste the output of running `flutter doctor -v` here. -->

```
flutter doctor -v
[✓] Flutter (Channel stable, 3.7.6, on macOS 12.6.1 21G217 darwin-arm64, locale en-US)
    • Flutter version 3.7.6 on channel stable at /Users/elincoln/flutter
    • Upstream repository ssh://git@github.com/flutter/flutter.git
    • FLUTTER_GIT_URL = ssh://git@github.com/flutter/flutter.git
    • Framework revision 12cb4eb7a0 (6 days ago), 2023-03-01 10:29:26 -0800
    • Engine revision ada363ee93
    • Dart version 2.19.3
    • DevTools version 2.20.1

[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.


[✓] 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 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)

[✓] VS Code (version 1.76.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.60.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 12.6.1 21G217 darwin-arm64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 110.0.5481.177

[✓] HTTP Host Availability
    • All required HTTP hosts are available
```

</details>


https://user-images.githubusercontent.com/1448144/223549762-120d5de2-01d9-413e-8513-2bb5f020e226.mov

Please let me know what else I can do to help!

Edit: Fixed typo (extra `.`) in MainFlutterWindow.swift sample code.