Home > Net >  Flutter ListTile - Vertical align all items to center
Flutter ListTile - Vertical align all items to center

Time:11-09

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,
      ),
    ),
),

CodePudding user response:

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,
                  ),
                ],
              ),
            ),
          ),
        );

CodePudding user response:

I'm not sure you can achieve that with ListTile, it's a custom version of Row that has a particular layout for common use cases with Cards. You would probably be able to achieve what you want with a plain Row of your own.

  • Related