Flutter ListView with different widgets and list items

Question

I'm not sure if I'm missing something. I'm playing around with Flutter and I want to build a (simple) view with some text widgets, buttons and other widgets (see picture below). These widgets should be followed by a list of items. The whole view (except the app bar, of course) should be scrollable - not only the items.

That's why I put everything inside a ListView. But I'm not able to do something like this (while items is a map with String values):

...    
home: Scaffold(
  appBar: AppBar(
    title: Text('App bar'),
  ),
  body: new ListView(
    children: <Widget>[
      new Text('Some Text'),
      new FlatButton(...),
      new Image.asset(...),
      items.map((item)=>new Padding(
        child: new Text(item.title),
      )).toList()
    ],
  ),
),
...

What is the right way to get the desired view?

Thanks in advance!

You could achieve that using Slivers, take a look a this great post by one of the Flutter team : https://medium.com/flutter-io/slivers-demystified-6ff68ab0296f — diegoveloper, Oct 26 '18 at 23:19
another option is using a SingleChildScrollView , Column and create List and add your items programmatically with the order you want, after you have a list, set into the children property of your Column — diegoveloper, Oct 26 '18 at 23:26
here is a good solution for listview with extra widgets: https://stackoverflow.com/a/58281604/1068975 — aknd, Oct 08 '19 at 08:16

score 5 · Answer 1 · answered Oct 24 '19 at 12:06

You could use ListView.builder since is more efficient, because the items are only created when they're scrolled onto the screen. And in the first position you could put the widgets that aren't from the list, like this:

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('App bar')),
    body: ListView.builder(
      itemCount: items.length + 1,
      itemBuilder: (context, index) {
        if (index == 0) {
          return Column(
            children: <Widget>[
              Text('Some Text'),
              FlatButton(child: Text('A flat button'), onPressed: () {}),
              Image.asset("An image"),
            ],
          );
        }
        return Text('Item ${items[index].title}');
      },
    ),
  );
}

score 3 · Answer 2 · answered Aug 29 '19 at 08:00

You may use the following code in the body.

body: SingleChildScrollView( //add to Scroll whole screen
    child: Column(
        children: <Widget>[
            new Text('Some Text'), //Element-1
            new FlatButton(...),   //Element-2
            new Image.asset(...),  //Element-3
            items.map((item)=>new Padding(child: new Text(item.title),)).toList(), //Element-4
            ListView.separated(    //Element-5
                shrinkWrap: true,  //this property is must when you put List/Grid View inside SingleChildScrollView
                physics: NeverScrollableScrollPhysics(), //this property is must when you put List/Grid View inside SingleChildScrollView
                itemCount: listItems.length,
                itemBuilder: (context, i) {
                    return ListTile(
                        title: Text(listItems[i].Title),
                        subtitle: Text(listItems[i].Description),
                    );
                },
                separatorBuilder: (context, i) {
                    return Divider();
                },
            ),
        ],
    ),
),

when scrolling listview others area not not scrolling(text and image) — BloodLoss, Oct 24 '19 at 09:13

BloodLoss · Answer 3 · 2019-10-24T18:17:13.020

You can use like this

 ListView(
     shrinkWrap: true,
     children: <Widget>[
          Text('hi'),//first widget
          Text('hi2'),//second widget
          Flex(
              direction: Axis.horizontal,children: <Widget>[
                      Expanded(
                        child: ListView.builder(
                            shrinkWrap: true,
                            itemCount: 3,
                            itemBuilder: (BuildContext context, int index){
                              return ...

Or Just tweak the count and the index.

 ListView.builder(
      itemCount: get.length + 2, // add room for the two extra
      itemBuilder: (BuildContext context, int index) {
        if(index == 0){
         return Text('Custom any widget');
        }
        if(index == 1){
         return Text('Custom any widget');
        }
        index -= 2; // decrement index so that it's now in the range [0..length]
        return Bubble(
            style: styleSomebody,
            child: Container(
              ... 
            ));
      }),

score -2 · Answer 4 · answered Oct 26 '18 at 23:09

-2

Children in ListView are list of itens, so, if you want to display a button or text, your widget tree is:

Scaffold
 appBar: AppBar
 body:  Container
   child: ListView       
            ListItem
            ListItem
            ListItem

Then, in your case, you can use a Column to display "fixed widget" (text, button) + listview scrollable:

Scaffold
 appBar: AppBar
 body:  Column 
     [
        Text,
        Buttom,
        ListView
          ListItem
          ListItem
          ListItem
     ]

answered Oct 26 '18 at 23:09

Rubens Melo

1,829
9
20

I'm afraid putting a ListView under Text and Button inside of a column makes only the ListView scrollable. I want everything inside the column to be scrollable. – user2148956 Oct 28 '18 at 20:43
got it. for that case, slivers fit well. congrats – Rubens Melo Oct 29 '18 at 02:11

Flutter ListView with different widgets and list items

4 Answers4