Repository: flutter
Issue: Widgets in cacheExtent are not painted properly
Labels: framework,f: scrolling,has reproducible steps,P2,found in release: 2.5,found in release: 2.6,team-framework,triaged-framework

<!-- 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
-->

https://github.com/flutter/flutter/issues/82998 is about shadow flickering behaviour which was fixed after https://github.com/flutter/engine/pull/27124 where more consistent math was used to draw shadows. However, there is some discussion about this new issue as it was originally though to be the same issue.

## Steps to Reproduce

<!-- Please include full steps to reproduce so that we can reproduce the problem. -->

1. Execute `flutter run` on the code sample <!-- (see "Code sample" section below) -->
2. Scroll through the widgets to see how widgets disappear before their shadows are out of view.

*\*The example uses very large coloured shadows to exaggerate the effect so it's more subtle in actual use cases most of the time but it's sometimes very clear as seen in https://github.com/flutter/flutter/issues/31768*

**Expected results:** <!-- what did you want to see? -->
Shadows should stay on screen.

**Actual results:** <!-- what did you see? -->
Shadows disappear suddenly before they are out of view.

<details>
<summary>Code sample</summary>

<!--
      Please create a minimal reproducible sample that shows the problem
      and attach it below between the lines with the backticks.

      To create it you can use `flutter create bug` command and update the `main.dart` file.

      Alternatively, you can use https://dartpad.dev/
      which is capable of creating and running small Flutter apps.

      Without this we will unlikely be able to progress on the issue, and because of that
      we regretfully will have to close it.
-->

```dart
import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: Journal(false)));
}

class Journal extends StatefulWidget {
  final bool animate;
  const Journal(this.animate, {Key? key}) : super(key: key);
  @override
  _JournalState createState() => _JournalState();
}

class _JournalState extends State<Journal> with TickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: SizedBox(
          // height: 400,
          child: CustomScrollView(
            cacheExtent: 1000,
            slivers: [
              SliverToBoxAdapter(
                child: JournalEntry(
                  date: 'Jan 18, 2021',
                  entryText:
                      'Amet ea aute reprehenderit occaecat incididunt excepteur anim id reprehenderit ad voluptate.',
                  shadowColor: Colors.green,
                ),
              ),
              SliverToBoxAdapter(
                child: JournalEntry(
                  date: 'Jan 18, 2021',
                  entryText:
                      'Amet ea aute reprehenderit occaecat incididunt excepteur anim id reprehenderit ad voluptate.',
                  shadowColor: Colors.blue,
                ),
              ),
              SliverToBoxAdapter(
                child: JournalEntry(
                  date: 'Jan 18, 2021',
                  entryText:
                      'Amet ea aute reprehenderit occaecat incididunt excepteur anim id reprehenderit ad voluptate.',
                  shadowColor: Colors.orange,
                ),
              ),
              SliverToBoxAdapter(
                child: JournalEntry(
                  date: 'Jan 18, 2021',
                  entryText:
                      'Amet ea aute reprehenderit occaecat incididunt excepteur anim id reprehenderit ad voluptate.',
                  shadowColor: Colors.purple,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class JournalEntry extends StatefulWidget {
  final String date;
  final String entryText;
  final Color shadowColor;

  const JournalEntry(
      {Key? key,
      required this.date,
      required this.entryText,
      required this.shadowColor})
      : super(key: key);

  @override
  _JournalEntryState createState() => _JournalEntryState();
}

class _JournalEntryState extends State<JournalEntry> {
  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.white.withOpacity(0),
      child: Container(
        margin: const EdgeInsets.symmetric(horizontal: 25, vertical: 15),
        padding: const EdgeInsets.fromLTRB(20, 15, 20, 18),
        decoration: BoxDecoration(
          color: Theme.of(context).backgroundColor,
          borderRadius: BorderRadius.circular(20),
          boxShadow: [
            BoxShadow(
              color: widget.shadowColor.withOpacity(0.42),
              blurRadius: 20,
              spreadRadius: 50,
            ),
          ],
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            // * Heading
            Text(
              widget.date,
              style: Theme.of(context).textTheme.subtitle2,
            ),
            const SizedBox(height: 10),
            const Placeholder(fallbackHeight: 160),
            const SizedBox(height: 10),
            Text(
              widget.entryText,
              style: Theme.of(context).textTheme.bodyText2,
            ),
          ],
        ),
      ),
    );
  }
}


```

</details>

<details>
  <summary>Logs</summary>



<!--
     Run `flutter analyze` and attach any output of that command below.
     If there are any analysis errors, try resolving them before filing this issue.
-->
`flutter analyze`:
```
No issues found! (ran in 1.5s)
```

<!-- Finally, paste the output of running `flutter doctor -v` here. -->
`flutter doctor -v`:
```
[✓] Flutter (Channel master, 2.6.0-12.0.pre.379, on macOS 11.6 20G165
    darwin-arm, locale en-AE)
    • Flutter version 2.6.0-12.0.pre.379 at
      /Users/hadymashhour/Developer/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 93da78f896 (2 days ago), 2021-10-16 07:18:02 -0400
    • Engine revision faa45f497f
    • Dart version 2.15.0 (build 2.15.0-226.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/hadymashhour/Library/Android/sdk
    • Platform android-31, build-tools 31.0.0
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.0)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2020.3)
    • 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.10+0-b96-7249189)

[✓] VS Code (version 1.61.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.27.0

[✓] Connected device (3 available)
    • iPhone 13 Pro (mobile) • DD5DC257-9F7D-4B47-8C22-4CEE8A753F56 • ios
      • com.apple.CoreSimulator.SimRuntime.iOS-15-0 (simulator)
    • macOS (desktop)        • macos                                •
      darwin-arm64   • macOS 11.6 20G165 darwin-arm
    • Chrome (web)           • chrome                               •
      web-javascript • Google Chrome 94.0.4606.81

• No issues found!
```

</details>


<!--
      Consider also attaching screenshots and/or videos to better
      illustrate the issue.

      You can upload them directly on GitHub.
      Beware that video file size is limited to 10MB.
-->

See https://github.com/flutter/flutter/issues/82998#issuecomment-942443932 for screen recordings.