Grid layout package

Plugins & Packages
1

Hi,

I’m quite excited to share something I’ve been working on.
This is a grid layout package for building dashboards.

Context:
I tried some existing grid packages but never been completely satisfied:

  • some have poor performance (no itembuilder etc), or
  • missing features (drag/drop, smart rearranging items)
  • require additional packages to add features like drag/drop for instance.
  • no updates
  • frustrating to see JS ecosystem with full featured grid packages although some of them are also in maintenance mode ^^

I’ve been using the “dashboard” package for a while, it was convenient but no more updates, had to tweak its code, miss features too.

So, I created my own, from scratch, all batteries included.

Description:

Provides a robust foundation for building dynamic, user-configurable layouts, like analytics dashboards, IoT control panels, project management tools (kanban..), or any application that requires a draggable and resizable grid layout.

Features:

  • Performant: Built on Flutter’s Sliver protocol with smart caching. It only renders visible items and prevents unnecessary rebuilds of children during drag/resize operations.
  • Fully Customizable: Control the number of columns, aspect ratio, spacing, grid and handles style. Items can be draggable, resizable, and static.
  • Horizontal & Vertical Layouts: Supports both vertical (default) and horizontal scrolling directions.
  • Smart Collision Detection: Choose your desired behavior:
    • Push: Items push each other out of the way to avoid overlap.
    • Push or Shrink: Items can be shrinked or pushed when resizing a neighbour item. In Shrink mode, if neighbour item has not enough space, then it will be pushed.
  • Compaction: Choose your desired behavior:
    • None: Free positioning. Items are not compacted.
    • Vertical: Items are compacted to top.
    • Horizontal: Items are compacted to left.
  • Built-in Trash: Easy-to-implement drag-to-delete functionality.
  • Custom Feedback: Customize the appearance of items while they are being dragged. Use onInteractionStart callback for haptic feedback…
  • Drag From Outside: Drop new items from external sources directly into the grid with auto-scrolling support.
  • Guidance: Optional contextual tooltips/guidance messages.

Quick demo (video size is limited to show all features)
demo

I’ve been hesitating to share it, because I miss time for helping others, but I’ll do it with the hope that some people will be interested to contribute :crossed_fingers:

I’m planning to publish it this week I think. I just need to polish one last usecase (drop an item from the dashboard to a special “group” item with its own dashboard (like a folder) without the group item being pushed when I hover it while dragging.
I also need to find a better name, because this is not a fork and I’m not fan of the ‘_plus’ extension.
Documentation, tests etc, are ready.

I’ll update here once it’s available publicly.

1 Like
2

Someone will eventually be a dumbass and ask you why this package is better than X or Y.

On a totally non-related question: How this package is different from flutter_layout_grid | Flutter package?

3

I made it for the reasons I explained above, by testing packages, what I meant may become more obvious probably. I’m waiting for someone to show me a demo of a pub dev package with same features I showed in my demo (if there is one, I would use it and not release mine->no maintenance burden).
I’m not planning to make a comparison table, don’t have time to debate with others, I’m just gonna share my work you know, fix what I need, and if some people contribute then I might be more motivated to help.
I don’t even think that I will show it on reddit. I hesitated to show it here but this seems more peaceful, so here I am :slight_smile:

But to answer to your question.
if you check flutter_layout_grid:

  • it doesn’t have an itemBuilder, instead it uses a List of Widget
  • not based on sliver (no reference to a CustomScrollview, sliver, or a SliverMultiBoxAdaptorWidget).
  • opened issues vs features I mentioned in my description

Atm my implementation, in the Dashboard widget, is using internally a CustomScrollView and SliverMultiBoxAdaptorWidget (for custom sliver). I plan to add another widget “SliverDashboard” (I have a poc), to make it composable in your CustomScrollView with other slivers like SliverAppBar, SliverList, or even multiple SliverDashboard why not.

I hope this answers your question.

4

I didn’t even try it on web..
+600 simple items
flutter run -d chrome --release

web

5

And voilà, I just published my package. My first contribution to the community :slight_smile:
Here is the link for those who are interested. Feel free to contribute.

3 Likes
6

Awesome work, thanks for sharing! :flexed_biceps::raising_hands:

1 Like
7

thank you. I’m glad if it can help others.

An example of integration in app (for my smarthome):

front
front1292×834 196 KB

Using Flutter since 2019, and love it. Flutter rocks :fire:

8

And I’m currently working on a new widget for the package, to complete my roadmap:
“SliverDashboard” to compose seamlessly with SliverAppBar, SliverList..
I hope to get it right :crossed_fingers:
So far, SliverAppBar + SliverDashboard + SliverList:
test564