i wonder why my text sometimes looks squash, here is a photo of why it looks like this 
especially the status : unassigned, the data are all fetch from firebase and display in table form
can i know what is going on? i dont know what causes it and dont know how to fix it, i need some guidance, thanks in advance
here is my table code
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:fyp/appointment/AppointmentDetails.dart';
import 'package:shared_preferences/shared_preferences.dart';
import '../extensions.dart';
import 'createFunction/selectService.dart';
bool loggedIn = true;
bool notLoggedIn = true;
String answer = '';
class appointmentPage extends StatefulWidget {
const appointmentPage({Key? key}) : super(key: key);
@override
State<appointmentPage> createState() => _appointmentPageState();
}
class _appointmentPageState extends State<appointmentPage> {
@override
TextEditingController searchController = TextEditingController();
String searchText = '';
String dropdownvalue = 'View All';
void dispose() {
searchController.dispose();
super.dispose();
}
@override
void initState(){
loadPref();
super.initState();
}
loadPref() async{
SharedPreferences pref = await SharedPreferences.getInstance();
setState(() {
answer = (pref.getString('adminEmail')).toString();
if(answer == ''){
loggedIn = false;
notLoggedIn = true;
}else if(answer != ''){
loggedIn = true;
notLoggedIn = false;
}
});
}
Widget build(BuildContext context) {
var items = [
'View All',
'View Unpaid',
'View Paid',
'View Unassigned',
'View Completed',
'View Cancelled',
'View Assigned'
];
Query<Map<String, dynamic>> allNoteCollection = FirebaseFirestore.instance.collection('Appointment');
// Query<Map<String, dynamic>> allNoteCollection = FirebaseFirestore.instance.collection('Appointment').where('payStatus', isEqualTo: dropdownvalue);
if(dropdownvalue == 'View All'){
allNoteCollection = FirebaseFirestore.instance.collection('Appointment');
} else if(dropdownvalue == 'View Unpaid'){
allNoteCollection= FirebaseFirestore.instance.collection('Appointment').where('payStatus', isEqualTo: 'Pay later at store');
}else if(dropdownvalue == 'View Paid'){
allNoteCollection = FirebaseFirestore.instance.collection('Appointment').where('payStatus', isEqualTo: 'Paid');
}else if(dropdownvalue == 'View Assigned'){
allNoteCollection = FirebaseFirestore.instance.collection('Appointment').where('status', isEqualTo: 'assigned');
}else if(dropdownvalue == 'View Completed'){
allNoteCollection = FirebaseFirestore.instance.collection('Appointment').where('status', isEqualTo: 'completed');
}else if(dropdownvalue == 'View Unassigned'){
allNoteCollection = FirebaseFirestore.instance.collection('Appointment').where('status', isEqualTo: 'unassigned');
}else if(dropdownvalue == 'View Cancelled'){
allNoteCollection = FirebaseFirestore.instance.collection('Appointment').where('status', isEqualTo: 'cancelled');
}
List<DocumentSnapshot> documents = [];
if(answer != ''){
notLoggedIn = false;
loggedIn = true;
setState(() {});
}else if(answer == ''){
loggedIn = false;
notLoggedIn = true;
setState(() {});
}
return Scaffold(
appBar: AppBar(
title: const Text('Appointment Page'),
),
body: Stack(
children: [
Visibility(
visible: notLoggedIn,child:
Center(
child: SizedBox(
height: 180,
width: 280,
child: Card(
color: '03045E'.toColor(),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
child: Padding(
padding: const EdgeInsets.all(20),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Center(child: Text('There is no assigned', style: TextStyle(fontFamily: 'MonSemi', fontSize: 16, color: Colors.white),)),
Center(child: Text('assignment', style: TextStyle(fontFamily: 'MonSemi', fontSize: 16, color: Colors.white),)),
SizedBox(height:20,),
Center(child: Text('All assignments are either', style: TextStyle(fontFamily: 'MonSemi', fontSize: 16, color: Colors.white),)),
Center(child: Text('completed or unassigned', style: TextStyle(fontFamily: 'MonSemi', fontSize: 16, color: Colors.white),)),
],
),
),
),
),
)
),
TextField(
controller: searchController,
onChanged: (value) {
setState(() {
searchText = value;
});
},
decoration: const InputDecoration(
hintText: 'Search...',
prefixIcon: Icon(Icons.search),
),
),
Visibility(
visible: loggedIn,
child: Column(
children: [
const SizedBox(height: 52,),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
height: 50,
width: 200,
child: Card(
color: '2196f3'.toColor(),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
child: DropdownButton(
dropdownColor: '2196f3'.toColor(),
isExpanded: true,
value: dropdownvalue,
items: items.map((String items){
return DropdownMenuItem(
value: items,
child: Center(child: Text(items, style: const TextStyle(fontFamily: 'Lato', fontSize: 18, color: Colors.white ), )));
}).toList(),
onChanged: (String? newValue){
setState(() {
dropdownvalue = newValue!;
});
}),
),
),
],
),
],
),
),
Visibility(
visible: loggedIn,
child: Padding(
padding: const EdgeInsets.fromLTRB(0,100,0,0),
child: SingleChildScrollView(
child: Column(
children: [
StreamBuilder(
stream: allNoteCollection.snapshots(),
builder: (ctx, streamSnapshot) {
if (streamSnapshot.connectionState ==
ConnectionState.waiting) {
return const Center(child: CircularProgressIndicator());
}
documents = streamSnapshot.data!.docs;
if (searchText.isNotEmpty) {
documents = documents.where((element) {
return (element
.get('carPlate')
.toString()
.toLowerCase()
.contains(searchText.toLowerCase()) ||
element
.get('custName')
.toString()
.toLowerCase()
.contains(searchText.toLowerCase()) ||
element
.get('date')
.toString()
.toLowerCase()
.contains(searchText.toLowerCase()) ||
element
.get('timeEnd')
.toString()
.toLowerCase()
.contains(searchText.toLowerCase()) ||
element
.get('timeStart')
.toString()
.toLowerCase()
.contains(searchText.toLowerCase()) ||
element
.get('serviceName')
.toString()
.toLowerCase()
.contains(searchText.toLowerCase()));
}).toList();
}
return ListView.separated(
reverse: true,
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemCount: documents.length,
separatorBuilder: (BuildContext context, int index) {
return const Divider();
},
itemBuilder: (BuildContext context, int index) {
String newTimeEnd = '';
int countStart = int.parse(documents[index]['timeStart']);
int countEnd = int.parse(documents[index]['timeEnd']);
int finalCount = countEnd - countStart;
if(finalCount > 1){
int timeEnding = int.parse(documents[index]['timeEnd']) + 1;
newTimeEnd = timeEnding.toString();
}else{
int timeEnding = int.parse(documents[index]['timeEnd']) + 0;
newTimeEnd = timeEnding.toString();
}
return ListTile(
contentPadding:
const EdgeInsets.symmetric(horizontal: 0.0),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => AppointmentDetails(
id: documents[index]['id'],
custName: documents[index]
['custName'],
carPlate: documents[index]
['carPlate'],
)));
},
title:
Table(
children: [
const TableRow(children: [SizedBox(height: 5,), SizedBox(height: 5,)]),
TableRow(
children: [
const Center(child: Text('Date', style: TextStyle(fontFamily: 'MonMed'),)),
Text(': ${documents[index]['date']}', style: const TextStyle(fontFamily: 'MonMed'),),
]
),
const TableRow(children: [SizedBox(height: 8,), SizedBox(height: 8,)]),
TableRow(
children: [
const Center(child: Text('Car Plate', style: TextStyle(fontFamily: 'MonMed'),)),
Text(': ${documents[index]['carPlate']}', style: const TextStyle(fontFamily: 'MonMed'),),
]
),
const TableRow(children: [SizedBox(height: 8,), SizedBox(height: 8,)]),
TableRow(
children: [
const Center(child: Text('Service', style: TextStyle(fontFamily: 'MonMed'),)),
Text(': ${documents[index]['serviceName']}', style: const TextStyle(fontFamily: 'MonMed'),),
]
),
const TableRow(children: [SizedBox(height: 8,), SizedBox(height: 8,)]),
TableRow(
children: [
const Center(child: Text('Price', style: TextStyle(fontFamily: 'MonMed'),)),
Text(': ${documents[index]['payment']}', style: const TextStyle(fontFamily: 'MonMed'),),
]
),
const TableRow(children: [SizedBox(height: 8,), SizedBox(height: 8,)]),
TableRow(
children: [
const Center(child: Text('Customer', style: TextStyle(fontFamily: 'MonMed'),)),
Text(': ${documents[index]['custName']}', style: const TextStyle(fontFamily: 'MonMed'),),
]
),
const TableRow(children: [SizedBox(height: 8,), SizedBox(height: 8,)]),
TableRow(
children: [
const Center(child: Text('Pay Status', style: TextStyle(fontFamily: 'MonMed'),)),
Text(': ${documents[index]['payStatus']}', style: const TextStyle(fontFamily: 'MonMed'),),
]
),
const TableRow(children: [SizedBox(height: 8,), SizedBox(height: 8,)]),
TableRow(
children: [
const Center(child: Text('Status', style: TextStyle(fontFamily: 'MonMed'),)),
Text(': ${documents[index]['status']}', style: const TextStyle(fontFamily: 'MonMed'),),
]
),
const TableRow(children: [SizedBox(height: 10,), SizedBox(height: 10,)]),
TableRow(
children: [
const Center(child: Text('Time Start', style: TextStyle(fontFamily: 'MonMed'),)),
Text(': ${documents[index]['timeStart']}:00 Hour', style: const TextStyle(fontFamily: 'MonMed'),),
]
),
const TableRow(children: [SizedBox(height: 8,), SizedBox(height: 8,)]),
TableRow(
children: [
const Center(child: Text('Time End', style: TextStyle(fontFamily: 'MonMed'),)),
Text(': ${newTimeEnd}:00 Hour', style: const TextStyle(fontFamily: 'MonMed'),),
]
),
],
),
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: [
InkWell(
onTap: () {
var db = FirebaseFirestore.instance;
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
content: const Text(
'Are you sure you want to remove this appointment?'),
actions: [
TextButton(
// FlatButton widget is used to make a text to work like a button
onPressed: () {
Navigator.of(context).pop();
},
child: const Text('Cancel'),
),
TextButton(
onPressed: () {
db.collection("Appointment").doc(documents[index]
['id'].toString()).delete().then((doc) => print(
"Document deleted"),
onError: (e) => print("Error updating document $e"),
);
final remove =
FirebaseFirestore.instance.collection(
'Assignment').doc(documents[index]['id']);
remove.update({
'status': 'cancelled'
});
resetTimeSlot(documents[index]['timeStart'],
documents[index]['date'],
documents[index]['hoursNeed']);
Navigator.of(context).pop();
},
child: const Text('Delete'),
),
],
);
});
},
child: const Icon(Icons.delete)),
],
));
},
);
},
),
const SizedBox(height: 70,),
],
),
),
)
),
Visibility(
visible: loggedIn,
child: Positioned(
bottom: 15,
left: 0,
right: 0,
child: Column(
children: [
const SizedBox(height: 10,),
SizedBox(
width: 200,
height: 45,
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => selectService()));
},
child: const Text('Create Appointment', style: TextStyle(fontFamily: 'Lato', fontSize: 18),),
),
),
],
),
),
),
],
),
);
}
ListTileby default has specific size for itstitleand that is why yourtablesquash. so you need to changevisualDensitylike this: