A Flutter staggered grid view

Overview

flutter_staggered_grid_view

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

Pub Donate

Screenshot

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.

Screenshot Screenshot

  • Tiles can fit the content in the main axis.

Screenshot

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

Screenshot_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

    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.

    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'

    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'

    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

    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

    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
  • Not rendering well after resizing screen in web

    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

    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

    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

    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
  • How to I convert older code to the new version??

    How to I convert older code to the new version??

    Hello @letsar,

    Congratulations on the updated package...

    after updating the package I am getting error with below code... can you please help me to covert the below example code with the working one??

    SliverStaggeredGrid.countBuilder(
                    crossAxisCount: 2,
                    itemCount: mylist.length,
                    mainAxisSpacing: 8,
                    crossAxisSpacing: 8,
    
                    itemBuilder: (context, index) {
                      final itemData= mylist[index];
                      return ImgTile(
                        title: itemData.title,
                        price: itemData.price!.toStringAsFixed(0),
                        imageUrl: itemData.image,
                        itemId: itemData.itemId,
                        onTap: () {
                        // some function
                        },
                      );
                    },
                    staggeredTileBuilder: (index) => StaggeredTile.fit(1),
                    // staggeredTileBuilder: (index) => StaggeredTile.count(1, 1),
                  ),
    

    I searched in changelog or in example code in readme to see if we have any suggestion/code for converting from old package to the new. But unfortunately I didn't find any helpful info..

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

    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:

    image
    opened by TangSirOnGit 0
  • AlignedGridView.count crashes on scrolling back and forth multiple times

    AlignedGridView.count crashes on scrolling back and forth multiple times

    Hey @letsar, I was trying to do performance testing on my app after adding the library. I am using AlignedGridView.count. I have infinite scrolling behavior and when I try to scroll back and forth multiple times. I get the following crash:

    The following assertion was thrown during performLayout():
    RenderBox was not laid out: RenderPhysicalShape#5fca4 relayoutBoundary=up8 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    'package:flutter/src/rendering/box.dart':
    Failed assertion: line 2001 pos 12: 'hasSize'
    
    
    When the exception was thrown, this was the stack: 
    #2      RenderBox.size (package:flutter/src/rendering/box.dart:2001:12)
    #3      RenderUniformTrack._computeSize (package:flutter_staggered_grid_view/src/rendering/uniform_track.dart:103:31)
    #4      RenderUniformTrack.performLayout (package:flutter_staggered_grid_view/src/rendering/uniform_track.dart:120:12)
    #5      RenderObject.layout (package:flutter/src/rendering/object.dart:2135:7)
    #6      RenderBox.layout (package:flutter/src/rendering/box.dart:2418:11)
    #7      RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:120:14)
    #8      RenderObject.layout (package:flutter/src/rendering/object.dart:2135:7)
    #9      RenderBox.layout (package:flutter/src/rendering/box.dart:2418:11)
    #10     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:120:14)
    #11     RenderObject.layout (package:flutter/src/rendering/object.dart:2135:7)
    #12     RenderBox.layout (package:flutter/src/rendering/box.dart:2418:11)
    #13     RenderSliverMultiBoxAdaptor.insertAndLayoutLeadingChild (package:flutter/src/rendering/sliver_multi_box_adaptor.dart:462:19)
    #14     RenderSliverList.performLayout (package:flutter/src/rendering/sliver_list.dart:128:29)
    #15     RenderObject.layout (package:flutter/src/rendering/object.dart:2135:7)
    #16     _RenderSliverLayoutBuilder.performLayout (package:flutter/src/widgets/sliver_layout_builder.dart:56:12)
    #17     RenderObject.layout (package:flutter/src/rendering/object.dart:2135:7)
    #18     RenderSliverEdgeInsetsPadding.performLayout (package:flutter/src/rendering/sliver_padding.dart:149:12)
    #19     RenderSliverPadding.performLayout (package:flutter/src/rendering/sliver_padding.dart:386:11)
    #20     RenderObject.layout (package:flutter/src/rendering/object.dart:2135:7)
    #21     RenderViewportBase.layoutChildSequence (package:flutter/src/rendering/viewport.dart:516:13)
    #22     RenderViewport._attemptLayout (package:flutter/src/rendering/viewport.dart:1600:12)
    #23     RenderViewport.performLayout (package:flutter/src/rendering/viewport.dart:1507:20)
    #24     RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:1973:7)
    #25     PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:999:18)
    #26     RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:513:19)
    #27     WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:884:13)
    #28     RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:378:5)
    #29     SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1175:15)
    #30     SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1104:9)
    #31     SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:1015:5)
    #35     _invoke (dart:ui/hooks.dart:150:10)
    #36     PlatformDispatcher._drawFrame (dart:ui/platform_dispatcher.dart:318:5)
    #37     _drawFrame (dart:ui/hooks.dart:115:31)
    (elided 5 frames from class _AssertionError and dart:async)
    The following RenderObject was being processed when the exception was fired: RenderUniformTrack#93db7 relayoutBoundary=up6 NEEDS-PAINT
    ...  needs compositing
    ...  parentData: <none> (can use size)
    ...  constraints: BoxConstraints(w=379.4, 0.0<=h<=Infinity)
    ...  size: MISSING
    RenderObject: RenderUniformTrack#93db7 relayoutBoundary=up6 NEEDS-PAINT
      needs compositing
      parentData: <none> (can use size)
      constraints: BoxConstraints(w=379.4, 0.0<=h<=Infinity)
      size: MISSING
    ...  child 1: RenderSemanticsAnnotations#49b67 relayoutBoundary=up7 NEEDS-PAINT
    ...    needs compositing
    ...    parentData: offset=Offset(0.0, 0.0) (can use size)
    ...    constraints: BoxConstraints(w=185.7, 0.0<=h<=Infinity)
    ...    semantic boundary
    ...    size: Size(185.7, 274.0)
    ...    child: RenderPhysicalShape#939f1 relayoutBoundary=up8 NEEDS-PAINT
    ...      needs compositing
    ...      parentData: <none> (can use size)
    ...      constraints: BoxConstraints(w=185.7, 0.0<=h<=Infinity)
    ...      size: Size(185.7, 274.0)
    ...      elevation: 0.0
    ...      color: Color(0x00000000)
    ...      shadowColor: Color(0x00000000)
    ...      clipper: ShapeBorderClipper
    ...      child: RenderCustomPaint#1d6b0 relayoutBoundary=up9 NEEDS-PAINT
    ...        needs compositing
    ...        parentData: <none> (can use size)
    ...        constraints: BoxConstraints(w=185.7, 0.0<=h<=Infinity)
    ...        size: Size(185.7, 274.0)
    ...        painter: null
    ...        foregroundPainter: _ShapeBorderPainter#f1aa9()
    ...        child: _RenderInkFeatures#b914c relayoutBoundary=up10 NEEDS-PAINT
    ...          needs compositing
    ...          parentData: <none> (can use size)
    ...          constraints: BoxConstraints(w=185.7, 0.0<=h<=Infinity)
    ...          size: Size(185.7, 274.0)
    ...  child 2: RenderSemanticsAnnotations#6999a relayoutBoundary=up7 NEEDS-PAINT
    ...    needs compositing
    ...    parentData: offset=Offset(0.0, 0.0) (can use size)
    ...    constraints: BoxConstraints(w=185.7, 0.0<=h<=Infinity)
    ...    semantic boundary
    ...    size: MISSING
    ...    child: RenderPhysicalShape#5fca4 relayoutBoundary=up8 NEEDS-PAINT
    ...      needs compositing
    ...      parentData: <none> (can use size)
    ...      constraints: BoxConstraints(w=185.7, 0.0<=h<=Infinity)
    ...      size: MISSING
    ...      elevation: 0.0
    ...      color: Color(0x00000000)
    ...      shadowColor: Color(0x00000000)
    ...      clipper: ShapeBorderClipper
    ...      child: RenderCustomPaint#24d26 relayoutBoundary=up9 NEEDS-PAINT
    ...        needs compositing
    ...        parentData: <none> (can use size)
    ...        constraints: BoxConstraints(w=185.7, 0.0<=h<=Infinity)
    ...        size: MISSING
    ...        painter: null
    ...        foregroundPainter: _ShapeBorderPainter#b17ba()
    ...        child: _RenderInkFeatures#a7407 relayoutBoundary=up10 NEEDS-PAINT
    ...          needs compositing
    ...          parentData: <none> (can use size)
    ...          constraints: BoxConstraints(w=185.7, 0.0<=h<=Infinity)
    ...          size: MISSING
    
    opened by SAGARSURI 0
  • Suggestion for this layout

    Suggestion for this layout

    What is recommended layout for this my scenario. It would be great with some kind of builder because there can be many children. In version 0.4.1 I used countBuilder with itemBuilder and staggeredTileBuilder. Now I am confused what layout to use :)

    example

    Thanks for any advice

    opened by ninoid 0
  • Is sliver supported?

    Is sliver supported?

    Hello! Thanks for your library. In the new readme i see you mention that using some types of grid with the slivers is not good because of performance reasons. Did you mean the exact type of grid view or using all types of grids is not a good idea? And another question is a grid itself (without slivers) reuses resources as a flutter's list view or it is not optimized? Thanks

    opened by mancj 0
  • aligned grid with cross axis variation

    aligned grid with cross axis variation

    If I have understood correctly, the problem with the staggered grid view is that the tiles may not fill the entire cross axis, and therefore might shift around if new tiles are added which is undesirable. That is why that layout was limited to small item counts.

    It would be nice to have a grid view layout in which the items are forced or otherwise guaranteed to always fill the entire cross axis, while also all having the same height in their axis like aligned grid.

    This could be achieved by asserting that they add up to an entire axis or by distributing any remaining space between them or by stretching the last one to fill or there might be other ways to do so. This wouldnt replicate the full power of a staggered grid, as no gaps are allowed and item height couldnt exceed the current row it is in, but it would probably be easier to layout and avoid the shifting problem. (I am unsure whether a full staggered grid layout where taking the full cross axis is enforced would be possible.)

    Infinite grid layouts like the following seen in the samsung galaxy gallery app could be possible:

    image

    opened by clragon 0
