Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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
        ],
      )
    );
  }
}
like image 661
Lucas Bernardi Avatar asked Jan 28 '23 23:01

Lucas Bernardi


2 Answers

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>[
like image 118
Tree Avatar answered Feb 08 '23 22:02

Tree


Use Listview Like

Column(
  children: <Widget>[
    Flexible(
      child: ListView(...), // It will provide scroll functionality with your column
    )
  ],
)
like image 41
Jitesh Mohite Avatar answered Feb 08 '23 22:02

Jitesh Mohite