Flutter ListTile - Vertical align all items to center

Viewed 477

I want to align everything inside the ListTile (title, subtitle, leading, trailing etc) vertically to center. What's the best way to do it?

const Padding(
    padding: EdgeInsets.fromLTRB(0, 20, 0, 20),
    child: Card(
      child: ListTile(
        leading: FlutterLogo(size: 55),
        title: Text('Overview'),
        subtitle: Text(
          '250.956.261',
        ),
        trailing: Icon(
          Icons.arrow_right_outlined,
          size: 30,
        ),
        isThreeLine: true,
      ),
    ),
),
2 Answers

You can use the alternative code below to get what you want

         Padding(
          padding: const EdgeInsets.fromLTRB(0, 20, 0, 20),
          child: Card(
            child: Padding(
              padding: const EdgeInsets.all(20),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Row(
                    children: [
                      const FlutterLogo(size: 55),
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: const [
                          Text('Overview'),
                          Text(
                            '250.956.261',
                          ),
                        ],
                      ),
                    ],
                  ),
               const Icon(
                    Icons.arrow_right_outlined,
                    size: 30,
                  ),
                ],
              ),
            ),
          ),
        );

I initially misunderstood your question to be about horizontally centering the contents of the ListTile. To center the items vertically inside of the card, you might only need to disable the isThreeLine parameter. Disabling it causes the contents to be centered vertically.

Code for build method:

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Card(
        child: ListTile(
          leading: FlutterLogo(size: 55),
          title: Text('Overview'),
          subtitle: Text(
            '250.956.261',
          ),
          trailing: Icon(
            Icons.arrow_right_outlined,
            size: 30,
          ),
          // isThreeLine: true,
        ),
      ),
    );
  }

enter image description here

Related