Two listview builders in a parent listview but not rendering. Only the visibles instead rendering all at once

Question

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     body: ListView(
       children: <Widget>[
         _firstListView(),
         _secondListView(),
      ],
    ),
  );
}

Main class that calls other listView builders

Widget _firstListView() {
return Container(
  color: Colors.green,
  child: ListView.builder(
    itemCount: 200,
    shrinkWrap: true,
    physics: const ClampingScrollPhysics(),
    itemBuilder: (context, index) => RecCell(
      index: index,
    ),
  ),
);
}

first listView builder

Widget _secondListView() {
return Container(
  color: Colors.red,
  child: ListView.builder(
    itemCount: 200,
    shrinkWrap: true,
    physics: const ClampingScrollPhysics(),
    itemBuilder: (context, index) => ListTile(title: Text("Second $index")),
  ),
);
 }

the second listView builder

RecCell is another statefull widget that prints in init method when the widget is build and it build 200 times on restart and never recreated on scrolling

I want them to reuse each time parent listview scrolls any help will appreciated..

EDIT 27 APRIL 2023

Use Custom scroll view to do weird or complex scrolling

Answer 1

I did this and worked for me

Map<String, dynamic> d = {
   0:..,listView widget,
   1:[...list of widgets]
}

I am making a map containing all my widgets, and in the build method I am returning a listview with those widgets

return ListView(
  children:[
     d[0],
     ...d[1] // this will extract each widget from the list and insert it to list view
  ]
)

In this way my d[0] is horizontal listview builder and d1 are other widget that I am adding into parent list view directly now they all are rerendering when visible. Had to do some changing in my previous code

Final output:

output