nested_overscroll 0.0.1

A widget that allows nested scrollable widgets to overscroll their parent.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:nested_overscroll/nested_overscroll.dart';

void main() {
  runApp(const MaterialApp(home: Scaffold(body: Center(child: MainApp()))));
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 500,
      child: NestedOverscroll(
        child: ListView(
          physics: const BouncingScrollPhysics(), // enable effect only here
          children: [
            SizedBox(
              height: 300,
              child: PageView(
                scrollDirection: Axis.vertical,
                children: [
                  Container(color: Colors.orange, child: const Text('Page 1')),
                  ListView(
                    children: [
                      const Center(child: Text('Page 2')),
                      Container(height: 200, color: Colors.red),
                      const Divider(),
                      Container(height: 200, color: Colors.green),
                      const Divider(),
                      Container(height: 200, color: Colors.blue),
                      const Divider(),
                    ],
                  ),
                  Container(color: Colors.purple, child: const Text('Page 3')),
                ],
              ),
            ),
            const Divider(),
            SizedBox(
              height: 300,
              child: ListView(
                children: [
                  Container(height: 50, color: Colors.red),
                  const Divider(),
                  SizedBox(
                    height: 300,
                    child: PageView(
                      scrollDirection: Axis.vertical,
                      children: [
                        Container(
                          color: Colors.red,
                          child: const Text('Page 1'),
                        ),
                        Container(
                          color: Colors.blue,
                          child: const Text('Page 2'),
                        ),
                      ],
                    ),
                  ),
                  const Divider(),
                  Container(height: 50, color: Colors.blue),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}