Flutter: How to evenly space ListTiles in ListView

Question

I am trying to evenly space my list tiles in my list view with the code below and it is not working. The greater objective is to get both scroll and even distribution on rotation. Thanks for the help.

      Widget _buildBodyListView() {         return new Container(           padding: EdgeInsets.all(12.0),           child: Container(color: Colors.green,             child: ListView(shrinkWrap: false,               children: <Widget>[                 ListTile(                   trailing: Icon(Icons.keyboard_arrow_right),                   title: Text('LATEST NEWS', textAlign: TextAlign.center,),                 ),                 ListTile(                   trailing: Icon(Icons.keyboard_arrow_right),                   title: Text('MARKET NEWS ', textAlign: TextAlign.center,),                 ),                 ListTile(                   trailing: Icon(Icons.keyboard_arrow_right),                   title: Text('MARKET REPORT', textAlign: TextAlign.center,),                 ),              ListTile(               trailing: Icon(Icons.keyboard_arrow_right),               title: Text('LATEST NEWS', textAlign: TextAlign.center,),             ),             ListTile(               trailing: Icon(Icons.keyboard_arrow_right),               title: Text('MARKET NEWS ', textAlign: TextAlign.center,),             ),             ListTile(               trailing: Icon(Icons.keyboard_arrow_right),               title: Text('MARKET REPORT', textAlign: TextAlign.center,),             ),                ],             ),           ),         );       } 

Answer 1

I recommend you use the ListView.separated widget. It has a property called the separatorBuilder. It return a Widget, here a SizedBox of a particular height, that will act as a separator.

Here is how you should do it:

ListView.separated(   physics: BouncingScrollPhysics(),   shrinkWrap: true,   itemCount: 6,   itemBuilder: (context, index) => Container(     padding: EdgeInsets.all(12.0),     child: Container(       color: Colors.green,       child: ListView(         children: const <Widget>[           ListTile(             trailing: Icon(Icons.keyboard_arrow_right),             title: Text('LATEST NEWS', textAlign: TextAlign.center,),           ),           ListTile(             trailing: Icon(Icons.keyboard_arrow_right),             title: Text('MARKET NEWS ', textAlign: TextAlign.center,),           ),           ListTile(             trailing: Icon(Icons.keyboard_arrow_right),             title: Text('MARKET REPORT', textAlign: TextAlign.center,),           ),           ListTile(             trailing: Icon(Icons.keyboard_arrow_right),             title: Text('LATEST NEWS', textAlign: TextAlign.center,),           ),           ListTile(             trailing: Icon(Icons.keyboard_arrow_right),             title: Text('MARKET NEWS ', textAlign: TextAlign.center,),           ),           ListTile(             trailing: Icon(Icons.keyboard_arrow_right),             title: Text('MARKET REPORT', textAlign: TextAlign.center,),           ),          ],       ),     ),   ),   separatorBuilder: (context, index) => SizedBox(     height: 10,   ) );