Repository: flutter
Issue: Way to stop PageStorageKey being shared by nested scrollables
Labels: c: new feature,framework,f: scrolling,c: proposal,P3,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 our the template below. Please read
     our guide to filing a bug first: https://flutter.dev/docs/resources/bug-reports
-->

## Use case

### TL;DR
If we add PageStorageKey to a scrollable, say a ListView, in order to preserve its scroll offset, then any scrollable descendant of the ListView under default configuration will end up share the same PageStorageKey, leading to undesired & buggy behavior. We need an easy way to stop the sharing.

### Example use case
The example, which I think is fairly common, is:
1. A vertical ListView whose scroll offset we want to preserve, e.g., when it is under a TabBarView
2. Inside the vertical ListView we have some nested ListView that scroll horizontally, and there is no requirement to preserve their scroll offsets

The following code tries to do this by setting PageStorageKey with the vertical ListView, but has bugs.
```dart
import 'package:flutter/material.dart';

class DemoPage extends StatelessWidget {
  final List<Tab> myTabs = <Tab>[
    Tab(text: 'LEFT'),
    Tab(text: 'RIGHT'),
  ];

  final tabPages = [
    ListView(
      // Here we set PageStorageKey for the vertical ListView
      key: PageStorageKey('left'),
      children: List.generate(100, (index) => Column(
        children: [
          Text('Row $index'),
          Container(
            height: 100,
            width: double.infinity,
            child: ListView(
              scrollDirection: Axis.horizontal,
              children: List.generate(10, (index) =>
                Container(
                  width: 100,
                  height: 100,
                  child: Center(child: Text('$index')),
                )
              ),
            )
          )
        ]
      )),
    ),
    Text(
      'This is the right tab',
      style: const TextStyle(fontSize: 36),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: myTabs.length,
      child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            tabs: myTabs,
          ),
        ),
        body: TabBarView(
          children: tabPages,
        ),
      ),
    );
  }
}
```
The bug is that every horizontal ListView will end up sharing the same PageStorageKey as the vertical ListView, and overwrite each other's scroll offset. To make it worse, if any scrollable's maximum offset is exceeded, the shared offset value will be adjusted and show up differently during the subsequent restoration.

![ezgif-1-efb3f14c78f7](https://user-images.githubusercontent.com/813121/77244604-97041780-6c51-11ea-85c8-5e903bdf4474.gif)

Note that this is a bug at the application level, whereas at flutter level there is no bug since everything is working as designed. In particular, the documentation of PageStorageOffset says:
> PageStorage is used to save and restore values that can outlive the widget. The values are stored in a per-route Map whose keys are defined by the PageStorageKeys for the widget and its ancestors.

AFAIK the bug could be addressed in application code by:
1. Add correct PageStorageKeys to every horizontal ListView, or
2. Construct each horizontal ListView with a ScrollController that sets keepScrollOffset to false,

Though either solution would need to be applied recursively to ALL scrollable descendants.

Nonetheless, I think it is inconvenient and unintuitive that adding PageStorageKey to an outer-layer scrollable would lead to such "side effects" with default configuration, which requires non-trivial fixes.

<!--
     Please tell us the problem you are running into that led to you wanting
     a new feature.

     Is your feature request related to a problem? Please give a clear and
     concise description of what the problem is.

     Describe alternative solutions you've considered. Is there a package
     on pub.dev/flutter that already solves this?
-->

```
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.12.13+hotfix.8, on Mac OS X 10.15.3 19D76, locale en-US)

[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 11.3.1)
[✓] Android Studio (version 3.6)
[!] IntelliJ IDEA Community Edition (version 2019.3)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.43.1)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[✓] Connected device (1 available)

! Doctor found issues in 2 categories.
```

## Proposal

Make it easy to avoid the sharing behavior. (Sorry I do not have a concrete proposal)

<!--
     Briefly but precisely describe what you would like Flutter to be able to do.

     Consider attaching images showing what you are imagining.

     Does this have to be provided by Flutter directly, or can it be provided
     by a package on pub.dev/flutter? If so, maybe consider implementing and
     publishing such a package rather than filing a bug.
-->