Repository: flutter
Issue: Add overscroll-behaviour for Scrollables
Labels: c: new feature,f: scrolling,c: proposal,P3,team-framework,triaged-framework

### Use case

I want to control how overscroll behaves for nested Scrollables. It would really nice to especially for Flutter Web apps. This is super useful when you have TextField with small amount of lines in a big scrollable area.


Currenly I have SingleChildScrollView, Column inside of it, List of some Widgets, and a TextField with minLines and maxLines set to 4 (this could be any). 


When overscroll occures inside of TextField, the parent SingleChildScrollView gets scrolled as well. For native Web app, this could be easily fixed, using CSS overscroll-behaviour.


To reproduce the case:

1. Create `SingleChildScrollView` in `Scaffold` body
2. Add Column to SingleChildScrollView, wrapped with Center
3. Add some `Container`s with defined width and height (so the SingleChildScrollView will be scrollable)
4. Add TextField with minLines and maxLines set to 4 (for example)

Below the current behaviour:

https://github.com/flutter/flutter/assets/78662639/e9f3c19d-a222-43d2-a989-c99df5a1a7dc

Code:
```
import 'dart:math';

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  List<Widget> generateNDummyContainers({int n = 3}) => List.generate(
        n,
        (index) => Container(
          margin: const EdgeInsets.all(20),
          width: 250,
          height: 250,
          color: Color((Random().nextDouble() * 0xFFFFFF).toInt())
              .withOpacity(1.0),
        ),
      );

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SingleChildScrollView(
          child: Center(
            child: Column(
              children: [
                ...generateNDummyContainers(),
                ConstrainedBox(
                  constraints: const BoxConstraints(maxWidth: 250),
                  child: const TextField(
                    minLines: 4,
                    maxLines: 4,
                    decoration: InputDecoration(
                      filled: true,
                      border: OutlineInputBorder(),
                    ),
                  ),
                ),
                ...generateNDummyContainers(),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
```
For Android it works just fine by default:

![behaviour_mobile](https://github.com/flutter/flutter/assets/78662639/ff2c693d-8993-4a40-b930-f6dbd7fc6b4a)



### Proposal







For Flutter Web apps, it would be nice to have easy workaround for adding overscroll-behaviour as you would do with CSS.

Now, to solve this problem I do like this (simply adding MouseRegion, ValueNotifier and changing it value for my needs):
```
import 'dart:math';

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  List<Widget> generateNDummyContainers({int n = 3}) => List.generate(
        n,
        (index) => Container(
          margin: const EdgeInsets.all(20),
          width: 250,
          height: 250,
          color: Color((Random().nextDouble() * 0xFFFFFF).toInt())
              .withOpacity(1.0),
        ),
      );

  @override
  Widget build(BuildContext context) {
    final scrollPhysicsNotifier = ValueNotifier<ScrollPhysics?>(null);

    return MaterialApp(
      home: Scaffold(
        body: ValueListenableBuilder(
          valueListenable: scrollPhysicsNotifier,
          builder: (context, scrollPhysics, child) => SingleChildScrollView(
            physics: scrollPhysics,
            child: Center(
                child: Column(
              children: [
                ...generateNDummyContainers(),
                ConstrainedBox(
                  constraints: const BoxConstraints(maxWidth: 250),
                  child: MouseRegion(
                    onEnter: (event) {
                      scrollPhysicsNotifier.value =
                          const NeverScrollableScrollPhysics();
                    },
                    onExit: (event) {
                      scrollPhysicsNotifier.value = null;
                    },
                    child: const TextField(
                      minLines: 4,
                      maxLines: 4,
                      decoration: InputDecoration(
                        filled: true,
                        border: OutlineInputBorder(),
                      ),
                    ),
                  ),
                ),
                ...generateNDummyContainers(),
              ],
            )),
          ),
        ),
      ),
    );
  }
}
```

But this solution is not the best, as I need to wrap every 'scrollable' TextField with MouseRegion

PS


[For reference](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior)