Skip to content

Allow to change the alignment in RadioListTile and CheckboxListTile #168596

@ValentinVignal

Description

@ValentinVignal

Use case

Consider the code

import 'package:flutter/material.dart';

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

const longTitle =
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. '
    'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';

const longSubtitle =
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. '
    'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ListView(
          children: <Widget>[
            ListTile(
              title: const Text(longTitle),
              subtitle: const Text(longSubtitle),
              leading: const Icon(Icons.access_alarm),
              trailing: const Icon(Icons.arrow_forward),
            ),
            CheckboxListTile(
              value: true,
              onChanged: (value) {},
              title: const Text(longTitle),
              subtitle: const Text(longSubtitle),
              secondary: const Icon(Icons.arrow_forward),
            ),
            RadioListTile(
              title: const Text(longTitle),
              subtitle: const Text(longSubtitle),
              secondary: const Icon(Icons.arrow_forward),
              value: true,
              groupValue: true,
              onChanged: (value) {},
            ),
          ],
        ),
      ),
    );
  }
}

On macos, it renders into:

Image

I'd like to be able to align the leading/trailing to the top of the ListTile instead of the middle of it

Proposal

Add a parameter to the ListTile, CheckboxListTile and RadioListTile to align the leading/trailing differently

Metadata

Metadata

Assignees

No one assigned

    Labels

    c: new featureNothing broken; request for a new capabilityc: proposalA detailed proposal for a change to Flutterf: material designflutter/packages/flutter/material repository.frameworkflutter/packages/flutter repository. See also f: labels.r: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions