{"id":26751551,"url":"https://github.com/sayed3li97/flutter_lottie_demo","last_synced_at":"2026-05-08T09:34:03.358Z","repository":{"id":270815743,"uuid":"911494645","full_name":"sayed3li97/flutter_lottie_demo","owner":"sayed3li97","description":"This Flutter project demonstrates practical applications of Lottie animations, including a loading indicator, an interactive like button with a one-time animation, and a dynamic animation swap based on user interaction.","archived":false,"fork":false,"pushed_at":"2025-01-03T09:04:42.000Z","size":1481,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-22T06:07:25.934Z","etag":null,"topics":["animation","animations","flutter","flutter-dev","flutter-ui","interactive-ui","lottie","micro-interactions","mobile-development","ui","ux"],"latest_commit_sha":null,"homepage":"","language":"C++","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/sayed3li97.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,"zenodo":null}},"created_at":"2025-01-03T06:36:07.000Z","updated_at":"2025-01-03T15:34:57.000Z","dependencies_parsed_at":null,"dependency_job_id":"5c83bab1-39ee-4468-ac16-54893e7279c6","html_url":"https://github.com/sayed3li97/flutter_lottie_demo","commit_stats":null,"previous_names":["sayed3li97/flutter_lottie_demo"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sayed3li97/flutter_lottie_demo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sayed3li97%2Fflutter_lottie_demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sayed3li97%2Fflutter_lottie_demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sayed3li97%2Fflutter_lottie_demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sayed3li97%2Fflutter_lottie_demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sayed3li97","download_url":"https://codeload.github.com/sayed3li97/flutter_lottie_demo/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sayed3li97%2Fflutter_lottie_demo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32774993,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-08T08:22:46.396Z","status":"ssl_error","status_checked_at":"2026-05-08T08:22:45.650Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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","animations","flutter","flutter-dev","flutter-ui","interactive-ui","lottie","micro-interactions","mobile-development","ui","ux"],"created_at":"2025-03-28T12:18:34.058Z","updated_at":"2026-05-08T09:34:03.347Z","avatar_url":"https://github.com/sayed3li97.png","language":"C++","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Flutter Lottie Animations Demo\n\nThis Flutter project demonstrates the integration and usage of Lottie animations to enhance user interface and user experience. It showcases two main use cases: a loading animation and an interactive like button with a dynamic animation change.\n\n## Features\n\n*   **Loading Animation:** A looping Lottie animation displayed while content is loading.\n*   **Interactive Like Button:** A button with a Lottie animation that plays once when clicked, providing visual feedback to the user.\n*   **Dynamic Animation Change:** The central loading animation changes to a \"Thank You\" animation upon liking, providing engaging feedback.\n*   **Clean and Modern UI:** The UI is designed with a clean, modern aesthetic using Material Design components and consistent styling.\n*   **Robust Animation Handling:** Includes proper handling of animation loading and controller management to prevent errors.\n\n## Screenshots\n\n\nExample:\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"screenshots/loading_state.png\" width=\"300\" alt=\"Screenshot of Loading State\"\u003e\n      \u003cbr\u003eLoading State\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"screenshots/liked_state.png\" width=\"300\" alt=\"Screenshot of Liked State\"\u003e\n      \u003cbr\u003eLiked State\n    \u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"gifs/like_animation.gif\" width=\"300\" alt=\"GIF of Like Animation\"\u003e\n      \u003cbr\u003eLike Animation\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## Getting Started\n\nTo run this project:\n\n1.  **Clone the repository:**\n\n    ```bash\n    git clone https://github.com/sayed3li97/flutter_lottie_demo.git\n    ```\n\n2.  **Navigate to the project directory:**\n\n    ```bash\n    cd flutter_lottie_demo\n    ```\n\n3.  **Install dependencies:**\n\n    ```bash\n    flutter pub get\n    ```\n\n4.  **Add Lottie Animations:**\n    *   Download Lottie JSON files for loading, like, and thanks animations (e.g., from [LottieFiles](https://lottiefiles.com/)).\n    *   Create an `assets/animations` directory in your project.\n    *   Place the JSON files in the `assets/animations` directory.\n    *   Update your `pubspec.yaml` file:\n\n    ```yaml\n    flutter:\n      assets:\n        - assets/animations/\n        - assets/animations/loading.json\n        - assets/animations/like.json\n        - assets/animations/thanks.json\n    ```\n\n5.  **Run the app:**\n\n    ```bash\n    flutter run\n    ```\n\n## Code Highlights\n\n*   **Conditional Animation Rendering:** The central animation is dynamically switched between loading and thanks animations based on the like state.\n\n    ```dart\n    isLiked\n        ? Lottie.asset('assets/animations/thanks.json')\n        : Lottie.asset('assets/animations/loading.json'),\n    ```\n\n*   **One-Time Like Animation:** The like animation plays only once per click using `_likeController.forward().whenComplete(() =\u003e _likeController.reset());`.\n\n*   **Proper Animation Controller Management:** The `onLoaded` callback is used to ensure the animation duration is set correctly, preventing errors.\n\n    ```dart\n    Lottie.asset(\n        // ...\n        onLoaded: (composition) {\n          setState(() {\n            _lottieLoaded = true;\n            _likeController.duration = composition.duration;\n          });\n        },\n    );\n    ```\n\n## Dependencies\n\n*   `lottie: ^3.3.0` (or latest)\n\n## Contributing\n\nContributions are welcome! Please open an issue or submit a pull request.\n\n## Author\n\n[Sayed Ali Alkamel/GitHub Profile](https://github.com/sayed3li97/)\n\n## License\n\nMIT License\n\nCopyright (c) [2025] [Sayed Ali Alkamel]\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsayed3li97%2Fflutter_lottie_demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsayed3li97%2Fflutter_lottie_demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsayed3li97%2Fflutter_lottie_demo/lists"}