How to scroll nested listview separetly in flutter?

I used the two ScrollView, one Scrollview is the mainScrollview of the screen, and another Scrollview is inside of the mainScrollView. If I Scroll the inside Scrollview, the outerScrollview will be never getting scrolled, If I Scroll the outer Scrollview, the inside Scrollview will be never getting scrolled. The main thing is, Whenever the inside Scrollview reaches the top or bottom or is still scrolling, that time also the outerScrollview will be never getting scrolled. Here is my code:-

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

enum ScrollingList {
  none,
  top,
  bottom,
}

class _MyAppState extends State<MyApp> {
  ScrollingList scrollingList = ScrollingList.none;
  ScrollController firstScrollController = ScrollController();
  ScrollController secondScrollController = ScrollController();
  double secondScrollvalue = 0;

  @override
  void initState() {
    secondScrollController.addListener(_scrollListener);
    super.initState();
  }

  _scrollListener() {
    if (secondScrollController.offset >=
            secondScrollController.position.maxScrollExtent &&
        !secondScrollController.position.outOfRange) {
      secondScrollController.jumpTo(secondScrollController.offset - 10);
      print("reach the bottom");
    }
    if (secondScrollController.offset <=
            secondScrollController.position.minScrollExtent &&
        !secondScrollController.position.outOfRange) {
      secondScrollController.jumpTo(secondScrollController.offset + 10);

      print("reach the up");
    }
  }

  @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;
    return MaterialApp(
      home: Scaffold(
        body: SingleChildScrollView(
          controller: firstScrollController,
          physics: const NeverScrollableScrollPhysics(),
          //overall scrollview
          child: Padding(
            padding: const EdgeInsets.all(30),
            child: Column(
              children: [
                // for this box I apply the scrollview
                Container(
                  margin: const EdgeInsets.only(bottom: 30),
                  height: height / 1.5,
                  width: double.infinity,
                  decoration: BoxDecoration(
                      color: Colors.blue,
                      borderRadius: BorderRadius.circular(20)),
                  child: SingleChildScrollView(
                    controller: secondScrollController,
                    physics: const AlwaysScrollableScrollPhysics(),
                    child: Padding(
                      padding: const EdgeInsets.all(30),
                      child: Column(
                        children: [
                          for (var i = 0; i < 5; i++)
                            Container(
                              margin: const EdgeInsets.only(bottom: 30),
                              height: height / 2,
                              width: double.infinity,
                              decoration: BoxDecoration(
                                  color: Colors.teal,
                                  borderRadius: BorderRadius.circular(20)),
                            ),
                        ],
                      ),
                    ),
                  ),
                ),
                // const SizedBox(
                //   height: 20,
                // ),
                Container(
                  height: width / 1.5,
                  width: double.infinity,
                  decoration: BoxDecoration(
                      color: Colors.blue,
                      borderRadius: BorderRadius.circular(20)),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}