Milad-Akarie / skeletonizer

MIT License
292 stars 19 forks source link

Scrolling is not working in reorderable_grid_view package #26

Closed YazadDuamasia closed 4 months ago

YazadDuamasia commented 4 months ago

In my code, scrolling in not working during loading state in ReorderableGridView or ReorderableListView widget of reorderable_grid_view package.

Can here is my below code ` @override void initState() { super.initState(); WidgetsBinding.instance.addPostFrameCallback((_) { loadData(); }); }

@override Widget build(BuildContext context) { return SafeArea( child: WillPopScope( onWillPop: () async { Navigator.pop(context); return true; }, child: Scaffold( resizeToAvoidBottomInset: true, appBar: AppBar( title: Text( AppLocalizations.of(context) ?.translate(StringValue.table_info_app_bar_title) ?? "Table Info", ), actions: [ IconButton( onPressed: () { // Toggle between list and grid view setState(() { isGridView = !isGridView; }); }, icon: AnimatedSwitcher( duration: const Duration(milliseconds: 500), child: isGridView ? const Icon( Icons.list, key: ValueKey('list'), ) : const Icon( Icons.grid_view, key: ValueKey('grid'), ), ), tooltip: isGridView ? (AppLocalizations.of(context) ?.translate(StringValue.common_list_view_tooltip) ?? "Switch to List View") : (AppLocalizations.of(context) ?.translate(StringValue.common_grid_view_tooltip) ?? "Switch to Grid View"), ), IconButton( onPressed: () async { showDialog( context: context, builder: (context) { return NewTableDialog( onCreate: (newTableInfoModel) async { // Handle the creation of the new table here Constants.debugLog(TableScreen, 'Created new table: $newTableInfoModel'); int? result = await RestaurantRepository() .addNewTableInfo(newTableInfoModel); Constants.debugLog( TableScreen, "Created new:$result"); setState(() { loadData(); }); Navigator.of(context).pop(); if (result != null && result > 0) { Constants.customAutoDismissAlertDialog( classObject: TableScreen, context: context, descriptions: AppLocalizations.of(context) ?.translate(StringValue .table_added_successfully_text) ?? "New table has been added successfully.", title: "", titleIcon: Lottie.asset( MediaQuery.of(context).platformBrightness == Brightness.light ? StringImagePath .done_light_brown_color_lottie : StringImagePath.done_brown_color_lottie, repeat: false, ), navigatorKey: navigatorKey); } else { Constants.customAutoDismissAlertDialog( classObject: TableScreen, context: context, descriptions: AppLocalizations.of(context) ?.translate(StringValue .table_failed_to_added_text) ?? "Fail to add new table info.", title: "", titleIcon: Lottie.asset( MediaQuery.of(context).platformBrightness == Brightness.light ? StringImagePath .done_light_brown_color_lottie : StringImagePath.done_brown_color_lottie, repeat: false, ), navigatorKey: navigatorKey); } }, ); }, ); }, icon: const Icon( Icons.add, ), tooltip: AppLocalizations.of(context) ?.translate(StringValue.add_table_icon_tooltip_text) ?? "Add a new Table", ), ], ), body: Padding( padding: const EdgeInsets.fromLTRB(10, 10, 10, 10), child: AnimatedSwitcher( duration: const Duration(milliseconds: 500) child: isGridView ? Skeletonizer(enabled: isLoading, child: buildGridView()) : Skeletonizer(enabled: isLoading, child: buildListView()), )), ), ), ); }

Widget buildGridView() { return ReorderableGridView.builder( itemCount: list == null ? 0 : list!.length, itemBuilder: (context, index) => buildGridItem(list![index], index), shrinkWrap: true, addAutomaticKeepAlives: false, physics: const ClampingScrollPhysics(parent: AlwaysScrollableScrollPhysics()), addRepaintBoundaries: true, onReorder: onReOrder, placeholderBuilder: (dragIndex, dropIndex, dragWidget) { return Container( decoration: BoxDecoration( border: Border.all(color: Theme.of(context).colorScheme.tertiary), borderRadius: BorderRadius.circular(10.0), ), child: ClipRRect( borderRadius: BorderRadius.circular(10.0), child: const FrostedGlassWidget( child: SizedBox(), ), ), ); }, gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 2, crossAxisSpacing: 10, mainAxisSpacing: 10, childAspectRatio: 1.0, ), ); }

Widget buildGridItem(TableInfoModel model, var index) { return Card( key: ValueKey("$index"), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(5.0), ), elevation: 5, child: Stack( children: [ Material( color: Colors.transparent, child: InkWell( onTap: () async { await updateTableInfo(model, index); }, borderRadius: BorderRadius.circular(5.0), child: Center( child: Padding( padding: const EdgeInsets.only( left: 10, right: 10, top: 30, bottom: 10), child: Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [ Row( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [ Expanded( child: Text( "${AppLocalizations.of(context)?.translate(StringValue.table_name_label_text) ?? "Table Name"}: ${model.name}", textAlign: TextAlign.start), ), ], ), Row( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [ Expanded( child: Text( "${AppLocalizations.of(context)?.translate(StringValue.table_nos_of_chairs_label_text) ?? "Nos Of Chairs per Table"}: ${model.nosOfChairs}", textAlign: TextAlign.start), ), ], ), ], ), ), ), ), ), Positioned( top: 5.0, // Adjust the top position as needed right: 5.0, // Adjust the right position as needed child: GestureDetector( onTap: () async => onDeletedAction(model, index), child: const Icon( Icons.delete, color: Colors.red, size: 24.0, ), ), ), ], ), ); }

Widget buildListView() { return ReorderableListView.builder( itemCount: list == null ? 0 : list!.length, itemBuilder: (context, index) => buildListItem(list![index], index), onReorder: onReOrder, proxyDecorator: (child, index, animation) { return AnimatedBuilder( animation: animation, builder: (BuildContext context, Widget? child) { final double animValue = Curves.easeInOut.transform(animation.value); final double elevation = lerpDouble(1, 6, animValue)!; final double scale = lerpDouble(1, 1.02, animValue)!; return Transform.scale( scale: scale, child: buildListItem(list![index], index), ); }, child: child, ); }, ); }

Widget buildListItem(TableInfoModel model, var index) { return Card( key: ValueKey("$index"), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(5.0), ), elevation: 5, child: Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [ Material( color: Colors.transparent, child: InkWell( onTap: () async { await updateTableInfo(model, index); }, borderRadius: BorderRadius.circular(5.0), child: Padding( padding: const EdgeInsets.all(5.0), child: Row( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center, mainAxisSize: MainAxisSize.min, children: [ Expanded( child: Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [ Row( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [ Expanded( child: Text( "${AppLocalizations.of(context)?.translate(StringValue.table_name_label_text) ?? "Table Name"}: ${model.name}", textAlign: TextAlign.start), ), ], ), const SizedBox( height: 5, ), Row( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [ Expanded( child: Text( "${AppLocalizations.of(context)?.translate(StringValue.table_nos_of_chairs_label_text) ?? "Nos Of Chairs per Table"}: ${model.nosOfChairs}", textAlign: TextAlign.start), ), ], ), ], ), ), Visibility( visible: index == 0 ? false : true, child: IconButton( onPressed: () async { await onMoveItemUp(index); }, icon: const Icon(Icons.arrow_upward_rounded), ), ), Visibility( visible: index < (list!.length - 1), child: IconButton( onPressed: () async { await onMoveItemDown(index); }, icon: const Icon(Icons.arrow_downward_rounded), ), ), GestureDetector( onTap: () async => onDeletedAction(model, index), child: const Icon( Icons.delete, color: Colors.red, size: 24.0, ), ), ], ), ), ), ), ], ), ); }

List? _placeHolderData() { return List.generate( 25, (index) => TableInfoModel( name: "", id: index, nosOfChairs: 4, sortOrderIndex: index)); }`

Milad-Akarie commented 4 months ago

@YazadDuamasia set ignore pointers to false

image