How to use listview with other widgets? - flutter

Question

I want to use ListView with other widgets , but I can't. When I use container for Listview, I can't view any other widgets. How can I do it?
Scaffold(
body: SingleChildScrollView(
child: Column(
children: <Widget>[
ListView.builder(),
RaisedButton(
child: Text('Text'),
onPressed:(){})
])));

Answer 1

You shouldn't nest scroll views at all if you are trying to show some widgets based on a list, dart lets you use for inside any collection also you can use List.generate, or list.map with the spread operator
Scaffold(
body: SingleChildScrollView(
child: Column(
children: <Widget>[
for(final item in list) widget,
RaisedButton(child: Text('Text'), onPressed: () {})
],
),
),
);
or
Scaffold(
body: SingleChildScrollView(
child: Column(
children: <Widget>[
...list.map((item)=> widget).toList(),
RaisedButton(child: Text('Text'), onPressed: () {})
],
),
),
);
or
Scaffold(
body: SingleChildScrollView(
child: Column(
children: <Widget>[
...List.generate(list.length, (index)=> widget).toList(),
RaisedButton(child: Text('Text'), onPressed: () {})
],
),
),
);

Answer 2

This is because you are using ListView inside Column, both ListView and Column take the full screen available to them, as this way we can only see ListView on the screen, to resolve this we have to shrink ListView to its exact size, for it shrinkwrap: true is used.
ListView.Builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
)
physics: NeverScrollableScrollPhysics(), is used here to stop ListView scrolling, you have added SingleChildScrollView() which scroll entire page

Answer 3

Add ShrinkWrap to The ListView
Scaffold(
body: SingleChildScrollView(
child: Column(
children: <Widget>[
ListView(
shrinkWrap: true,
children:[
Container(),
Container(),
]
),
RaisedButton(
child: Text('Text'),
onPressed:(){})
])));
for More Advanced Scrolling Challenges like More than One ListView in Column I Suggest you add a ScrollPhysics

Answer 4

u need use Expanded here and set data to ListView.builder
final items = List<String>.generate(10000, (i) => 'Item $i');
Column(children: [
Expanded(
child: ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(items[index]),
);
},
),
AnyWidget(...)
])

Answer 5

You have to wrap your ListView widget with Expanded or if you want to wrap it with Container then you must have to give Container height or width

Answer 6

Try this Code...
Scaffold(
body: SingleChildScrollView(
child: Column(
children: [
ListView.builder(
physics: NeverScrollableScrollPhysics(),
itemCount: 4,
shrinkWrap: true,
itemBuilder: (context, index) {
return Text('Hello');
}
),
RaisedButton(
child: Text('Text'),
onPressed: () {}
)
]
)
)
);

Answer 7

In this example, the ListView and the other widget (a Container with yellow color) are both children of the Column widget. By doing this, you can ensure that the ListView and the other widgets can both be displayed on the screen.
Column(
children: <Widget>[
Container(
height: 200,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(
width: 160.0,
color: Colors.red,
),
Container(
width: 160.0,
color: Colors.blue,
),
Container(
width: 160.0,
color: Colors.green,
),
],
),
),
Container(
height: 200,
color: Colors.yellow,
),
],
)