Reputation: 6022
I am using the table_sticky_headers
library in my Flutter project and I need to adjust the width
of both the column titles
and the cells
in the table. However, despite setting the width property in columnsTitleBuilder and legendCell, the columns do not appear to be expanding as expected.
Field value, Duration and other titles should be in one line and it should not ellipse
Here is my code
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:table_sticky_headers/table_sticky_headers.dart';
class TrackingHistoryScreen extends StatefulWidget {
const TrackingHistoryScreen({super.key});
@override
State<TrackingHistoryScreen> createState() => _TrackingHistoryScreenState();
}
class _TrackingHistoryScreenState extends State<TrackingHistoryScreen> {
String appbarTitle = 'Tracking History - List';
List<Map<String, dynamic>> trackingData = [];
@override
void initState() {
super.initState();
_fetchTrackingData();
}
Future<void> _fetchTrackingData() async {
await Future.delayed(Duration(seconds: 1));
trackingData = List.generate(50, (index) {
return {
"fieldname": "Field$index",
"fieldValue": "Value$index",
"Duration(Days)": index + 1,
"Duration(Hours)": (index + 1) * 24,
"Current Status": index % 2 == 0 ? "Active" : "Inactive",
"Created Time": "2024-01-${(index % 30) + 1}T12:00:00Z"
};
});
setState(() {});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: trackingData.isEmpty
? Center(child: CircularProgressIndicator())
: StickyHeadersTable(
showHorizontalScrollbar: false,
showVerticalScrollbar: false,
legendCell: Container(
width: 250,
height: double.infinity,
color: Colors.lightBlueAccent,
child: Center(
child: Text(
'Field Name',
style: TextStyle(fontWeight: FontWeight.bold),
),
),
),
columnsLength: 5, // 5 data columns
rowsLength: trackingData.length, // number of rows corresponds to trackingData length
columnsTitleBuilder: (i) => Container(
width: 250, // Adjust the width of the column cells
color: Colors.lightBlueAccent,
padding: EdgeInsets.all(8),
child: Center(
child: Text(
[
'Field Value',
'Duration (Days)',
'Duration (Hours)',
'Current Status',
'Created Time'
][i],
style: TextStyle(fontWeight: FontWeight.bold),
),
),
),
rowsTitleBuilder: (i) {
String value = trackingData[i]['fieldname'].toString();
return Container(
color: Colors.grey[200],
padding: EdgeInsets.all(8),
child: Center(
child: Text(value),
),
);
},
contentCellBuilder: (i, j) {
final data = trackingData[j];
List<String> values = [
data['fieldValue'].toString(),
data['Duration(Days)'].toString(),
data['Duration(Hours)'].toString(),
data['Current Status'].toString(),
data['Created Time'].toString()
];
return Container(
padding: EdgeInsets.all(6),
child: Center(
child: Text(
values[i], // Display the correct data for the column
overflow: TextOverflow.visible, // Ensure text visibility
),
),
);
},
),
);
}
}
Output
Upvotes: 0
Views: 26