Improve render time

[JGeek00]

Hi. I'm using your library to create a complex table with around 180 columns and 60 rows (even if I only have 30 columns and 10 rows it takes at least 1 second to render it). I'm facing some performance issues and I hope you can help me improving it. Basically when the table is rendered, the app freezes for 2 seconds in production mode. I don't mind if it takes 2 seconds to render, but I would like to prevent the app from freezing while the table it's being rendered, and if possible, to display a spinner or some loading indicator while the table is being rendered. This table will only display data, so it won't be re-rendered every few seconds because the data is changing.

final int months = 6;
final int people = 60;

...

DataTable2(
  fixedLeftColumns: 2,
  minWidth: (150 * 2) + ((months * 30) * 40),
  columnSpacing: 0,
  isVerticalScrollBarVisible: true,
  isHorizontalScrollBarVisible: true,
  fixedColumnsColor: Colors.grey.withOpacity(0.2),
  headingRowColor: MaterialStatePropertyAll(
    Colors.grey.withOpacity(0.2),
  ),
  columns: [
    const DataColumn2(
      fixedWidth: 150,
      label: Text("People"),
    ),
    const DataColumn2(
      fixedWidth: 150,
      label: Text("Projects"),
    ),
    ...List.generate(months * 30, (index) => null)
        .asMap()
        .entries
        .map(
          (e) => const DataColumn2(
            fixedWidth: 30,
            label: Center(
              child: RotatedBox(
                quarterTurns: 1,
                child: Text("18/10"),
              ),
            ),
          ),
        )
  ],
  rows: [
    ...List.generate(people, (index) => null).map(
      (e) => DataRow2(
        specificRowHeight: 22,
        cells: [
          const DataCell(Text("Person 1")),
          const DataCell(Text("Project 1")),
          ...List.generate(months * 30, (index) => null)
              .asMap()
              .entries
              .map(
                (e) => const DataCell(
                  Center(
                    child: Text(
                      "10",
                      style: TextStyle(fontSize: 12),
                    ),
                  ),
                ),
              )
        ],
      ),
    )
  ],
),

[maxim-saplin]

Tried your sample increasing people to 120. There's indeed a noticeable delay/stutter which is seen when transition animation is not played (used supplied example to test your code snippet). Though on M1 Pro Mac and Flutter 3.13.8 the delay is less than 0.5 seconds.

When profiling I can see there's a lot happening in the UI thread and since widget reports 3-4ms in data table's build() method most the time is happening under the hood of Flutter, I don't think there's anything suboptimal in package itself...

Here's the screenshot while profiling, ~600ms in UI thread.

I also tried changing to Flutter's stock DataTable (removing all the DataTable2 fields) and it was even worse, ~900ms:

Anyways my suggestion is not expect the widget to be able to have the rendering/layout being under 1 second but rather hide this slowness. E.g. if you have some animation playing while building the table you can use a FutureBuilder and a delay. E.g. create Future.Delayed 1 second), while future is not complete display some placeholder instead of the DataTable2 ('e.g. Loading text'), let the animation play (with placeholder displayed), and after 1 second delay DataTable2 will be build by the FutureBuilder, UI will be frozen (yet it might not be noticeable)

[JGeek00]

In that also happens with the DataTable widget that's built into the Material package maybe it would be a good idea to escalate it to the Flutter repository as a bug.

[maxim-saplin]

At the lower level both stock DataTable and this DataTable2 widgets rely on https://api.flutter.dev/flutter/widgets/Table-class.html

You can try creating an issues at Flutter, though I think there're already issues discussing performance of Table widget. If you happen to create or comment in Flutter please link this issues so I could track the progress