flutter

How to center ListTile's title?


Issue

The title of my ListTile isn't centered horizontally with respect to my browser's window: Screenshot that shows that the Text is 4cm from the left and 4.2cm from the right.

Steps to reproduce the issue

  1. Create a new Flutter project
  2. Replace the contents of main.dart with what follows
import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: ListView(
            children: [ListTile(title: Center(child: Text('Hello World!')))],
          ),
        ),
      ),
    );
  }
}
  1. Run the app in Chrome

What I've tried and didn't work

ListTile(
  title: Align(
    alignment: Alignment.center,
    child: Text('Hello World!'),
  )
),
ListTile(
  title: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [Text('Hello World!')],
  ),
),

Environment

Chrome 138.0.7204.169

Flutter 3.32.6

MacBook Air M1 8GB

macOS 15.5


Solution

  • ListTile adds leading and trailing padding. Remove the default padding insets by setting the contentPadding property to zero.

    Code:

    ListTile(
        title: Center(
            child: Text('Hello World!')
        ),
        contentPadding: EdgeInsets.zero, // set content padding to zero
    )