I am trying to create the nested Listview using the two listview.builder but the problem is it causing unbounded height. I have tried all the possible solution like using CustomScrollview with sliver and using expanded widget but didn’t worked .
Using shrink Wrap will solve the problem but it is quite expensive as it will render all widget at once and also I don’t want to use the constraint height.
I might be wrong will using it so can anyone help me out.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({
super.key,
});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: const Text("Multiple List"),
),
body: ListView.builder(
itemCount: 10,
itemBuilder: (contex, index) {
return const NestedWidget();
},
),
);
}
}
class NestedWidget extends StatelessWidget {
const NestedWidget({super.key});
@override
Widget build(BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
height: 30,
width: double.infinity,
color: Colors.blueAccent,
child: const Text("Hello I am Testing"),
),
ListView.builder(
physics: const NeverScrollableScrollPhysics(),
itemCount: 100,
itemBuilder: (context, index) {
return ListTile(
title: Text((index + 1).toString()),
);
},
)
],
);
}
}
2
Answers
You dont need to put nested ListView which is causing the layout issue. You can loop inside Column
Also I will suggest using CustomScrollView for this case.
Please add shrinkWrap: true in the Nested widget, below is your updated nested widget :