RefreshIndicator problems with ReorderableGridView

[timonaldenhoff]

In my app, I use an Refreshindicator to reload data and it worked fine with the normal GridView.

I use the ReorderableWrap when the display is too small for > 1 columns. There are no problems with the RefreshIndicator.

Do you have an idea / fix for this?

Flutter tree: RefreshIndicator -- Container -- ValueListenableBuilder -- ReorderableGridView

Thank you very much!

[karvulf]

Hi @timonaldenhoff

Thank you for your message. I am not sure what exactly your problem is. Is your RefreshIndicator above the ReorderableWrap and is not showing up? Or do you have children that have a RefreshIndicator?

Maybe it would be easier to understand your problem with some example code.

[timonaldenhoff]

Hello,

Thank you for your quick response.

When I wipe down the refresh indicator, nothing happens. With the ReorderableWrap everything works as expected.

The Refreshindicator is above the ReordableWrap/Grid:

return RefreshIndicator( key: fielsScreenState.refreshKey, color: Theme.of(context).primaryColor, onRefresh: () => syncFields(refreshKey: fielsScreenState.refreshKey),

  //build fields from database
  child: Container(
    child: ValueListenableBuilder(
      valueListenable: Hive.box(FieldBox).listenable(),
      builder: (BuildContext context, Box fieldBox, Widget widget) {
        //get list of active fields
        List<Field> _fields = FieldInterface().activeFields;

        if (_fields.length == 0) {
          //show add field button
          return AddButtonEmptyList(
            routes.InactiveFieldsRoute,
            onPressed: () => locator<AnalyticsService>()
                .logEvent("field_add_empty_button"),
          );
        } else {
          return ValueListenableBuilder(
            valueListenable: Hive.box(GridBox).listenable(),
            builder: (BuildContext context, Box gridBox, Widget widget)

{ final GridType _gridType = GridInterface().gridFieldType;

              return CurrentNotificationBle(
                fielsScreenState,
                child: GridViewResponsive(
                  (BuildContext context, int index) =>
                      FieldsListItem(_fields[index], _gridType),
                  _fields.length,
                  isDesktop: isDesktop,
                  gridType: _gridType,
                  draggable: true,
                  onReorder: FieldInterface().reorderFields,
                ),
              );
            },
          );
        }
      },
    ),
  ),
);

class GridViewResponsive extends StatelessWidget { final int itemCount; final GridType gridType; final bool isDesktop; final Widget Function(BuildContext, int) itemBuilder; final bool draggable; final void Function(int, int) onReorder;

const GridViewResponsive(this.itemBuilder, this.itemCount, {Key key, this.gridType = GridType.full, @required this.isDesktop, this.draggable = false, this.onReorder}) : super(key: key);

@override Widget build(BuildContext context) { final double _aspectRatio = _calcFieldAspectRatio( MediaQuery.of(context).size.width, isDesktop, gridType); final int _columns = _calcFieldColumnCount(_aspectRatio, gridType);

if (!draggable)
  return GridView.builder(
    padding: const EdgeInsets.all(3),
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: _columns,
      childAspectRatio: _aspectRatio / _columns,
    ),
    itemCount: itemCount,
    itemBuilder: itemBuilder,
  );

if (_columns == 1)
  return Container(
    padding: const EdgeInsets.all(3),
    child: ReorderableWrap(
      children: List.generate(
          itemCount,
          (index) => Container(
                height: _aspectRatio * 100,
                child: itemBuilder(context, index),
              )),
      onReorder: onReorder,
      spacing: 0,
      runSpacing: 0,
    ),
  );

return ReorderableGridView(
  padding: const EdgeInsets.all(3),
  children: List.generate(
    itemCount,
    (index) => itemBuilder(context, index),
  ),
  onReorder: onReorder,
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: _columns,
    childAspectRatio: _aspectRatio / _columns,
  ),
);

}

double _calcFieldAspectRatio( double width, bool isDesktop, GridType gridType) { return (width - (isDesktop ? 310 : 0)) / 200; }

int _calcFieldColumnCount(double aspectRatio, GridType gridType) { return (aspectRatio / (gridType == GridType.full ? 3 : 1.6)).floor() + 1 ; } }

Thank you.

Best regards

Timon Aldenhoff

Am Fr., 12. Nov. 2021 um 16:00 Uhr schrieb karvulf @.***

:

Hi @timonaldenhoff https://github.com/timonaldenhoff

Thank you for your message. I am not sure what exactly your problem is. Is your RefreshIndicator above the ReorderableWrap and is not showing up? Or do you have children that have a RefreshIndicator?

Maybe it would be easier to understand your problem with some example code.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/karvulf/flutter-reorderable-grid-view/issues/7#issuecomment-967181675, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJNRIWUYP7Y5FZHGHAWTHADULUTX5ANCNFSM5H4R3BFA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[karvulf]

Ah Ok, now I understand! I'll check it out tomorrow @timonaldenhoff

[karvulf]

I found your issue and fixed it. If you use version 1.0.2, it should work also with GridView. Be sure to use Clip.none for clipBehavior when you scroll because otherwise the displayed content in iOS will be clipped when you scroll with a few items @timonaldenhoff