Listview.builder render all view issue if its child of ScrollView/ Listview/ Listview.builder flutter

As I have a view hierarchy that has a dynamic list widget (using listview.builder arround 100+ view same time), that child of the Listview/ singlechildscrollview.

the issue is when its child of listview/ scroll view at that time Listview.builder render all widget inside it.

I want render only view those displayed as listview.builder behave. (recycle when scroll)

runApp(MyApp(
items: List<String>.generate(100, (i) => 'Item $i'),
));


class MyApp extends StatelessWidget {
final List<String> items;
const MyApp({super.key, required this.items});
@override
Widget build(BuildContext context) {
const title = 'Long List';
return MaterialApp(
  title: title,
  home: Scaffold(
      appBar: AppBar(
        title: const Text(title),
      ),
      body: ListView(
        
        children: [
          Text("Test nexted List rendering"),
          ListView.builder(
            shrinkWrap: true,
            itemCount: items.length,
            itemBuilder: (context, index) {
              print(index);
              return ListTile(
                title: Text(items[index]),
              );
            },
          ),
        ],
      )),
);
}
}

Edited

The above example is just a sample, I cant use parent as a Column instead of Listview.
Because My hierarchy is very big. it's a CMS kind of page with around 3-4 parent Listview is there.

Listview > Listview > Listview > Listview.

shrinkWrap: true isnt good. You can use CustomScrolView.

class MyApp extends StatelessWidget {
  final List<String> items;
  const MyApp({super.key, required this.items});
  @override
  Widget build(BuildContext context) {
    const title = 'Long List';
    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(title),
        ),
        body: CustomScrollView(
          slivers: [
            SliverToBoxAdapter(
              child: Text("Test nexted List rendering"),
            ),
            SliverList(
                delegate: SliverChildBuilderDelegate(childCount: items.length,
                    (context, index) {
              print(index);
              return ListTile(
                title: Text(items[index]),
              );
            }))
          ],
        ),
      ),
    );
  }
}

More about ShrinkWrap vs Slivers | Decoding Flutter

Or on your general case, if you like to have text always on top, use body:Column and Expnaded(child:ListView by removing shrinkWrap: true.

Read here: https://docs.flutter.dev/cookbook/lists/long-lists

> The standard ListView constructor works well for small lists. To work
> with lists that contain a large number of items, it’s best to use the
> ListView.builder constructor.
>
> In contrast to the default ListView constructor, which requires
> creating all items at once, the ListView.builder() constructor creates
> items as they’re scrolled onto the screen.

Your ListView.builder rendered all items its because the parent ListView is rendered all the children widget inside it.

Workaround:

change the ListView with Column

Column(
 childrem: [
    Expanded(child: ListView.builder)
  ]
)

Preview: only rendered 15 items inside listview builder eventhough its shrinkwrap: true

Don't use ListView with shrinkWrap = true. More about that here.

Alternatives:

Column with property mainAxisSize: MainAxisSize.min and using Flexible() to let it expand as much space that it available to the children.

Column(
  mainAxisSize: MainAxisSize.min,
  children: [
     items.map((item) => Flexible(child: Text(item))).toList(),
  ],
)