CODEWITHSUNDEEP
listviewflutterflutter-layout
Lucas Bernardi
Lucas Bernardi

Reputation: 117

How do I add Columns inside of a ListView in Flutter?

I'm new to flutter and have been practicing UI building in the last couple days. The home page of my fake Music Player app is made out of a ListView of sections (New Songs, Latest Songs, hits, etc). Each section has A title, and another ListView of recent musics, as showed in this link: Using Column

This picture was taken using a Column instead of a list. But as soon as I reach the bottom of the screen, the column is no longer useful (as it's meant to be). So I need to use a ListView instead. However, as soon as I do that, nothing shows up on the body of the app. Like this: Using List View Here's this section of the code:

class PageBody extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new Container(
      alignment: Alignment.center,
      padding: const EdgeInsets.fromLTRB(18.0, 0.0, 0.0, 0.0),
      child: new ListView( // <-- If it's a column, it 'works'
        children: [
          new SectionTitle(title: 'Trending now'), // <-- Makes the section title
          new Padding(padding: new EdgeInsets.all(4.0)), // <-- Add some space
          new Expanded(child: new MusicsListView(musics: _trendingSongsList)), // <-- Makes the music List view
        ],
      )
    );
  }
}

Upvotes: 8

Views: 15465

Answers (3)

Jitesh Mohite
Jitesh Mohite

Reputation: 34280

Use Listview Like

Column(
  children: <Widget>[
    Flexible(
      child: ListView(...), // It will provide scroll functionality with your column
    )
  ],
)

Upvotes: 2

Edman
Edman

Reputation: 5605

If you look into the logs you'll probably see an error saying Expanded widgets must be placed inside Flex widgets.

If you then remove the Expanded widget, you get another error saying Horizontal viewport was given unbounded height. Which makes sense. Your nested list is horizontal, so it tries to expand in the cross axis, but the cross axis is another list so it can expand infinitely.

So you need to constrain the height of this horizontal list view. One way to do so is through a SizedBox, such as

ListView(
    children: [
      new SectionTitle(title: 'Trending now'),
      new Padding(padding: new EdgeInsets.all(4.0)),
      new SizedBox(
        height: 300.0 // -> or whatever makes sense for you
        child: new MusicsListView(musics: _trendingSongsList)),
    ],
  )

Upvotes: 2

Tree
Tree

Reputation: 31431

Easy solution for this is to just used SingleChildScrollView. If you need one scrollable column, wrap that column with it.

        SingleChildScrollView(
          child: Column(
            children: <Widget>[

Upvotes: 5

Related Questions