Releases(v0.6.0)
Owner
Romain Rastel
Flutter Developer
Romain Rastel
A Horizontal List view With Lots of modification including a scaled current item.

Pub.dev Scaled List A Horizontal List view With Lots of modification including a scaled current item. Provided with curved custom painting and Dots in

Hosain Mohamed 33 Aug 8, 2022
Movies App UI in Flutter using Simple Widgets without Using API's in Flutter.

Movies App UI in Flutter using Simple Widgets without Using API's in Flutter.

Habib ullah 3 May 15, 2022
A flutter plugin for Easily make Flutter apps responsive. Automatically adapt UI to different screen sizes. Responsiveness made simple.

A flutter plugin for Easily make Flutter apps responsive. Automatically adapt UI to different screen sizes. Responsiveness made simple.

Urmish Patel 173 Sep 25, 2022
The Coolicons icon pack for Flutter with over 400 icons available for your flutter project.

coolicons This flutter package allows you to use the Coolicons icon pack. Made from Coolicons. ?? Installation In the dependencies: section of your pu

Stephen Joel 1 May 24, 2022
Foody - Flutter project to display foods to clients and display charts and has a lot of features , two flutter apps : Android and Web

Foody Flutter project to display foods to the clients and use charts and use a lot of features to complete the process (HUGE APP) There two apps: Andr

