{"id":14956389,"url":"https://github.com/anasfik/transitioned_indexed_stack","last_synced_at":"2026-01-20T00:34:40.827Z","repository":{"id":65037659,"uuid":"580539077","full_name":"anasfik/transitioned_indexed_stack","owner":"anasfik","description":"A Package That Helps Implementing Animated Indexed Stack For Fluttuer","archived":false,"fork":false,"pushed_at":"2022-12-26T14:16:22.000Z","size":8041,"stargazers_count":3,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-03T08:59:55.244Z","etag":null,"topics":["animation","dart","flutter","flutter-examples","flutter-package","flutter-ui","flutter-widget","indexed-stack"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/transitioned_indexed_stack","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/anasfik.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-12-20T20:15:50.000Z","updated_at":"2024-06-25T07:42:06.000Z","dependencies_parsed_at":"2023-01-12T07:30:36.491Z","dependency_job_id":null,"html_url":"https://github.com/anasfik/transitioned_indexed_stack","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anasfik%2Ftransitioned_indexed_stack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anasfik%2Ftransitioned_indexed_stack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anasfik%2Ftransitioned_indexed_stack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anasfik%2Ftransitioned_indexed_stack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anasfik","download_url":"https://codeload.github.com/anasfik/transitioned_indexed_stack/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247645387,"owners_count":20972468,"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":["animation","dart","flutter","flutter-examples","flutter-package","flutter-ui","flutter-widget","indexed-stack"],"created_at":"2024-09-24T13:12:57.281Z","updated_at":"2026-01-20T00:34:40.800Z","avatar_url":"https://github.com/anasfik.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Transitioned Indexed Stack\n\nThis Package helps You Making Animated Transitions between IndexedStack children widgets Easily.\n\n# What it offers\n\n- Fade Indexed Stack\n- Scale Indexed Stack\n- Slide Indexed Stack\n  - Slide Up IndexedStack\n  - Slide Down IndexedStack\n  - Slide Right IndexedStack\n  - Slide Left IndexedStack\n- Size Factor Indexed Stack\n- Rotation Indexed Stack\n- Diagonal Indexed Stack\n- Shake Indexed Stack\n\nAll widgets offered by this package have the same properties as the pre-built Flutter `IndexedStack` widget, in addition of some useful properties which control the animations.\n\n# Demo App\n\n\u003ca href=\"https://github.com/anasfik/transitioned_indexed_stack/releases/tag/examples\"\u003eDownload Here\u003c/a\u003e\n\n  \u003chr\u003e\n \n# Usage:\n\n## Fade Indexed Stack\n\n### Showcase :\n\n  \u003cp align=\"center\"\u003e\u003cimg  height='560' src=\"https://imgur.com/7Z6mler.gif\" /\u003e\u003c/p\u003e\n    \n   ### Code :\n\n```dart\n  FadeIndexedStack(\n      beginOpacity: 0.0,\n      endOpacity: 1.0,\n      curve: Curves.easeInOut,\n      duration: const Duration(milliseconds: 250),\n      index: 1,\n      children: const \u003cWidget\u003e[\n        Center(\n          child: Text(\"Child 1\"),\n        ),\n        Center(\n          child: Text(\"Child 2\"),\n        ),\n      ],\n    ),\n```\n\n#### Properties\n\n| property       | Description                                                  | type       |\n| -------------- | ------------------------------------------------------------ | ---------- |\n| `beginOpacity` | The Initial Fade Opacity Animation Value                     | `double`   |\n| `endOpacity`   | The End Fade Opacity Animation Value                         | `double`   |\n| `curve`        | The Animation Curve                                          | `Curve`    |\n| `duration`     | The Animation duration ( need a hot restart to see changes ) | `Duration` |\n\n  \u003chr\u003e\n  \n## Scale Indexed Stack\n  ### Showcase :\n  \u003cp align=\"center\"\u003e\u003cimg  height='560' src=\"https://imgur.com/sTLCdoh.gif\" /\u003e\u003c/p\u003e\n  \n ### Code :\n\n```dart\n  ScaleIndexedStack(\n        beginScale: 0.0,\n        endScale: 1.0,\n        curve: Curves.easeInOut,\n        duration: const Duration(milliseconds: 250),\n        index: 1,\n        children: const \u003cWidget\u003e[\n          Center(\n            child: Text(\"Child 1\"),\n          ),\n          Center(\n            child: Text(\"Child 2\"),\n          ),\n        ],\n      ),\n```\n\n#### Properties\n\n| property     | Description                                                  | type       |\n| ------------ | ------------------------------------------------------------ | ---------- |\n| `beginScale` | The Initial Scale Animation Value                            | `double`   |\n| `endScale`   | The End Scale Animation Value                                | `double`   |\n| `curve`      | The Animation Curve                                          | `Curve`    |\n| `duration`   | The Animation duration ( need a hot restart to see changes ) | `Duration` |\n\n  \u003chr\u003e\n  \n## Slide Indexed Stack\n  ### Showcase :\n\n  \u003cp align=\"center\"\u003e\u003cimg  height='560' src=\"https://imgur.com/YBeKTD2.gif\" /\u003e\u003c/p\u003e\n\n### Code :\n\n```dart\n  SlideIndexedStack(\n        endSlideOffset: const Offset(0.5, 1),\n        beginSlideOffset: const Offset(0.0, 0.0),\n        curve: Curves.easeInOut,\n        duration: const Duration(milliseconds: 250),\n        index: 1,\n        children: const \u003cWidget\u003e[\n          Center(\n            child: Text(\"Child 1\"),\n          ),\n          Center(\n            child: Text(\"Child 2\"),\n          ),\n        ],\n      ),\n```\n\n#### Properties\n\n| property           | Description                                                  | type       |\n| ------------------ | ------------------------------------------------------------ | ---------- |\n| `endSlideOffset`   | The Offset From Where The Animations Starts                  | `Offset`   |\n| `beginSlideOffset` | The Offset From Where The Animations Ends                    | `Offset`   |\n| `curve`            | The Animation Curve                                          | `Curve`    |\n| `duration`         | The Animation duration ( need a hot restart to see changes ) | `Duration` |\n\n\u003chr\u003e\n \n## Size Factor Indexed Stack\n  ### Showcase :\n\n  \u003cp align=\"center\"\u003e\u003cimg  height='560' src=\"https://i.imgur.com/0X2ZVNS.gif.gif\" /\u003e\u003c/p\u003e\n  \n### Code :\n\n```dart\n   SizeFactorIndexedStack(\n        beginSizeFactor: 0.0,\n        endSizeFactor: 1.0,\n        curve: Curves.easeInOut,\n        duration: const Duration(milliseconds: 250),\n        index: 1,\n        children: const \u003cWidget\u003e[\n          Center(\n            child: Text(\"Child 1\"),\n          ),\n          Center(\n            child: Text(\"Child 2\"),\n          ),\n        ],\n      ),\n```\n\n#### Properties\n\n| property          | Description                                                  | type       |\n| ----------------- | ------------------------------------------------------------ | ---------- |\n| `beginSizeFactor` | The Initial Size Factor Animation Value                      | `double`   |\n| `endSizeFactor`   | The End Size Factor Animation Value                          | `double`   |\n| `curve`           | The Animation Curve                                          | `Curve`    |\n| `duration`        | The Animation duration ( need a hot restart to see changes ) | `Duration` |\n\n  \u003chr\u003e\n  \n  \n## Rotation Indexed Stack\n\n### Showcase :\n\n  \u003cp align=\"center\"\u003e\u003cimg  height='560' src=\"https://imgur.com/TvErp1y.gif\" /\u003e\u003c/p\u003e\n  \n  \n### Code :\n```dart\n  RotationIndexedStack(\n        beginTurn: 0.0,\n        endTurn: 1.0,\n        curve: Curves.easeInOut,\n        duration: const Duration(milliseconds: 250),\n        index: 1,\n        children: const \u003cWidget\u003e[\n          Center(\n            child: Text(\"Child 1\"),\n          ),\n          Center(\n            child: Text(\"Child 2\"),\n          ),\n        ],\n      ),\n\n````\n\n#### Properties\n\n| property    | Description                                                  | type       |\n| ----------- | ------------------------------------------------------------ | ---------- |\n| `beginTurn` | The Initial Rotation Turn Animation Value                    | `double`   |\n| `endTurn`   | The End Rotation Turn Animation Value                        | `double`   |\n| `curve`     | The Animation Curve                                          | `Curve`    |\n| `duration`  | The Animation duration ( need a hot restart to see changes ) | `Duration` |\n\n  \u003chr\u003e\n\n## Shake Indexed Stack\n  ### Showcase :\n\n\n\u003cp align=\"center\"\u003e\u003cimg  height='560' src=\"https://imgur.com/FFeqDCI.gif\" /\u003e\u003c/p\u003e\n\n\n### Code :\n\n```dart\nShakeIndexedStack(\n        shakesCount: 100,\n        shakeFrequency: 0.04,\n        duration: const Duration(milliseconds: 250),\n        curve: Curves.slowMiddle,\n        index: 1,\n        children: const \u003cWidget\u003e[\n          Center(\n            child: Text(\"Child 1\"),\n          ),\n          Center(\n            child: Text(\"Child 2\"),\n          ),\n        ],\n      ),\n\n````\n\n#### Properties\n\n| property         | Description                                                                    | type       |\n| ---------------- | ------------------------------------------------------------------------------ | ---------- |\n| `shakesCount`    | This represent how much times a shake should be triggered during the animation | `double`   |\n| `shakeFrequency` | THis represents the shake frequency                                            | `double`   |\n| `curve`          | The Animation Curve                                                            | `Curve`    |\n| `duration`       | The Animation duration ( need a hot restart to see changes )                   | `Duration` |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanasfik%2Ftransitioned_indexed_stack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanasfik%2Ftransitioned_indexed_stack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanasfik%2Ftransitioned_indexed_stack/lists"}