M3 ListTile leading/trailing vertical alignment incompatibility #119861
Description
The default layout for ListTiles and useMaterial3: true was changed in #117965 to match the Material Design spec. Unfortunately, in some cases the resulting layout is backwards incompatible and the results can be confusing. The original feature, which automatically top-aligned the leading and trailing widgets for "big" items (whose height was > 72) was useful and would be easy to restore. It might be even a little more useful if the item height threshold was configurable.
The Material2 layout for the sample code below looks like this:
With useMaterial3: true the leading widgets are centered wrt to their list titles. In this case the result is confusing, i.e. it's not clear which item 'Entry 2 ... ' goes with.
Code sample
import 'package:flutter/material.dart';
class Home extends StatefulWidget {
const Home({ super.key });
@override
State<Home> createState() => _HomeState();
}
class _HomeState extends State<Home> {
static const List<String> entries = <String>[
'The first entry',
'Entry 2 occupies several lines because this line wraps.\n\nand there is a blank line.',
'The thrid entry.',
'The fourth entry.',
];
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Colors.blue.withOpacity(0.05),
width: 400,
child: ListView.builder(
itemCount: entries.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
contentPadding: EdgeInsets.all(6),
leading: CircleAvatar(
radius: 14,
backgroundColor: Colors.grey.withOpacity(0.15),
child: Text('$index'),
),
title: Text(entries[index]),
);
},
),
),
);
}
}
void main() {
runApp(
MaterialApp(
theme: ThemeData(useMaterial3: true),
home: const Home(),
),
);
}