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
],
)
);
}
}
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>[
Use Listview Like
Column(
children: <Widget>[
Flexible(
child: ListView(...), // It will provide scroll functionality with your column
)
],
)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With