Flutter ListTile Widget: M3 Properties, Theming and Migration (2026)

Across the ten industries we ship Flutter in, the flutter listtile widget is the row primitive every settings screen, every contact list, every chat thread, every notification feed leans on. The choice between built-in ListTile, one of its variants like CheckboxListTile or SwitchListTile, a hand-rolled Row in a Material wrapper, or a community ListTile package looks small at design time and turns into an accessibility, theming, or performance problem once the app hits real users. This guide covers the flutter listtile widget patterns we actually ship, the constructor parameters most tutorials skip, the Material 3 defaults that shift under teams flipping useMaterial3 to true, and the production-grade fixes worth the read for every developer touching list-based screens.

Two framing notes. The flutter listtile widget covers about 80% of row-style UI when applied with a ListTileTheme. The other 20% (custom shapes, irregular heights, multi-column layouts) is where teams escape to bare Material plus Row, and where most accessibility regressions ship. Second: Material 3 changed enough ListTile defaults (text styles, title alignment, selected-state color, state-driven theming) that a useMaterial3 flip on an existing app will visibly shift every list. Read the M3 section below before merging.

When the flutter listtile widget is the right primitive to reach for

ListTile ships with Flutter as a first-class Material widget, no package needed. It exposes a leading slot, a title, an optional subtitle, a trailing slot, and an onTap callback. For 80% of row-style UI (settings screens, contact lists, notification feeds, chat message previews) it is the right answer. The reason to reach for anything else is almost always one of four specific needs: a stateful variant (Checkbox plus Switch plus Radio), an expandable row, swipe-to-dismiss, or a layout the ListTile padding and height contract simply cannot reach.

The pattern that bites teams in code review every single week: skipping ListTile and writing a custom Row with Padding to get pixel-exact spacing. That custom row almost always loses the 48dp minimum tap target, the built-in InkWell ripple, the implicit Semantics that names this row to a screen reader, and the dense or visualDensity hooks that let the system shift heights for accessibility settings. We have audited apps where every settings row was a hand-rolled Row, and re-fixing accessibility cost more than the original layout work would have on day one. The cleanup pattern across recent codebase audits looks the same: identify every hand-rolled row, replace with ListTile or one of its variants, wrap any decorative leading icon in ExcludeSemantics, set explicit selected and isThreeLine props where needed, and remove the manual GestureDetector that was duplicating ListTile.onTap. The work is mostly mechanical but the screen-reader experience improvement is dramatic on every audit pass we have run.

Deep on the ListTile constructor: what each parameter does and when to set it

The flutter listtile widget exposes substantially more configuration than the typical tutorial ever covers. Most tutorials show four ListTile parameters and stop there. The widget exposes 30-plus, and a handful of them earn their keep on every production build. Worth knowing in detail:

Material 3 changed these flutter listtile widget defaults — read before flipping the flag

Setting useMaterial3: true on a ThemeData built around the Material 2 ListTile contract will shift every list visibly across the app. Six things change at once and worth covering in detail. First, three new text style properties (titleTextStyle, subtitleTextStyle, leadingAndTrailingTextStyle) replace the M2-era pattern of styling text inside the title widget. Second, the new titleAlignment property controls how leading and trailing widgets align relative to a multi-line title with three options (threeLine, titleHeight, center). Third, textColor and iconColor accept WidgetStateColor for state-driven theming across selected and disabled and pressed states. Fourth, selected state paints with secondaryContainer rather than the M2 grey overlay. Fifth, dense behaves as visualDensity: compact. Sixth, the default shape on M3 ListTileTheme is rounded at 12dp instead of the M2 sharp-corner default.

ThemeData(
  useMaterial3: true,
  listTileTheme: ListTileThemeData(
    titleTextStyle: const TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
    subtitleTextStyle: const TextStyle(fontSize: 14),
    leadingAndTrailingTextStyle: const TextStyle(fontSize: 14),
    titleAlignment: ListTileTitleAlignment.threeLine,
    iconColor: WidgetStateColor.resolveWith((states) {
      if (states.contains(WidgetState.selected)) return Colors.deepPurple;
      if (states.contains(WidgetState.disabled)) return Colors.grey;
      return Colors.black87;
    }),
    selectedColor: Colors.deepPurple,
    selectedTileColor: Colors.deepPurple.withOpacity(0.08),
    minLeadingWidth: 32,
    contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
    shape: const RoundedRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(12)),
    ),
  ),
);

ListTile vs custom Row vs the variants: the decision matrix we apply on every screen

ListTileTheme: getting consistent styling across every screen without per-call overrides

Almost every ListTile property has a corresponding ListTileThemeData entry. The pattern is the highest-leverage theming move on any Flutter codebase with more than a handful of list-row screens. Set them once in ThemeData.listTileTheme and every list in the app inherits, including ListTiles inside Card and Drawer widgets, plus BottomSheet and Dialog wrappers. The biggest gain: when design tweaks the leading icon color from one shade to another, you change one line in the theme rather than every call site. Two properties that move the visual polish needle: shape (round the row corners under M3 to match Card and BottomSheet radii at 12dp), and selectedTileColor (the M3 secondaryContainer fill at low opacity is the right visual cue for a selected row).

Per-screen overrides via ListTileTheme widget inherit unset values from the global theme, which makes selective customization clean. This is the right pattern when one specific screen wants tighter rows than the app default. Wrap that screen subtree in a ListTileTheme with visualDensity: VisualDensity.compact and your contentPadding override; everything else inherits from ThemeData. We use this on dense settings screens where the default 56dp height feels wasteful given the user is scanning 30-plus toggle rows.

Performance: ListTile in long lists is where most Flutter apps jank on Android

Accessibility: what flutter listtile widget guarantees and what it doesn't

ListTile is the most accessible row primitive in Flutter. It enforces a 48dp minimum tap target, emits a single Semantics node per row by default, announces the row as a button when onTap is set, and inherits the system's text scaling. That is more than most custom Row implementations ship with on day one. The simplest accessibility upgrade on most Flutter apps we audit: wrap every list with MergeSemantics at the row level and ExcludeSemantics on every decorative icon. Two lines of code per row, and the screen-reader experience moves from unusable to acceptable in one pass. The three gaps that catch teams in code review:

Migrating the ListTile widget from Material 2 to Material 3

If you are flipping useMaterial3: true on an existing app, walk this checklist before merging. The first four items move screenshots; the last two prevent silent regressions in theming behavior.

The five flutter listtile widget bugs we see in code review every month

For the ten ListTile patterns and variants we ship most often across recent client builds, see our companionguide to the top ten Flutter list tile widgets. For how list-row patterns fit into a production Flutter app (state plus performance plus CI/CD coverage) our Flutter mobile app development field guide covers the practices we apply on every build.

Common questions about the flutter listtile widget