How to use listview with other widgets?

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:(){})
])));

Add the listview in expanded so that it takes up what space is left within the column. I believe there is no reason to have singlechildscrollview. `Expanded(child: ListView.builder())` — Chance, Oct 15 '21 at 12:20
Does this answer your question? [How to add a ListView to a Column in Flutter?](https://stackoverflow.com/questions/45669202/how-to-add-a-listview-to-a-column-in-flutter) — Chance, Oct 15 '21 at 12:27
Can you write with proper English please?No offense , i did not understand from anything you said. @JiteshMohite — umarbeyoglu, Oct 19 '21 at 15:42

score 2 · Accepted Answer · answered Oct 15 '21 at 12:36

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: () {})
      ],
    ),
  ),
);

The first one solved it.Thanks a lot! – umarbeyoglu Oct 15 '21 at 12:36 — umarbeyoglu, Oct 15 '21 at 12:36

score 1 · Answer 2 · answered Oct 15 '21 at 12:25

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

score 0 · Answer 3 · answered Oct 15 '21 at 12:20

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

score 0 · Answer 4 · answered Oct 15 '21 at 12:22

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(...)
])

score 0 · Answer 5 · answered Oct 15 '21 at 12:22

0

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

answered Oct 15 '21 at 12:22

Hassan Gujjar

288
3
13

score 0 · Answer 6 · edited Oct 15 '21 at 21:45

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: () {}
         )
       ]
     )
   )
 );

score 0 · Answer 7 · answered Feb 03 '23 at 03:34

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,
    ),
  ],
)

How to use listview with other widgets?

7 Answers7