Question 79160 in Flutter Question posted in
The official Flutter documentation can be found here.

How to have ListTile info appear on the same vertical line? – Flutter

I have a ListTile built with following code:

child: ListTile(
    leading: Padding(
      padding: EdgeInsets.only(top: 4, left: 12, bottom: 4),
      child: Text(department, style: TextStyle(color: Colors.white)),
    ),
    contentPadding: EdgeInsets.only(top: 4, left: 12, bottom: 4),
    title: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(name, style: TextStyle(color: Colors.white)),
        Text(number, style: TextStyle(color: Colors.white)),
      ],
    ),

How can I make the name & number appear on the same vertical line regardless of the length of the department?

I have tried setting a max width, but that doesn’t work for shorter departments..

Here is an image example of my current layout:

enter image description here

Tags:

2

Answers


  1. 0

    You can set minLeadingWidth property to fit your leading text or if you can make your custom ListTile
    I suggest you to read the flutter document: https://api.flutter.dev/flutter/material/ListTile-class.html

    Login or Signup to reply.
  2. 0

    I have created a custom tile for you, you can check out the following code:

    import 'dart:developer';

import 'package:flutter/material.dart';

class CustomTest extends StatelessWidget {
  const CustomTest({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    List<Map<String, String>> list = [
      {
        'department': 'My Department',
        'name': 'John Doe',
        'number': '12345678912',
      },
      {
        'department': 'A big department',
        'name': 'John Wick',
        'number': '12345678912',
      },
      {
        'department': 'Amazon Food Department',
        'name': 'John Bob',
        'number': '12345678912',
      },
      {
        'department': 'Queens Park Football Department',
        'name': 'John Jenny',
        'number': '12345678912',
      },
    ];

    return Padding(
      padding: const EdgeInsets.all(10),
      child: ListView.separated(
        itemCount: list.length,
        itemBuilder: (context, index) {
          return _buildItems(
              department: list[index]['department']!,
              name: list[index]['name']!,
              number: list[index]['number']!);
        },
        separatorBuilder: (context, builder) {
          return const SizedBox(
            height: 8,
          );
        },
      ),
    );
  }

  Widget _buildItems({required String department, required String name, required String number}) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10.0), border: Border.all(color: Colors.black)),
      child: Row(
        mainAxisSize: MainAxisSize.max,
        children: [
          Expanded(flex: 2, child: Text(department)),
          const Spacer(
            flex: 1,
          ),
          Expanded(
            flex: 3,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [Text(name), Text(number)],
            ),
          ),
          const Spacer(
            flex: 2,
          ),
          GestureDetector(onTap: () => log('Call $name'), child: const Icon(Icons.phone)),
        ],
      ),
    );
  }
}

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search