DataTable2 inside StreamBuilder fails with thrown performLaout() assertion

[gawie-kellerman]

Hi,

Putting a DataTable2 inside a streambuilder fails. Using the same code, with a DataTable does not produce an error (produces the expected visuals).

The error is:

======== Exception caught by rendering library ===================================================== The following assertion was thrown during performLayout(): Assertion failed: .../flutter/common/flutter/packages/flutter/lib/src/rendering/box.dart:1972:12 hasSize "RenderBox was not laid out: RenderIgnorePointer#b8c20 relayoutBoundary=up15 NEEDS-PAINT"

The relevant error-causing widget was: ... When the exception was thrown, this was the stack: dart-sdk/lib/_internal/js_dev_runtime/private/ddcruntime/errors.dart 294:3 throw dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 35:3 assertFailed packages/flutter/src/rendering/box.dart 1972:12 get size

The offending code is:

StreamBuilder(
              stream: _channel.stream,
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  final data = snapshot.data as Uint8List;
                  if (data.isNotEmpty) {
                    final list =
                        ObjectList.fromByteData(data.buffer.asByteData());

                    return SingleChildScrollView(
                      child: DataTable2(
                                  rows: List<DataRow>.generate(
                                      list.nofObjects,
                                      (index) => DataRow(cells: [
                                            DataCell(Text(list.detail[index].x
                                                .toStringAsPrecision(2)))
                                          ])),
                                  columns: const [DataColumn2(label: Text('X'), size: ColumnSize.S)],
                                ),
                      );

Replacing the DataTable2 with:

                        child: DataTable(
                      columns: const [
                        DataColumn(label: Text('X')),
                        DataColumn(label: Text('Y')),
                      ],
                      rows: list.detail
                          .map((e) => DataRow(cells: [
                                DataCell(Text(e.x.toStringAsPrecision(2))),
                                DataCell(Text(e.y.toStringAsPrecision(2))),
                              ]))
                          .toList(),
                    ));

Works perfectly. PS: Removing the scrollview makes no difference.

[maxim-saplin]

And yet in your code you have scrollable wrapping the widget and it is the very first thing I would point at...

Could you please provide a minimal reproduction sample based on any of the examples from /example folder?

[gawie-kellerman]

Hi Maxim,

The ScrollView makes no difference. It is tough to give you a reproduction sample as it integrates with a custom websocket. Can I ask the question differently: have you tested the DataTable2 with a Stream? (especially one that that updates frequently (about 10 times a second))?

It is not necessary for me to use DataTable2, but I like and appreciate what you started doing with it, and thought I would likely contribute by pointing it out to you... since the same wrapper with DataTable 'native' works, there is obviously an issue in how I used DataTable2 here or a bug in it.

If it helps - below is a near complete stateful widget

class _MyHomePageState extends State<MyHomePage> {
 final _channel = WebSocketChannel.connect(
    Uri.parse('ws://localhost:8080/despatcher'),
  );

  @override
  void dispose() {
    _channel.sink.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            StreamBuilder(
              stream: _channel.stream,
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  final data = snapshot.data as Uint8List;
                  if (data.isNotEmpty) {
                    final list =
                        ObjectList.fromByteData(data.buffer.asByteData());

                    return DataTable2(
                      rows: List<DataRow>.generate(
                          list.nofObjects,
                          (index) => DataRow(cells: [
                                DataCell(Text(list.detail[index].x
                                    .toStringAsPrecision(2)))
                              ])),
                      columns: const [DataColumn2(label: Text('X'), size: ColumnSize.S)],
                    );
                  } else {
                    return const Text("No Data");
                  }
                }
                {
                  return const Text("No Data");
                }
              },
            )
          ],
        ),
      ),
    );
  }

[gawie-kellerman]

Found the answer...

    child: Column(
      children: [
        Expanded(
          child: StreamBuilder(
            stream: _channel.stream,

Didn't need this with DataTable. Apologies and thanks.

[maxim-saplin]

Great that you solved it