如何让Flutter中ListTile的title在浏览器窗口水平居中？

问题根源在于ListTile默认会为leading（左侧图标/控件）预留空间，并且自带左右内边距，导致title的可用宽度并非整个窗口宽度，你之前的居中操作只是在这个受限区域内居中，所以视觉上和窗口边缘的距离不等。

以下是两种可行的解决方案：

方案1：清除ListTile的内边距 #

通过设置contentPadding: EdgeInsets.zero让title占据ListTile的全部宽度，再在title内实现居中：

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(
                contentPadding: EdgeInsets.zero,
                title: Center(child: Text('Hello World!')),
              )
            ],
          ),
        ),
      ),
    );
  }
}

方案2：使用ListTile的标题对齐属性（Flutter 3.7+支持） #

如果你的Flutter版本足够新（3.7及以上），可以直接设置titleAlignment: ListTileTitleAlignment.center，让标题自动居中对齐整个ListTile宽度：

ListTile(
  titleAlignment: ListTileTitleAlignment.center,
  title: Text('Hello World!', textAlign: TextAlign.center),
)

这两种方法都能让标题相对于浏览器窗口水平居中，解决截图中左右边距不等的问题。

内容的提问来源于stack exchange，提问作者Filippo