Center Expanded ListView Inside Column Flutter

Answer :

The ListView fills the entire Expanded Widget, that's why using the Center widget didn't work, so shrinkWrap: true should be added so the ListView takes only the height of it's children.

After skimming through the documentation I found about Flexible Widget

Flexible, which does not force the child to fill the available space. 

Made the change and works like a charm

Flexible(                 child: ListView.builder(                   shrinkWrap: true,                   itemCount: 4,                   itemBuilder: (BuildContext context, int index) =>                       CustomAppText(                         text: 'Custom App',                       ),                 ),               ), 

For those still looking for an answer, this is what worked for me:

Column(   children: [      Container(), // some top content      Expanded(       child: Center(         child: ListView(           shrinkWrap: true,           children: [] //your list view content here         )       )     ),      Container(), // some bottom content    ] ) 

The Expanded widget makes the content take up all available space.

The Center widget centers the content you want to display.

The ListView holds your list content and the "shrinkWrap: true" property makes your list view shrink according to content size(allowing it to centralized by the Center widget when it's not taking a lot of space).

Hope it helps. Give the top and bottom widgets the 25% of the screen size. Give the listview the 50% of the screen size.

import 'package:flutter/material.dart';  class TestPage extends StatefulWidget {   @override   _TestPageState createState() => _TestPageState(); }  class _TestPageState extends State<TestPage> {   @override   Widget build(BuildContext context) {     final _size = MediaQuery.of(context).size;      return Scaffold(       body: SafeArea(         child: Padding(           padding: const EdgeInsets.all(28.0),           child: Column(             mainAxisAlignment: MainAxisAlignment.start,             crossAxisAlignment: CrossAxisAlignment.start,             children: <Widget>[               // Top Widgets               Container(                 width: double.infinity,                 // color: Colors.green,                 height: _size.height * 0.25, // Take 25% width of the screen height                 child: Column(                   mainAxisAlignment: MainAxisAlignment.start,                   crossAxisAlignment: CrossAxisAlignment.start,                   children: <Widget>[                     Text('11: 25 AM', style: TextStyle(fontSize: 23.0),),                     Text('Set As Launcher', style: TextStyle(fontSize: 23.0),)                   ],                 ),               ),                Expanded(                 child: Container(                   // color: Colors.yellow,                   child: ListView(                     children: List.generate(25, (index){                       return Text('Custom App $index', style: TextStyle(fontSize: 45.0),);                     }),                   ),                 ),               ),                // Bottom Widgets               Container(                 width: double.infinity,                 // color: Colors.blue,                 height: _size.height * 0.25, // Take 25% width of the screen height                 child: Column(                   mainAxisAlignment: MainAxisAlignment.end,                   crossAxisAlignment: CrossAxisAlignment.start,                   children: <Widget>[                     Text('Settings', style: TextStyle(fontSize: 23.0),),                                       ],                 ),               )             ],           ),         ),       ),     );   } }