Anandh Krishnan
Anandh Krishnan

Reputation: 6022

How to Increase Column Title and Cell Width in the table_sticky_headers Library in Flutter?

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

enter image description here

Upvotes: 0

Views: 26

Answers (0)

Related Questions