Dimibe/sticky_grouped_list

(Flutter Web) App crashes randomly when new group separator appears from the bottom

Opened this issue · 0 comments

I'm using a StickyGroupedListView to separate listview items by date, specifically by week.

When scrolling it randomly crashes when the separator appears from the bottom with an exception that I can't quite make sense of.

The list has about 25 items if that matters.

I'm pretty new to Flutter, so I'm sorry if the code is messy.

The code of the StickyGroupedListView:

StickyGroupedListView<TransactionData, DateTime>(
      elements: transactions,
      order: StickyGroupedListOrder.ASC,
      groupBy: (TransactionData transaction) =>
          getStartOfWeek(transaction.date),
      groupComparator: (DateTime value1, DateTime value2) =>
          value2.compareTo(value1),
      floatingHeader: true,
      groupSeparatorBuilder: (TransactionData transaction) => Container(
        height: 50,
        margin: EdgeInsets.all(8),
        child: Align(
          alignment: Alignment.center,
          child: Container(
            width: 300,
            decoration: BoxDecoration(
              color: Color(0xff3447d4),
              borderRadius: BorderRadius.all(Radius.circular(18.0)),
            ),
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(
                '${getStartOfWeek(transaction.date).day}. ${getStartOfWeek(transaction.date).month}. ${getStartOfWeek(transaction.date).year}',
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 20,
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ),
      ),
      itemBuilder: (_, TransactionData transaction) {
        return Container(
          margin: EdgeInsets.symmetric(horizontal: 25, vertical: 10),
          child: Card(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(12),
            ),
            elevation: 6,
            child: InkWell(
              onTap: () => transactionDialog(
                  context,
                  Provider.of<FirebaseServices>(context, listen: false),
                  transaction),
              borderRadius: BorderRadius.circular(12),
              child: Padding(
                padding:
                    const EdgeInsets.symmetric(vertical: 10, horizontal: 15),
                child: Row(
                  children: <Widget>[
                    Image.asset(setImage(transaction.buy)),
                    SizedBox(width: 10),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          getTransactionTitle(transaction),
                          style: TextStyle(
                            color: Colors.black,
                            fontSize: 25.0,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        Text(
                          DateFormat('dd.MM.yyyy').format(transaction.date),
                          style: TextStyle(
                            fontSize: 20.0,
                            color: Colors.grey.withOpacity(0.8),
                          ),
                        ),
                        Text(transaction.id.toString()),
                      ],
                    ),
                    Spacer(),
                    getTransactionAmountWidget(transaction),
                  ],
                ),
              ),
            ),
          ),
        );
      },
    );

The exception:

Assertion failed: org-dartlang-sdk:///flutter_web_sdk/lib/_engine/engine/html/picture.dart:54:10
canvas == null || !_recycledCanvases.contains(canvas)
is not true

When the exception was thrown, this was the stack: 
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 231:49  throw_
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 24:3    assertFailed
C:/b/s/w/ir/cache/builder/src/out/host_debug/flutter_web_sdk/lib/_engine/engine/html/picture.dart 54:62                    _recycleCanvas
C:/b/s/w/ir/cache/builder/src/out/host_debug/flutter_web_sdk/lib/_engine/engine/html/picture.dart 591:5                    discard
C:/b/s/w/ir/cache/builder/src/out/host_debug/flutter_web_sdk/lib/_engine/engine/html/surface.dart 802:14                   _discardActiveChildren
...
====================================================================================================

======== Exception caught by scheduler library =====================================================
PersistedPhysicalShape: is in an unexpected state.
Expected one of: PersistedSurfaceState.active, PersistedSurfaceState.released
But was: PersistedSurfaceState.pendingRetention
====================================================================================================

The latter exception is listed multiple times.