dart - Why doesn't the UI in Flutter's SpannableGrid widget refresh to update with latest content from stream of String?

Question

1. WallStream class gives me a stream of string that is incremented every 1 second as the app runs
2. I'm using the spannable_grid from https://pub.dev/packages/spannable_grid. Whenever the stream content change, I'm expecting _buildData to also change (which it does, due to the printed value on line 27). I then add a new SpannableGridCellData with the updated content to a list and return a new SpannableGrid widget based on the updated cells. I expect the UI to change to show the new content but it doesn't. Why not?

pubspec.yaml

  spannable_grid: ^0.1.3
  provider: ^3.1.0

main.dart

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:spannable_grid/spannable_grid.dart';

void main() => runApp(MaterialApp(home: WallPane()));

class WallPane extends StatefulWidget {
  @override
  _WallPaneState createState() => _WallPaneState();
}

class _WallPaneState extends State<WallPane> {
  @override
  Widget build(BuildContext context) {
    return StreamProvider<String>.value(
        value: WallStream.instance.wallStateStream,
        child: new LayoutBuilder(
            builder: (BuildContext context, BoxConstraints constraints) {
          return _buildData(context, constraints);
        }));
  }

  Widget _buildData(BuildContext context, BoxConstraints constraints) {
    String content = Provider.of<String>(context);
    print(content);

    List<SpannableGridCellData> cells = List();
    cells.add(SpannableGridCellData(
      column: 1,
      row: 1,
      columnSpan: 2,
      rowSpan: 2,
      id: content,
      child: Container(
        color: Colors.lime,
        child: Center(
          child: Text(content),
        ),
      ),
    ));

    return SpannableGrid(
      columns: 4,
      rows: 4,
      cells: cells,
      spacing: 2.0,
      onCellChanged: (cell) {
        print('Cell ${cell.id} changed');
      },
    );
  }
}

class WallStream {
  static int _counter = 0;

  Stream<String> get wallStateStream async* {
    while (true) {
      yield (_counter++).toString();
      await Future.delayed(Duration(seconds: 1));
    }
  }

  WallStream._privateConstructor();
  static final WallStream instance = WallStream._privateConstructor();
}

3. I also looked up the source code here (https://raw.githubusercontent.com/ech89899/spannablegrid-flutter/master/lib/spannable_grid.dart - I don't think it's updated with the latest code yet but I tried to use the code seen on the repo and have the same problem). I don't understand why performLayout in class _SpannableGridDelegate extends MultiChildLayoutDelegate is called whenever I see the stream data change but the cell.Child doesn't have the latest data.

Please help. Thank you in advance.

question from:https://stackoverflow.com/questions/65857129/why-doesnt-the-ui-in-flutters-spannablegrid-widget-refresh-to-update-with-late

Answer 1

I am author of SpannableGrid package. Thank you for using it, and for the feedback provided.

There was a bug in the package. I've added a fix for this. Please check if the version 0.1.4+ will work for you.