{"id":22944381,"url":"https://github.com/resulcay/staggered_grid_view_example","last_synced_at":"2025-04-01T21:29:22.931Z","repository":{"id":139173081,"uuid":"570311388","full_name":"resulcay/staggered_grid_view_example","owner":"resulcay","description":"This is a well documented staggered grid view package example app.","archived":false,"fork":false,"pushed_at":"2023-08-01T22:01:39.000Z","size":12317,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-07T14:14:11.934Z","etag":null,"topics":["grid","grid-layout","grid-search","grid-system","gridview","staggered","staggered-grid-layout","staggeredgrid","staggeredgridlayoutmanager"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/resulcay.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-11-24T21:38:55.000Z","updated_at":"2024-10-13T18:13:02.000Z","dependencies_parsed_at":null,"dependency_job_id":"50a612df-a9b7-4b5f-a129-4fef60fa535f","html_url":"https://github.com/resulcay/staggered_grid_view_example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/resulcay%2Fstaggered_grid_view_example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/resulcay%2Fstaggered_grid_view_example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/resulcay%2Fstaggered_grid_view_example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/resulcay%2Fstaggered_grid_view_example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/resulcay","download_url":"https://codeload.github.com/resulcay/staggered_grid_view_example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246712706,"owners_count":20821783,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["grid","grid-layout","grid-search","grid-system","gridview","staggered","staggered-grid-layout","staggeredgrid","staggeredgridlayoutmanager"],"created_at":"2024-12-14T14:18:17.096Z","updated_at":"2025-04-01T21:29:22.923Z","avatar_url":"https://github.com/resulcay.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"## 1. Research: staggered_grid_view\n\n\n\n---Screenshots and media---\n\n\u003cimg src=\"assets/images/screenshot1.png\" width=\"350\"\u003e    \u003cimg src=\"assets/images/screenshot2.png\" width=\"350\"\u003e\n\u003cimg src=\"assets/images/screenshot3.png\" width=\"350\"\u003e    \u003cimg src=\"assets/images/screenshot4.png\" width=\"350\"\u003e\n\u003cimg src=\"assets/images/screenshot5.png\" width=\"350\"\u003e    \u003cimg src=\"assets/images/screenshot6.png\" width=\"350\"\u003e\n\n\n- Keywords:\n\n  - flutter staggered gridview\n  - flutter staggered gridview reorder\n  - flutter staggered grid layout\n  - flutter staggered grid layout android\n  - flutter gridview builder\n  - flutter gridview example\n  - flutter staggered animation\n  - flutter gridview builder in column\n  - flutter gridview height\n  - flutter GridView dynamic height\n  - gridView builder flutter example\n  - childAspectRatio gridview flutter\n  - flutter_staggered_grid_view latest version\n\n- Video Title: Flutter Staggered GridView [2022]\n\n## 2. Research: Competitors\n\n**Flutter Videos/Articles**\n\n- https://pub.dev/packages/flutter_staggered_grid_view (Official package documentation)\n- https://medium.flutterdevs.com/staggered-gridview-in-flutter-661f6667595d (Medium)\n- https://www.geeksforgeeks.org/flutter-staggered-grid-view (Geeks For Geeks)\n- https://levelup.gitconnected.com/gridview-and-staggered-gridview-in-flutter-ef5d999fcab0 (Level Up)\n- https://github.com/abdulazizahwan/flutter-staggered-grid-view?ref=flutterawesome.com (Flutter Awesome - GitHub)\n- http://androidcoding.in/2020/08/05/flutter-staggered-gridview/ \n\n- 21K - https://www.youtube.com/watch?v=h0H2t7fOGU4 (Fun with Flutter)\n- 17K - https://www.youtube.com/watch?v=ABbBYebnwDQ (whatsupcoders)\n- 13K - https://www.youtube.com/watch?v=wDoR302KSU4 (whatsupcoders)\n-  2K - https://www.youtube.com/watch?v=6baVcfzSnJE (Backslash Flutter)\n\n**Android/Swift/React Videos**\n\n- 17K - https://www.youtube.com/watch?v=9l6Gjzpysmc (Android -\u003e Java)\n\n**Great Features**\n\n- In [this](https://www.youtube.com/watch?v=6baVcfzSnJE) video, he uses latest features of staggered_grid_view package which are MasonryGridView, AlignedGridView etc.\n\n\n**Problems from Video**\n\n\u003cimg src=\"assets/images/problem1.png\" width=\"2000\"\u003e\n\n- In [this](https://www.youtube.com/watch?v=h0H2t7fOGU4) video, he used a deprecated constructor (at 2:05).\n**Answer: You can add a newer version of package.\n\n\u003cimg src=\"assets/images/problem2.png\" width=\"2000\"\u003e\n\n- In [this](https://www.youtube.com/watch?v=ABbBYebnwDQ)\n**Answer: You can wrap StaggeredGrid.count() widget with SingleChildScrollView() widget.\n\n\u003cimg src=\"assets/images/problem3.png\" width=\"2000\"\u003e\n\n- In [this](https://www.youtube.com/watch?v=ABbBYebnwDQ)\n**Answer: You can wrap StaggeredGrid.count() widget with SingleChildScrollView() widget.\n\n\n**Problems from Flutter StackOverflow**\n\n- https://stackoverflow.com/questions/50435467/how-to-implement-in-flutter-a-staggered-grid-view\n- https://stackoverflow.com/questions/65215128/staggered-grid-view-in-flutter\n- https://stackoverflow.com/questions/67254943/flutter-staggered-grid-view-pin-tiles\n- https://stackoverflow.com/questions/60868211/staggered-grid-view-not-scrolling-inside-listview\n- https://stackoverflow.com/questions/58675132/lazy-loading-with-staggered-grid-view-in-flutter\n- https://stackoverflow.com/questions/70003447/implementing-staggered-grid-view-with-multiple-selection-in-flutter\n- https://stackoverflow.com/questions/58987982/how-can-i-create-staggered-grid-view-like-this-in-flutter\n- https://stackoverflow.com/questions/71407450/flutter-staggered-grid-view-crossaxiscount-overrides-minwidth-of-item\n\n## 3. Video Structure\n\n**Main Points / Purpose of Lesson**\n\n1. From the docs, The GridView is a scrollable, 2D array of widgets. It is basically used to lay the items in a tabular grid fashion. In case of using different size widgets (Card,Image,PNG etc.) in a grid view outputs undesired results.\n\n2. To prevent these results we use StaggeredGridView package.\n    2.1 - Staggered gridview consists of multiple columns with different rows with varying sizes used to display different sizes' images or sized widgets.\n    2.2 - The main feature of Staggered Grid View is that it makes the layout beautiful and develop a great user experience.\n\n3. StaggeredGridView is a new enhanced variant of GridView. We can resize widgets on specific layouts on demand.\nAlso, there are built-in layouts in this package which are masonry, aligned, staired etc.\n\n**The Structured Main Content**\n- When we looked at GridView widget, there are some unavoidable constraints. For example, you have a few different size images and you want to show them as it is. You can not achieve that with GridView widget. At this point we can apply StaggeredGridView package. It provides us various built-in layouts, or custom layouts. With small modifications you can create your own patterns and more.\n\n- `flutter_staggered_grid_view` already comes with a list of layouts, like:\n  - `staggered`\n  - `masonry`\n  - `aligned`\n  - `quilted`\n  - `staired`\n  - `woven`\n\n\n- For using the `flutter_staggered_grid_view` we need to add this package.\n\n```yaml\n    flutter_staggered_grid_view: ^0.6.2\n```\n\n\n- Import the package.\n\n```dart \nimport 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';   \n```\n\n- Create a stateless widget\n\n```dart \nclass MainPage extends StatelessWidget {\n  const MainPage({super.key});\n\n  @override\n  Widget build(BuildContext context) =\u003e Scaffold(\n        body: Container(),\n      );\n} \n```\n\n- Add StaggeredGrid.count() constructor to the Scaffold's body.\n\n```dart \nclass MainPage extends StatelessWidget {\n  const MainPage({super.key});\n\n  @override\n  Widget build(BuildContext context) =\u003e Scaffold(\n        body: Padding(\n          padding: const EdgeInsets.all(8.0),\n          child: SingleChildScrollView(\n            child: StaggeredGrid.count(\n              crossAxisCount: 4,\n              mainAxisSpacing: 12,\n              crossAxisSpacing: 12,\n              children: items,\n            ),\n          ),\n        ),\n      );\n} \n```\n- Create ImageCard stateless widget with Image.network().\n\n```dart \nclass ImageWidget extends StatelessWidget {\n  const ImageWidget({\n    Key? key,\n  }) : super(key: key);\n\n  @override\n  Widget build(BuildContext context) {\n    int photoId = Random().nextInt(30) + 55;\n    int sizeMultiplier = photoId % 7;\n\n    return ClipRRect(\n      borderRadius: BorderRadius.circular(10),\n      child: Image.network(\n        \"https://picsum.photos/id/$number/300/${200 * sizeMultiplier}\",\n        scale: 1,\n        fit: BoxFit.cover,\n      ),\n    );\n  }\n}\n} \n```\n\n- Create StaggeredGridTile list and provide to StaggeredGrid.count() as children.\n\n```dart \nList\u003cStaggeredGridTile\u003e items = const [\n  StaggeredGridTile.count(\n    crossAxisCellCount: 2,\n    mainAxisCellCount: 2,\n    child: ImageWidget(),\n  ),\n  StaggeredGridTile.count(\n    crossAxisCellCount: 2,\n    mainAxisCellCount: 1,\n    child: ImageWidget(),\n  ),\n  StaggeredGridTile.count(\n    crossAxisCellCount: 1,\n    mainAxisCellCount: 1,\n    child: ImageWidget(),\n  ),\n  StaggeredGridTile.count(\n    crossAxisCellCount: 1,\n    mainAxisCellCount: 1,\n    child: ImageWidget(),\n  ),\n  StaggeredGridTile.count(\n    crossAxisCellCount: 4,\n    mainAxisCellCount: 2,\n    child: ImageWidget(),\n  ),\n  ]; \n```\n\n\n- The output similarly will be as shown below.\n\n\u003cimg src=\"assets/images/screenshot0.png\" width=\"350\"\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fresulcay%2Fstaggered_grid_view_example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fresulcay%2Fstaggered_grid_view_example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fresulcay%2Fstaggered_grid_view_example/lists"}