Flutter Table size failed

Question

I need to create table which contains numbers and has square form. The obvious solution would be to use widget Table, but...

When I use odd size it works, when I use even size it fails with rendering exception.

How to fix it?

void main() => runApp(
    MaterialApp(
        home: Scaffold(
          appBar: new AppBar(title: Text("Table Shulte")),
          body: tab(),
        )
    )
);

Widget tab(){
  int N = 6;  
  Widget table = Table(
    children: List.generate(N, (i){
      return TableRow(children: List.generate(N, (j) =>
        AspectRatio(child:Center(child: Text("${i*N+j+1}", textScaleFactor: 12.0/N,)), aspectRatio: 1.0,)
      ));

    }),
    border: TableBorder.all(),
  );
  return table;
}

I don't understand why this assert failes:

'package:flutter/src/rendering/table.dart': Failed assertion: line 883 pos 16: 'tableWidth >= targetWidth': is not true.

Another exception was thrown: 'package:flutter/src/rendering/table.dart': Failed assertion: line 1126 pos 12: '_rowTops.length == rows + 1': is not true.

Here the log.

I/flutter (10304): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (10304): The following assertion was thrown during performLayout():
I/flutter (10304): 'package:flutter/src/rendering/table.dart': Failed assertion: line 883 pos 16: 'tableWidth >=
I/flutter (10304): targetWidth': is not true.


I/flutter (10304): When the exception was thrown, this was the stack:
I/flutter (10304): #2      RenderTable._computeColumnWidths (package:flutter/src/rendering/table.dart)
I/flutter (10304): #3      RenderTable.performLayout (package:flutter/src/rendering/table.dart:1001:33)
I/flutter (10304): #4      RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
I/flutter (10304): #5      MultiChildLayoutDelegate.layoutChild (package:flutter/src/rendering/custom_layout.dart:141:11)
I/flutter (10304): #6      _ScaffoldLayout.performLayout (package:flutter/src/material/scaffold.dart:399:7)
I/flutter (10304): #7      MultiChildLayoutDelegate._callPerformLayout (package:flutter/src/rendering/custom_layout.dart:211:7)
I/flutter (10304): #8      RenderCustomMultiChildLayoutBox.performLayout (package:flutter/src/rendering/custom_layout.dart:355:14)
I/flutter (10304): #9      RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
I/flutter (10304): #10     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13)
I/flutter (10304): #11     RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
I/flutter (10304): #12     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13)
I/flutter (10304): #13     _RenderCustomClip.performLayout (package:flutter/src/rendering/proxy_box.dart:1143:11)
I/flutter (10304): #14     RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
I/flutter (10304): #15     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13)
I/flutter (10304): #16     RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
I/flutter (10304): #17     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13)



I/flutter (10304): This RenderObject had the following descendants (showing up to depth 5):
I/flutter (10304):   RenderAspectRatio#eecef NEEDS-LAYOUT NEEDS-PAINT
I/flutter (10304):     RenderPositionedBox#1f1ff NEEDS-LAYOUT NEEDS-PAINT
I/flutter (10304):       RenderParagraph#8f8f7 NEEDS-LAYOUT NEEDS-PAINT


I/flutter (10304): Another exception was thrown: RenderBox was not laid out: RenderTable#babed relayoutBoundary=up1 NEEDS-PAINT
I/flutter (10304): Another exception was thrown: 'package:flutter/src/rendering/table.dart': Failed assertion: line 1126 pos 12: '_rowTops.length == rows + 1': is not true.

Answer 1

The problem causing the issue is textScaleFactor.

List.generate(index,...) method starts the index from (0).

When we call the textScaleFactor: 12.0/N is not returning a number for the widget therefore it causes an issue.

I simply, modified your tab method as follows and it returns a view now.

Widget tab(){
  int N = 6;
  Widget table = Table(
    children: List.generate(N, (i){
      return TableRow(children: List.generate(N+1, (j) =>
          AspectRatio(child:Center(child: Text("${i*N+j+1}", textScaleFactor: 12.0/N)), aspectRatio: 1.0)
      ));

    }),
    border: TableBorder.all(),
  );
  return table;
}