Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to implement Nested ListView in Flutter?

Tags:

flutter

What is the preferred way to achieve a nested ListView, or in other words, ListView Widgets that could be included within a scrollable parent?

Imagine a "Reports" page, where a section is an itemized list.

like image 890
Paul Avatar asked Jul 23 '17 23:07

Paul


People also ask

How do you implement a nested list in flutter?

If you want to have the inner ListView be scrollable independently of the main scroll view, you should use NestedScrollView . Otherwise, use a CustomScrollView . Here is some code illustrating the NestedScrollView approach. The "main" scroll, the Nested, does not scroll at all.

How do I use ListView separated in flutter?

separated. In Flutter, you can use ListView. separated to easily create a list view whose items are separated by separators (or dividers). A separator only appears between two list items and never stands before the first or sits after the last item.


Video Answer


2 Answers

For child ListView, use that parameter:

shrinkWrap: true, physics: ClampingScrollPhysics(), 
like image 134
Serdar Polat Avatar answered Oct 09 '22 09:10

Serdar Polat


Adding physics: ClampingScrollPhysics() and shrinkWrap: true did the trick for me.

sample code:

@override Widget build(BuildContext context) {   return Container(     child: Column(       mainAxisSize: MainAxisSize.min,       children: <Widget>[         Expanded(           child: ListView.builder(               shrinkWrap: true,               itemCount: 123,               itemBuilder: (BuildContext context, int index) {                 return Column(                   crossAxisAlignment: CrossAxisAlignment.start,                   children: <Widget>[                     Text('Parent'),                     ListView.builder(                         itemCount: 2,                         physics: ClampingScrollPhysics(),                          shrinkWrap: true,                         itemBuilder: (BuildContext context, int index) {                           return Text('Child');                         }),                   ],                 );               }),         )       ],     ),   ); } 
like image 32
Burak Avatar answered Oct 09 '22 09:10

Burak