A Flutter staggered grid view

Romain Rastel

Last update: Dec 30, 2022

Related tags

UI dart flutter staggeredgrid

Overview

flutter_staggered_grid_view

A Flutter staggered grid view which supports multiple columns with rows of varying sizes.

Features

Configurable cross-axis count or max cross-axis extent like the GridView
Tiles can have a fixed main-axis extent, or a multiple of the cell's length.
Configurable main-axis and cross-axis margins between tiles.
SliverStaggeredGrid for using in a CustomScrollView.
Staggered and Spannable grid layouts.

Tiles can fit the content in the main axis.

Getting started

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  ...
  flutter_staggered_grid_view: <latest_version>

In your library add the following import:

import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

For help getting started with Flutter, view the online documentation.

Example

new StaggeredGridView.countBuilder(
  crossAxisCount: 4,
  itemCount: 8,
  itemBuilder: (BuildContext context, int index) => new Container(
      color: Colors.green,
      child: new Center(
        child: new CircleAvatar(
          backgroundColor: Colors.white,
          child: new Text('$index'),
        ),
      )),
  staggeredTileBuilder: (int index) =>
      new StaggeredTile.count(2, index.isEven ? 2 : 1),
  mainAxisSpacing: 4.0,
  crossAxisSpacing: 4.0,
)

You can find more examples in the Example project.

Constructors

The StaggeredGridView follow the same constructors convention than the GridView.
There are two more constructors: countBuilder and extentBuilder. These constructors allow you to define a builder for the layout and a builder for the children.

Tiles

A StaggeredGridView needs to know how to display each tile, and what widget is associated with a tile.

A tile needs to have a fixed number of cell to occupy in the cross axis. For the extent in the main axis you have 3 options:

You want a fixed number of cells => use StaggeredTile.count.
You want a fixed extent => use StaggeredTile.extent.
You want a variable extent, defined by the content of the tile itself => use StaggeredTile.fit.

Changelog

Please see the Changelog page to know what's recently changed.

Contributions

Feel free to contribute to this project.

If you find a bug or want a feature, but don't know how to fix/implement it, please fill an issue.
If you fixed a bug or implemented a new feature, please send a pull request.

Comments

Very poor performance with SliverStaggeredGrid.countBuilder on ^3.0.0
Environment information: Flutter version 1.12.13+hotfix.7 Dart version 2.7.0 Platform: android-29, build-tools 29.0.3

Testing devices: Android device on API level 29 Android emulator for API level 29

Runtime environments tested: Debug Profile

SliverStaggeredGrid.countBuilder( itemCount: this.widget.data.length, crossAxisCount: 2, staggeredTileBuilder: (index) { return new StaggeredTile.fit(1); }, itemBuilder: (context, index) { return ListingCard(data: this.widget.data[index]); } )

~~The issue: When scrolling scrolling down a list of items, SliverStaggeredGrid executes itemBuilder() for every item in its data set whenever a single item becomes visable in the viewport, this appears to cause unacceptable performance degredation on both UI and logic threads, 10fps etc.~~

A large number of cells are rebuilt each frame when scrolling.

It also seems to agressively call staggeredTileBuilder() though I'm not sure if that's by design.
waiting-response performance P1 possible-solution
opened by orible 49
Is there a way to adjust the height of tile according to its content size.

I am trying to implement a staggered grid view with images according to Aspect Ratio but height can be dynamic. But according to your current implementation, I cannot do so as I have to provide the mainAxisCellCount
question

opened by vipulasri 44

Unhandled Exception: type 'SliverHitTestResult' is not a subtype of type 'BoxHitTestResult'

flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel master, v1.5.9-pre.188, on Microsoft Windows [Version 10.0.18356.16], locale zh-CN)