ABDULKARIMALBAIK 1 Feb 7, 2022
Flutter-business-card-app - Flutter + Dart business card mobile app

Dart + Flutter Business Card Mobile Application

Mark Hellner 0 Jan 9, 2022
A Flutter project that gives basic flutter design to implement a login UI

Login UI Design A Flutter project that gives basic flutter design to implement a

CABREX 9 Aug 4, 2022
Flutter Complete E-Commerce app (UI by - 'The Flutter Way')

NOT COMPLETED YET! e_commerce A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to ge

null 1 Mar 8, 2022
Flutter Shop UI - an e-commerce app using Flutter

If you are planning to create an e-commerce app using Flutter then this Shop UI Kit would be the perfect choice for you to make a gorgeous app for both Android & iOS.

Trần Văn Nguyên 19 Sep 27, 2022
A simple animated radial menu widget for Flutter.

flutter_radial_menu A radial menu widget for Flutter. . Installation Install the latest version from pub. Quick Start Import the package, create a Rad

Victor Choueiri 425 Sep 13, 2022
Tinder like cards swipe effect with Flutter.

Tinder cards Hi! After showcasing Focus for Reddit, the app I am working on, people asked me how did I do the tinder like cards swipe (posts media are

Ivascu Adrian 700 Sep 29, 2022
The app to demo animation with Flutter by implement Facebook reactions

Facebook Reactions Animation Description The app to demo animation with Flutter by implement Facebook reactions. Watch the demo video for more clarity

Duy Tran 300 Sep 19, 2022
Custom widget for Flutter

Flushbar Use this package if you need more customization when notifying your user. For Android developers, it is made to substitute toasts and snackba

Andre Haueisen 876 Sep 29, 2022
flutter stepper_touch widget

stepper_touch the concept of the widget inspired from Nikolay Kuchkarov. i extended the functionality to be more useful in real world applications Tha

Raouf Rahiche 260 Sep 29, 2022
A TypeAhead widget for Flutter, where you can show suggestions to users as they type

Flutter TypeAhead A TypeAhead (autocomplete) widget for Flutter, where you can show suggestions to users as they type Features Shows suggestions in an

null 641 Sep 29, 2022
A highly customisable Flutter widget for entering pin code. Suitable for use cases such as login and OTP.

pin_code_text_field It's a beautiful and highly customizable Flutter widget for entering pin code. Suitable for use cases such as login and OTP. Usage

Liew Jun Tung 289 Sep 20, 2022
Flutter FoldingCell widget

Simple FoldingCell widget Simple folding cell widget, pass frontWidget and innerWidget to fold and unfold. Installation Add dependency in pubspec.yaml

Farrukh 500 Sep 29, 2022
🔁 A custom refresh indicator for flutter.

Liquid Pull To Refresh A beautiful and custom refresh indicator for flutter highly inspired from Ramotion Pull Down to Refresh. Table of contents Inst

Ayush Agarwal 1k Sep 29, 2022
A flutter package which makes it easier to display the difference between two images.

?? Before After A flutter package which makes it easier to display the differences between two images.. The source code is 100% Dart, and everything r

Sahil Kumar 714 Sep 24, 2022