flutterdartwidgetalignmentflutter-listview
Flutter Listview.builder's last element changing its alignment even all other elements displaying correctly
Below code rendering list of elements in which all elements are displaying correctly as per the mentioned alignments but the last element changing its alignment unexpectedly:
Expanded(
child: Container(
width: maxWidth,
// height: maxHeight,
// height: h10p * 3,
decoration: const BoxDecoration(
color: Colours.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(26),
topRight: Radius.circular(26),
)),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(left: 18, top: 8),
child: Row(
children: [
InkWell(
onTap: () {
Navigator.pop(context);
},
child: Icon(Icons.circle_sharp)
// SvgPicture.asset(
// "assets/images/arrowLeft.svg"),
),
],
),
),
Flexible(
child: SizedBox(
child: Padding(
padding: const EdgeInsets.only(
left: 6,
right: 7,
top: 3,
),
child: ListView.builder(
padding: EdgeInsets.zero,
// scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: transLenght.length,
itemBuilder: (context, index) {
print(
'invtr lengh ${transLenght.length}');
// List trns = transLenght[index];
final trType = transLenght[index]
['transaction_type'];
final trAmount =
transLenght[index]['amount'];
String tramt =
double.parse(trAmount.toString())
.toStringAsFixed(2);
final trDate = transLenght[index]
['transaction_date'];
DateTime trdt = DateTime.parse(
trDate); //invoice date
String transdt =
DateFormat("dd-MMM-yyyy")
.format(trdt);
final trRemark =
transLenght[index]['remark'];
final trinterest = transLenght[index]
['interest'] ??
'';
final trDiscount = transLenght[index]
['discount']
.toString();
String discnt =
double.parse(trDiscount.toString())
.toStringAsFixed(2);
final amtCleared = transLenght[index]
['transaction_amount'];
return
// Padding(
// padding:
// const EdgeInsets.symmetric(vertical: 5),
// child:
Card(
shadowColor: Color.fromARGB(
255, 245, 175, 45),
elevation: 5,
child: Padding(
padding:
const EdgeInsets.only(
left: 11,
right: 14,
top: 12,
),
child: Row(
mainAxisAlignment:
MainAxisAlignment.start,
children: [
Column(
crossAxisAlignment:
CrossAxisAlignment
.start,
children: [
Text(
"Transaction Type",
style: TextStyle(
fontSize: 13,
),
),
Text(
"$trType",
style: TextStyle(
fontSize: 15,
fontWeight:
FontWeight
.bold),
),
SizedBox(height: 15),
Text(
"Transaction Amount",
style: TextStyle(
fontSize: 13,
),
),
Text(
"$tramt",
style: TextStyle(
fontSize: 15,
fontWeight:
FontWeight
.bold),
),
SizedBox(height: 15),
Text(
"Transaction Date",
style: TextStyle(
fontSize: 13,
),
),
Text(
"$transdt",
style: TextStyle(
fontSize: 15,
fontWeight:
FontWeight
.bold),
),
SizedBox(height: 15),
Text(
"Amount Cleared",
style: TextStyle(
fontSize: 13,
),
),
Text(
"$amtCleared",
style: TextStyle(
fontSize: 15,
fontWeight:
FontWeight
.bold),
),
SizedBox(height: 6),
],
),
Expanded(
child: SizedBox()),
Column(
mainAxisAlignment:
MainAxisAlignment
.start,
crossAxisAlignment:
CrossAxisAlignment
.start,
children: [
Text(
"Interest",
style: TextStyle(
fontSize: 13,
),
),
Text(
"$trinterest",
style: TextStyle(
fontSize: 15,
fontWeight:
FontWeight
.bold),
),
SizedBox(height: 15),
Text(
"Discount",
style: TextStyle(
fontSize: 13,
),
),
Text(
"$discnt",
style: TextStyle(
fontSize: 15,
fontWeight:
FontWeight
.bold),
),
SizedBox(height: 15),
Text(
"Remarks",
style: TextStyle(
fontSize: 13,
),
),
Text(
"$trRemark",
style: TextStyle(
fontSize: 14,
fontWeight:
FontWeight
.bold),
),
// SizedBox(height: 40),
Text(
"",
style: TextStyle(
fontSize: 12,
),
),
Text(
"",
style: TextStyle(
fontSize: 14,
fontWeight:
FontWeight
.bold),
),
Text(
"",
style: TextStyle(
fontSize: 12,
),
),
Text(
"",
style: TextStyle(
fontSize: 12,
),
),
],
)
],
),
));
}),
),
),
),
],
)))
Solution
Its due to text length of Discount Applied or Credit Note
Check your Remark TextView value make its width static so that large text value should be wrap