[√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[√] Android Studio (version 3.4)
[√] VS Code (version 1.33.1)
[√] Connected device (2 available)

• No issues found!

Logs

E/flutter ( 2748): [ERROR:flutter/lib/ui/ui_dart_state.cc(148)] Unhandled Exception: type 'SliverHitTestResult' is not a subtype of type 'BoxHitTestResult'
E/flutter ( 2748): #0      RenderSliverVariableSizeBoxAdaptor.hitTestChildren (package:flutter_staggered_grid_view/src/rendering/sliver_variable_size_box_adaptor.dart:380:27)
E/flutter ( 2748): #1      RenderSliver.hitTest (package:flutter/src/rendering/sliver.dart:1273:11)
E/flutter ( 2748): #2      SliverHitTestResult.addWithAxisOffset (package:flutter/src/rendering/sliver.dart:850:19)
E/flutter ( 2748): #3      RenderSliverPadding.hitTestChildren (package:flutter/src/rendering/sliver_padding.dart:266:14)
E/flutter ( 2748): #4      RenderSliver.hitTest (package:flutter/src/rendering/sliver.dart:1273:11)
E/flutter ( 2748): #5      RenderViewportBase.hitTestChildren.<anonymous closure> (package:flutter/src/rendering/viewport.dart:585:24)
E/flutter ( 2748): #6      BoxHitTestResult.addWithRawTransform (package:flutter/src/rendering/box.dart:791:19)
E/flutter ( 2748): #7      BoxHitTestResult.addWithPaintTransform (package:flutter/src/rendering/box.dart:722:12)
E/flutter ( 2748): #8      RenderViewportBase.hitTestChildren (package:flutter/src/rendering/viewport.dart:581:33)
E/flutter ( 2748): #9      RenderBox.hitTest (package:flutter/src/rendering/box.dart:2100:11)
E/flutter ( 2748): #10     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.hitTestChildren (package:flutter/src/rendering/proxy_box.dart:114:19)
E/flutter ( 2748): #11     RenderBox.hitTest (package:flutter/src/rendering/box.dart:2100:11)
E/flutter ( 2748): #12     RenderIgnorePointer.hitTest (package:flutter/src/rendering/proxy_box.dart:2963:37)
E/flutter ( 2748): #13     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.hitTestChildren (package:flutter/src/rendering/proxy_box.dart:114:19)
E/flutter ( 2748): #14     RenderBox.hitTest (package:flutter/src/rendering/box.dart:2100:11)
E/flutter ( 2748): #15     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.hitTestChildren (package:flutter/src/rendering/proxy_box.dart:114:19)
E/flutter ( 2748): #16     RenderProxyBoxWithHitTestBehavior.hitTest (package:flutter/src/rendering/proxy_box.dart:161:19)
E/flutter ( 2748): #17     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.hitTestChildren (package:flutter/src/rendering/proxy_box.dart:114:19)
E/flutter ( 2748): #18     RenderBox.hitTest (package:flutter/src/rendering/box.dart:2100:11)
E/flutter ( 2748): #19     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.hitTestChildren (package:flutter/src/rendering/proxy_box.dart:114:19)
E/flutter ( 2748): #20     RenderProxyBoxWithHitTestBehavior.hitTest (package:flutter/src/rendering/proxy_box.dart:161:19)
E/flutter ( 2748): #21     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.hitTestChildren (package:flutter/src/rendering/proxy_box.dart:114:19)
E/flutter ( 2748): #22     RenderBox.hitTest (package:flutter/src/rendering/box.dart:2100:11)
E/flutter ( 2748): #23     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.hitTestChildren (package:flutter/src/rendering/proxy_box.dart:114:19)
E/flutter ( 2748): #24     RenderBox.hitTest (package:flutter/src/rendering/box.dart:2100:11)
E/flutter ( 2748): #25     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.hitTestChildren (package:flutter/src/rendering/proxy_box.dart:114:19)
E/flutter ( 2748): #26     RenderCustomPaint.hitTestChildren (package:flutter/src/rendering/custom_paint.dart:508:18)
E/flutter ( 2748): #27     RenderBox.hitTest (package:flutter/src/rendering/box.dart:2100:11)
E/flutter ( 2748): #28     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.hitTestChildren (package:flutter/src/rendering/proxy_box.dart:114:19)
E/flutter ( 2748): #29     RenderBox.hitTest (package:flutter/src/rendering/box.dart:2100:11)
E/flutter ( 2748): #30     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.hitTestChildren (package:flutter/src/rendering/proxy_box.dart:114:19)
E/flutter ( 2748): #31     RenderBox.hitTest (package:flutter/src/rendering/box.dart:2100:11)
E/flutter ( 2748): #32     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.hitTestChildren (package:flutter/src/rendering/proxy_box.dart:114:19)
E/flutter ( 2748): #33     RenderCustomPaint.hitTestChildren (package:flutter/src/rendering/custom_paint.dart:508:18)
E/flutter ( 2748): #34     RenderBox.hitTest (package:flutter/src/rendering/box.dart:2100:11)
E/flutter ( 2748): #35     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.hitTestChildren (packa

opened by KagurazakaHanabi 25

Failed assertion: line 2653 pos 12: '!_needsLayout'

I will investigate how I got the error since It happened and I was not paying attention to the part of the code that I was executing.

Here are the logs:

════════ Exception caught by scheduler library ═════════════════════════════════ The following assertion was thrown during a scheduler callback: Updated layout information required for RenderIndexedSemantics#31dd4 NEEDS-LAYOUT NEEDS-PAINT to calculate semantics. 'package:flutter/src/rendering/object.dart': Failed assertion: line 2653 pos 12: '!_needsLayout'

2

Either the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause. In either case, please report this assertion by filing a bug on GitHub: https://github.com/flutter/flutter/issues/new?template=2_bug.md

When the exception was thrown, this was the stack #2 RenderObject._getSemanticsForParent package:flutter/…/rendering/object.dart:2653 #3 RenderObject._getSemanticsForParent. package:flutter/…/rendering/object.dart:2675 #4 Iterable.forEach (dart:core/iterable.dart:257:30) #5 RenderSliverVariableSizeBoxAdaptor.visitChildren package:flutter_staggered_grid_view/…/rendering/sliver_variable_size_box_adaptor.dart:296 #6 RenderObject.visitChildrenForSemantics package:flutter/…/rendering/object.dart:2760 ... ════════════════════════════════════════════════════════════════════════════════ Also mentioned here https://github.com/flutter/flutter/issues/84173.
waiting-response

opened by gabrielamota29 23
Low FPS when handling large arrays of items

Hey,

I am displaying an array of 100 items each containing around 10 widgets using the builder (context, index), and I have very low FPS when scrolling in the middle of the grid.

Can you please look into this ASAP?

Thanks in advance!

opened by BlueskyFR 21
StaggeredGridView.countBuilder performance

Hi,

I have performance issues while scrolling. My grid contains like 30 items.

Do some of you had fixed somehow this issue. Probably its deeper at this lib.
waiting-response

opened by Sesa1988 19
Memory does not decrease with a large list.

Memory does not decrease with a large list. I tried SliverStaggeredGrid.builder and SliverStaggeredGrid.countBuilder with a large number of tiles. When I scroll, the old item in the grid which disappeared still alive and took lots of my memory. The problem is when my list has many items. App will crash because the memory is not enough. => I tried to change to Gridview.builder. The problem is solved. Gridview.builder release old item which disappeared and rebuild when items are showed on screen.
waiting-response

opened by vantrung8794 13
Not rendering well after resizing screen in web

When it resizes the window, it should rebuild and add or remove a widget, but it has a bad render (the widgets stays hidden or it doesn't update). Here is more information about this issue. A post I did in Stack overflow. https://stackoverflow.com/questions/66765557/how-can-i-rebuild-if-the-width-of-the-screen-changes-in-web/66767567?noredirect=1#comment118053973_66767567
waiting-response

opened by jonhygg99 13

Sometimes exceptions are thrown

dependencies:
    flutter_staggered_grid_view: ^0.2.7

22:58:53.521 255 info flutter.tools  ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
22:58:53.534 256 info flutter.tools  The following NoSuchMethodError was thrown during performLayout():
22:58:53.534 257 info flutter.tools  The getter 'parentData' was called on null.
22:58:53.534 258 info flutter.tools  Receiver: null
22:58:53.534 259 info flutter.tools  Tried calling: parentData
22:58:53.534 260 info flutter.tools 
22:58:53.534 261 info flutter.tools  When the exception was thrown, this was the stack:
22:58:53.551 262 info flutter.tools  #0      Object.noSuchMethod (dart:core-patch/object_patch.dart:50:5)
22:58:53.551 263 info flutter.tools  #1      RenderSliverVariableSizeBoxAdaptor.remove (package:flutter_staggered_grid_view/src/rendering/sliver_variable_size_box_adaptor.dart:209:15)
22:58:53.551 264 info flutter.tools  #2      SliverVariableSizeBoxAdaptorElement.removeChildRenderObject (package:flutter_staggered_grid_view/src/widgets/sliver.dart:313:18)
22:58:53.551 265 info flutter.tools  #3      RenderObjectElement.detachRenderObject (package:flutter/src/widgets/framework.dart:4744:36)
22:58:53.551 266 info flutter.tools  #4      Element.detachRenderObject.<anonymous closure> (package:flutter/src/widgets/framework.dart:2867:13)
22:58:53.551 267 info flutter.tools  #5      ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3770:14)
22:58:53.551 268 info flutter.tools  #6      Element.detachRenderObject (package:flutter/src/widgets/framework.dart:2866:5)
22:58:53.551 269 info flutter.tools  #7      Element.detachRenderObject.<anonymous closure> (package:flutter/src/widgets/framework.dart:2867:13)
22:58:53.551 270 info flutter.tools  #8      ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3770:14)
22:58:53.551 271 info flutter.tools  #9      Element.detachRenderObject (package:flutter/src/widgets/framework.dart:2866:5)
22:58:53.551 272 info flutter.tools  #10     Element.detachRenderObject.<anonymous closure> (package:flutter/src/widgets/framework.dart:2867:13)
22:58:53.552 273 info flutter.tools  #11     ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3770:14)
22:58:53.554 274 info flutter.tools  #12     Element.detachRenderObject (package:flutter/src/widgets/framework.dart:2866:5)
22:58:53.554 275 info flutter.tools  #13     Element.deactivateChild (package:flutter/src/widgets/framework.dart:2996:11)
22:58:53.554 276 info flutter.tools  #14     Element.updateChild (package:flutter/src/widgets/framework.dart:2741:9)
22:58:53.554 277 info flutter.tools  #15     SliverVariableSizeBoxAdaptorElement.updateChild (package:flutter_staggered_grid_view/src/widgets/sliver.dart:170:36)
22:58:53.554 278 info flutter.tools  #16     SliverVariableSizeBoxAdaptorElement.removeChild.<anonymous closure> (package:flutter_staggered_grid_view/src/widgets/sliver.dart:201:32)
22:58:53.554 279 info flutter.tools  #17     BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2258:19)
22:58:53.555 280 info flutter.tools  #18     SliverVariableSizeBoxAdaptorElement.removeChild (package:flutter_staggered_grid_view/src/widgets/sliver.dart:197:11)
22:58:53.555 281 info flutter.tools  #19     List.forEach (dart:core-patch/growable_array.dart:278:8)
22:58:53.555 282 info flutter.tools  #20     RenderSliverVariableSizeBoxAdaptor.collectGarbage.<anonymous closure> (package:flutter_staggered_grid_view/src/rendering/sliver_variable_size_box_adaptor.dart:342:12)
22:58:53.555 283 info flutter.tools  #21     RenderObject.invokeLayoutCallback.<anonymous closure> (package:flutter/src/rendering/object.dart:1740:58)
22:58:53.557 284 info flutter.tools  #22     PipelineOwner._enableMutationsToDirtySubtrees (package:flutter/src/rendering/object.dart:797:15)
22:58:53.557 285 info flutter.tools  #23     RenderObject.invokeLayoutCallback (package:flutter/src/rendering/object.dart:1740:13)
22:58:53.557 286 info flutter.tools  #24     RenderSliverVariableSizeBoxAdaptor.collectGarbage (package:flutter_staggered_grid_view/src/rendering/sliver_variable_size_box_adaptor.dart:328:5)
22:58:53.557 287 info flutter.tools  #25     RenderSliverStaggeredGrid.performLayout (package:flutter_staggered_grid_view/src/rendering/sliver_staggered_grid.dart:364:5)
22:58:53.557 288 info flutter.tools  #26     RenderObject.layout (package:flutter/src/rendering/object.dart:1644:7)
22:58:53.558 289 info flutter.tools  #27     RenderSliverPadding.performLayout (package:flutter/src/rendering/sliver_padding.dart:182:11)
22:58:53.558 290 info flutter.tools  #28     RenderObject.layout (package:flutter/src/rendering/object.dart:1644:7)
22:58:53.559 291 info flutter.tools  #29     RenderViewportBase.layoutChildSequence (package:flutter/src/rendering/viewport.dart:407:13)
22:58:53.559 292 info flutter.tools  #30     RenderViewport._attemptLayout (package:flutter/src/rendering/viewport.dart:1322:12)
22:58:53.559 293 info flutter.tools  #31     RenderViewport.performLayout (package:flutter/src/rendering/viewport.dart:1240:20)
22:58:53.561 294 info flutter.tools  #32     RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:1519:7)
22:58:53.561 295 info flutter.tools  #33     PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:766:18)
22:58:53.561 296 info flutter.tools  #34     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:347:19)
22:58:53.561 297 info flutter.tools  #35     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:701:13)
22:58:53.561 298 info flutter.tools  #36     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:286:5)
22:58:53.561 299 info flutter.tools  #37     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1012:15)
22:58:53.562 300 info flutter.tools  #38     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:952:9)
22:58:53.563 301 info flutter.tools  #39     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:864:5)
22:58:53.563 302 info flutter.tools  #43     _invoke (dart:ui/hooks.dart:219:10)
22:58:53.563 303 info flutter.tools  #44     _drawFrame (dart:ui/hooks.dart:178:3)
22:58:53.563 304 info flutter.tools  (elided 3 frames from package dart:async)
22:58:53.580 305 info flutter.tools 
22:58:53.580 306 info flutter.tools  The following RenderObject was being processed when the exception was fired:
22:58:53.580 307 info flutter.tools    RenderSliverStaggeredGrid#6bd71 relayoutBoundary=up2 NEEDS-LAYOUT
22:58:53.580 308 info flutter.tools    creator: SliverStaggeredGrid ← SliverPadding ← Viewport ← IgnorePointer-[GlobalKey#4d84d] ←
22:58:53.580 309 info flutter.tools    Semantics ← Listener ← _GestureSemantics ←
22:58:53.580 310 info flutter.tools    RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#2bfc9] ← Listener ← _ScrollableScope
22:58:53.580 311 info flutter.tools    ← _ScrollSemantics-[GlobalKey#e7695] ← Scrollable ← ⋯
22:58:53.580 312 info flutter.tools    parentData: paintOffset=Offset(12.0, 0.0) (can use size)
22:58:53.580 313 info flutter.tools    constraints: SliverConstraints(AxisDirection.down, GrowthDirection.forward,
22:58:53.580 314 info flutter.tools    ScrollDirection.reverse, scrollOffset: 9886.5, remainingPaintExtent: 796.0, crossAxisExtent:
22:58:53.580 315 info flutter.tools    390.0, crossAxisDirection: AxisDirection.right, viewportMainAxisExtent: 796.0,
22:58:53.580 316 info flutter.tools    remainingCacheExtent: 1296.0 cacheOrigin: -238.0 )
22:58:53.580 317 info flutter.tools    geometry: SliverGeometry(scrollExtent: 11130.9, paintExtent: 796.0, maxPaintExtent: 11130.9,
22:58:53.580 318 info flutter.tools    hasVisualOverflow: true, cacheExtent: 1296.0)
22:58:53.580 319 info flutter.tools    currently live children:
22:58:53.580 320 info flutter.tools    153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176
22:58:53.581 321 info flutter.tools  This RenderObject had the following descendants (showing up to depth 5):
22:58:53.581 322 info flutter.tools    RenderIndexedSemantics#8f221
22:58:53.582 323 info flutter.tools      RenderRepaintBoundary#dba82
22:58:53.582 324 info flutter.tools        RenderClipRRect#8dd69
22:58:53.582 325 info flutter.tools          RenderStack#db0c3
22:58:53.582 326 info flutter.tools            RenderDecoratedBox#45a0e
22:58:53.582 327 info flutter.tools            RenderDecoratedBox#59a86 relayoutBoundary=up1
22:58:53.583 328 info flutter.tools            RenderSemanticsAnnotations#54eb2
22:58:53.583 329 info flutter.tools    RenderIndexedSemantics#ddbaa
22:58:53.583 330 info flutter.tools      RenderRepaintBoundary#d2a8a
22:58:53.583 331 info flutter.tools        RenderClipRRect#6a277
22:58:53.583 332 info flutter.tools          RenderStack#3e2d5
22:58:53.584 333 info flutter.tools            RenderDecoratedBox#b1c0e
22:58:53.584 334 info flutter.tools            RenderDecoratedBox#6825b relayoutBoundary=up1
22:58:53.584 335 info flutter.tools            RenderSemanticsAnnotations#7cd39
22:58:53.584 336 info flutter.tools    RenderIndexedSemantics#d90ce
22:58:53.584 337 info flutter.tools      RenderRepaintBoundary#98a90
22:58:53.584 338 info flutter.tools        RenderClipRRect#ec89c
22:58:53.584 339 info flutter.tools          RenderStack#79af4
22:58:53.586 340 info flutter.tools            RenderDecoratedBox#5591b
22:58:53.586 341 info flutter.tools            RenderDecoratedBox#8e709 relayoutBoundary=up1
22:58:53.586 342 info flutter.tools            RenderSemanticsAnnotations#a03ff
22:58:53.586 343 info flutter.tools    RenderIndexedSemantics#c4622
22:58:53.586 344 info flutter.tools      RenderRepaintBoundary#4f8a3
22:58:53.586 345 info flutter.tools        RenderClipRRect#46b38
22:58:53.587 346 info flutter.tools          RenderStack#bbd29
22:58:53.587 347 info flutter.tools            RenderDecoratedBox#95608
22:58:53.587 348 info flutter.tools            RenderDecoratedBox#4d9eb relayoutBoundary=up1
22:58:53.587 349 info flutter.tools            RenderSemanticsAnnotations#78f70
22:58:53.587 350 info flutter.tools  ════════════════════════════════════════════════════════════════════════════════════════════════════

waiting-response

opened by csshuai 13

SliverStaggeredGrid.countBuilder is building all widgets - terrible performance

/// This constructor is appropriate for grid views with a large (or infinite) /// number of children because the builder is called only for those children /// that are actually visible.

Above comment is as wrong as it can get, the SliverStaggeredGrid.countBuilder is building every single widget whenever the itemCount increases. This is causing a huge performance lag, and unnecessary consumption of memory.

Is this intended? If not, how do we fix it?

And if this was intended, then why put a comment like that on top of this function?

This is highly suprising for a plugin that has more than 2k stars on github. What is going on?
waiting-response

opened by frankyvij 12

Updated layout information required for RenderIndexedSemantics

After updated to the latest version, I am getting the following error while scrolling the grid:

Updated layout information required for RenderIndexedSemantics#8a24c NEEDS-LAYOUT to calculate semantics. - during a scheduler callback (scheduler library) [2021-05-13 09:50:28]
I/flutter ( 8564): Exception: 'package:flutter/src/rendering/object.dart': Failed assertion: line 2658 pos 12: '!_needsLayout': Updated layout information required for RenderIndexedSemantics#8a24c NEEDS-LAYOUT to calculate semantics.
I/flutter ( 8564): #0      _AssertionError._doThrowNew (dart:core-patch/errors_patch.dart:46:39)
I/flutter ( 8564): #1      _AssertionError._throwNew (dart:core-patch/errors_patch.dart:36:5)
I/flutter ( 8564): #2      RenderObject._getSemanticsForParent (package:flutter/src/rendering/object.dart:2658:12)
I/flutter ( 8564): #3      RenderObject._getSemanticsForParent.<anonymous closure> (package:flutter/src/rendering/object.dart:2680:61)
I/flutter ( 8564): #4      Iterable.forEach (dart:core/iterable.dart:257:30)
I/flutter ( 8564): #5      RenderSliverVariableSizeBoxAdaptor.visitChildren (package:flutter_staggered_grid_view/src/rendering/sliver_variable_size_box_adaptor.dart:296:29)
I/flutter ( 8564): #6      RenderObject.visitChildrenForSemantics (package:flutter/src/rendering/object.dart:2765:5)
I/flutter ( 8564): #7      RenderObject._getSemanticsForParent (package:flutter/src/rendering/object.dart:2675:5)
I/flutter ( 8564): #8      RenderObject._getSemanticsForParent.<anonymous closure> (package:flutter/src/rendering/object.dart:2680:61)
I/flutter ( 8564): #9      RenderObjectWithChildMixin.visitChildren (package:flutter/src/rendering/object.dart:3053:14)
I/flutter ( 8564): #10     RenderObject.visitChildrenFo

I think this have something to do with semantics index. ListView and GridView have an addSemanticIndexes property that can be disabled to enhance performance at the cost of accessibility. Could StaggeredGridView have such option too?

By the way, I noticed that the scrolling is a bit sluggish. Can it be improved?

waiting-response

opened by pulstar 11

MasonryGridView.count does not show scrollbar on Windows

This code does not show scrollbar.

Scrollbar( thumbVisibility: true, trackVisibility: true, controller: controller, thickness: 40, child: Padding( padding: EdgeInsets.all(38), child: MasonryGridView.count( controller: controller, physics: AlwaysScrollableScrollPhysics(), crossAxisCount: 10, mainAxisSpacing: 4, crossAxisSpacing: 4, itemBuilder:.....

opened by centy 0
Feature request: MasonGridView.separated()

I am currently working on a mobile app that used ListView.separated() on some pages. I want to use MasonGridView.count() with a couple of ExpansionTiles in it, and while this works, I had to sacrifice the separator lines for that.

I'd like to have a MasonGridView.count() that lets me define separator lines (preferably, with ThemeData or similar standard techniques). :-)

opened by dertuxmalwieder 0
Minor change: nullability

Context: https://github.com/flutter/flutter/pull/113246#issuecomment-1273964248

In short: The after in insertAndLayoutChild seems nullable at the first glance, but indeed the code assert(after!=null) inside that function, so we should never provide a null to it.

opened by fzyzcjy 0
Suggest to add reorder staggered view elements in list

Need support for Re-ordering, Resizing the elements inside the staggering view

Want to reorder staggered view rendered elements inside the list of staggered elements? Also wanted to resize the height and width of the staggering view element dynamically and wanted to change the element height and width inside that element.

opened by ajinkya446 0
How to config the height of each row not equal to the width of each column (Quilted) /occupy 1-N columns (Aligned)
Quilted

Quilted Grid Layout

This layout emphasizes certain items over others in a collection. It creates hierarchy using varied container sizes and ratios.

This is a specific delegate for the built-in GridView (or SliverGrid) widget. That's why the example below will create such a layout with a GridView.

Grid properties

The height of each row is equal to the width of each column

how can I config the height of each row not equal to the width of each column?

like this:
enhancement
opened by TangSirOnGit 1

Releases(v0.6.0)

v0.6.0(Jan 1, 2022)

Source code(tar.gz)
Source code(zip)
v0.2.7(Jan 10, 2019)
0.2.7

Fixed

Better fix for the bug where items are built only once.

Source code(tar.gz)
Source code(zip)
v0.2.3(Oct 21, 2018)
0.2.3

Fixed

Fix the rtl support (https://github.com/letsar/flutter_staggered_grid_view/issues/17).

Source code(tar.gz)
Source code(zip)
v0.2.0(Jun 9, 2018)
Add a way to let the tile's content to define the tile's extent in the main axis.

Add fit constructor to StaggeredTile.

Source code(tar.gz)
Source code(zip)