Issue
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:
Solution
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)),
],
),
);
}
}
Answered By – Md. Kamrul Amin
Answer Checked By – Mary Flores (FlutterFixes Volunteer)