{"id":13550977,"url":"https://github.com/Ezaldeen99/Shaky_animated_list","last_synced_at":"2025-04-03T01:31:01.157Z","repository":{"id":56838903,"uuid":"468726041","full_name":"Ezaldeen99/Shaky_animated_list","owner":"Ezaldeen99","description":"List animations to track your scroll changes on screen or your list first attachment to animated your list items with different transition rules.","archived":false,"fork":false,"pushed_at":"2022-03-11T18:54:37.000Z","size":11137,"stargazers_count":15,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-19T16:44:27.952Z","etag":null,"topics":["animations","flutter","flutterapps","grid-layout","listview","scroll"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Ezaldeen99.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-03-11T11:35:23.000Z","updated_at":"2024-12-07T04:40:47.000Z","dependencies_parsed_at":"2022-08-28T23:30:41.744Z","dependency_job_id":null,"html_url":"https://github.com/Ezaldeen99/Shaky_animated_list","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/Ezaldeen99%2FShaky_animated_list","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ezaldeen99%2FShaky_animated_list/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ezaldeen99%2FShaky_animated_list/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ezaldeen99%2FShaky_animated_list/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ezaldeen99","download_url":"https://codeload.github.com/Ezaldeen99/Shaky_animated_list/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246921999,"owners_count":20855341,"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":["animations","flutter","flutterapps","grid-layout","listview","scroll"],"created_at":"2024-08-01T12:01:40.589Z","updated_at":"2025-04-03T01:30:56.111Z","avatar_url":"https://github.com/Ezaldeen99.png","language":"Dart","funding_links":[],"categories":["Dart"],"sub_categories":[],"readme":"# [Shaky_animated_list](https://pub.dev/packages/shaky_animated_listview)\n\n[![pub](https://img.shields.io/pub/v/shaky_animated_listview.svg)](https://pub.dev/packages/shaky_animated_listview/install)\n\n[Shaky_animated_list](https://pub.dev/packages/shaky_animated_listview/install) can be used for **three** main things:\n\n1. Animate List view scroll.\n2. Animate grid view first view.\n3. Animate grid view scroll.\n\n## 1. Library over view\n\n\nAll these animations track your scroll changes on screen or your list first attachment to animated your list items with different transition rules.\n\n[Shaking Grid][shaking_grid] | [Scroll list][scroll_list] | [Scroll Grid][scroll_grid]\n--- | --- | ---\n![shaking_grid] | ![scroll_list] | ![scroll_grid]\n\nYou can define these animation directions **Axis** by channing your list **ScrollDirection**.\n\n### Shaking Grid\n\nShaking grid can be simply implemented by wrapping your grid child by `GridAnimatorWidget` and that's it we will take it from here ^^\n\nfor example you can simply do this to show shaking grey color cards\n```dart\n    GridView.count(\n    crossAxisCount: 3,\n    // shrinkWrap: true,\n    children: List.generate(9, (i) =\u003e GridAnimatorWidget(\n        child: Padding(\n        padding: const EdgeInsets.all(4),\n            child: ClipRRect(\n            borderRadius: const BorderRadius.all(Radius.circular(10)),\n                child: Container(\n                color: Colors.grey,\n                ),\n        ),\n    ),\n    ),).toList()\n    )\n```\n![shaking_grid]\n\n### ListView Scroll animations\n\nListView Scroll animations will enable your to implement the scroll animations with full control on animations space and duration please don't add vertical margins to your elements, you can use the `spaceBetween` to give a space between elements and `extendedSpaceBetween` to control the scroll animations space.\nAlso you can use `duration` to control the reverse animations duration based on your needs\n\nfor example you can simply do this to show ListView vertical Scroll animations\n```dart\n    AnimatedListView(\n    duration: 100,\n    extendedSpaceBetween: 30,\n    spaceBetween:10,\n    children: List.generate(\n    21,\n    (index) =\u003e Card(\n    elevation: 50,\n    margin: const EdgeInsets.symmetric(horizontal: 20),\n    shadowColor: Colors.black,\n    color: Colors.grey,\n        child: SizedBox(\n        height: 300,\n            child: Padding(\n            padding: const EdgeInsets.all(20.0),\n            child: Column(\n                children: [\n                    CircleAvatar(\n                    backgroundColor: Colors.blue[500],\n                    radius: 60,\n                    child: const CircleAvatar(\n                        backgroundImage: NetworkImage(\n                        \"https://avatars.githubusercontent.com/u/30810111?v=4\"),\n                        //NetworkImage\n                        radius: 50,\n                        ),\n                    ),\n                    const SizedBox(\n                    height: 10,\n                    ),\n                    Text(\n                    'Scroll to start',\n                        style: TextStyle(\n                        fontSize: 30,\n                        color: Colors.blue[900],\n                        fontWeight: FontWeight.w500,\n                        ),\n                    ),\n                    const SizedBox(\n                    height: 10,\n                    ),\n                    const Text(\n                    'Animated list demo',\n                        style: TextStyle(\n                        fontSize: 15,\n                        color: Colors.white,\n                        ),\n                    ),\n                    const SizedBox(\n                    height: 10,\n                    ),\n                ],\n            ),\n            ),\n        ),\n    )\n))\n```\n![scroll_list]\n\n\n### Grid Scroll animations\nGrid Scroll animations will enable your to implement the scroll animations on a grid view, one little change here is that we will implement the `delegate`, this is a design issue that we run into so you will have to \nto specify your `crossAxisCount`, `crossAxisSpacing`, `mainAxisSpacing`, and `duration` and we will take it from here,you can use any other default supported parameters in GridView.\n\nfor example you can simply do this to show Grid vertical Scroll animations\n```dart\n    AnimatedGridView(\n          duration: 100,\n          crossAxisCount: 2,\n          mainAxisExtent: 256,\n          crossAxisSpacing: 8,\n          mainAxisSpacing: 8,\n          children: List.generate(\n              21,\n              (index) =\u003e Card(\n                    elevation: 50,\n                    shadowColor: Colors.black,\n                    color: Colors.grey[700],\n                    child: SizedBox(\n                      width: double.infinity,\n                      child: Padding(\n                        padding: const EdgeInsets.all(20.0),\n                        child: Column(\n                          children: const [\n                            CircleAvatar(\n                              backgroundColor: Colors.black,\n                              radius: 60,\n                              child: CircleAvatar(\n                                backgroundImage: NetworkImage(\n                                    \"https://avatars.githubusercontent.com/u/30810111?v=4\"),\n                                //NetworkImage\n                                radius: 50,\n                              ),\n                            ),\n                          ],\n                        ),\n                      ),\n                    ),\n                  )\n             )\n       ),\n\n```\n![scroll_grid]\n\n\n\n### ListView horizontal Scroll animations\n\nif you want to add a horizontal animations, all what you have to do is to add a scroll direction to the widget and that's it \nfor example you can simply do this to show ListView horizontal Scroll animations\n```dart\n  AnimatedListView(\n        duration: 100,\n        scrollDirection: Axis.horizontal,\n        children: List.generate(\n        21,\n            (index) =\u003e const Card(\n            elevation: 50,\n            margin: EdgeInsets.symmetric(horizontal: 10),\n            shadowColor: Colors.black,\n            color: Colors.grey,\n                child: SizedBox(\n                height: 300,\n                width: 200,\n                ),\n            ),\n        ),\n  ),\n```\n![horz_list]\n\n# Sample source code\n\n**[Example for all cases](https://github.com/lgvalle/Material-Animations/)**\n\n\u003ca name=\"contribute\"\u003e\u003c/a\u003e\n## Contribute\nLet's develop with collaborations. We would love to have contributions by raising issues and opening PRs. Filing an issue before PR is must.\n\n\n## License\nProject is published under the Apache 2.0 license. Feel free to clone and modify repo as you want, but don't forget to add reference to authors :)\n\n[library]: https://pub\n\n[scroll_list]: https://github.com/Ezaldeen99/Shaky_animated_list/blob/master/assets/scroll_list.gif\n\n[scroll_grid]: https://github.com/Ezaldeen99/Shaky_animated_list/blob/master/assets/grid_scroll.gif\n\n[shaking_grid]: https://github.com/Ezaldeen99/Shaky_animated_list/blob/master/assets/shaking_grid.gif\n\n[horz_list]: https://github.com/Ezaldeen99/Shaky_animated_list/blob/master/assets/horz_list.gif\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FEzaldeen99%2FShaky_animated_list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FEzaldeen99%2FShaky_animated_list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FEzaldeen99%2FShaky_animated_list/lists"}