{"id":18112670,"url":"https://github.com/flutterfx/flutterfx_widgets","last_synced_at":"2025-10-23T02:19:47.144Z","repository":{"id":258172527,"uuid":"866159933","full_name":"flutterfx/flutterfx_widgets","owner":"flutterfx","description":"Collection of animated flutter widgets for busy flutter developers. Copy paste into your app!","archived":false,"fork":false,"pushed_at":"2024-10-30T03:59:35.000Z","size":47533,"stargazers_count":104,"open_issues_count":2,"forks_count":10,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-10-30T06:27:08.787Z","etag":null,"topics":["animated-widget","animation","flutter","ui-components","ui-design"],"latest_commit_sha":null,"homepage":"https://www.flutterfx.com","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/flutterfx.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":"2024-10-01T18:44:08.000Z","updated_at":"2024-10-30T03:59:39.000Z","dependencies_parsed_at":"2024-11-07T05:33:27.097Z","dependency_job_id":null,"html_url":"https://github.com/flutterfx/flutterfx_widgets","commit_stats":null,"previous_names":["flutterfx/flutterfx_widgets"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flutterfx%2Fflutterfx_widgets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flutterfx%2Fflutterfx_widgets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flutterfx%2Fflutterfx_widgets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flutterfx%2Fflutterfx_widgets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flutterfx","download_url":"https://codeload.github.com/flutterfx/flutterfx_widgets/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246249176,"owners_count":20747165,"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":["animated-widget","animation","flutter","ui-components","ui-design"],"created_at":"2024-11-01T02:00:42.842Z","updated_at":"2025-10-23T02:19:42.075Z","avatar_url":"https://github.com/flutterfx.png","language":"Dart","funding_links":[],"categories":["Dart"],"sub_categories":[],"readme":"# Flutterfx Widget - Animated flutter widgets\n\nA collection of animated flutter widgets. New animated widgets will be added weekly. Targetting 50 animated widgets by the end of this year. \n\nEach animation is implemented as a separate widget, making it easy to understand and integrate into your own projects.\n\n[Docs are here](https://www.flutterfx.com/docs)\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth width=\"30%\"\u003ePreview\u003c/th\u003e\n    \u003cth width=\"20%\"\u003eEffect\u003c/th\u003e\n    \u003cth width=\"50%\"\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/showcase_white_bg.gif\" alt=\"Fade Animation\" style=\"max-width:200px;\"\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\u003cstrong\u003eFolder\u003c/strong\u003e\u003c/td\u003e\n    \u003ctd\u003e\n      A nice looking folder animation with a shine built using \u003ccode\u003eAnimationController\u003c/code\u003e and \u003ccode\u003eTransform\u003c/code\u003e. \n      Demonstrates the usage of Flutter's transform apis.\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/showcase_smoke.gif\" alt=\"Scale Animation\" style=\"max-width:200px;\"\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\u003cstrong\u003eSmoke\u003c/strong\u003e\u003c/td\u003e\n    \u003ctd\u003e\n      Using circles with blur to make some smoke! Using \u003ccode\u003eBlur\u003c/code\u003e and \u003ccode\u003eCanvas\u003c/code\u003e.\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/gif_short.gif\" alt=\"Book shelf 3d Animation\" style=\"max-width:200px;\"\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\u003cstrong\u003eBookshelf\u003c/strong\u003e\u003c/td\u003e\n    \u003ctd\u003e\n      A 3d looking book shelf built using \u003ccode\u003eAnimatedBuilder\u003c/code\u003e and \u003ccode\u003eTransform\u003c/code\u003e. \n      Shows how to create more complex 3d looking animations by combining multiple transform calls.\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/showcase_circle_selector.gif\" alt=\"Circle selector Animation\" style=\"max-width:200px;\"\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\u003cstrong\u003eCircle selector\u003c/strong\u003e\u003c/td\u003e\n    \u003ctd\u003e\n      A pannable, zoomable grid of interactive circles built using \u003ccode\u003eCustomPaint\u003c/code\u003e, \u003ccode\u003eGestureDetector\u003c/code\u003e, and \u003ccode\u003eAnimationController\u003c/code\u003e.\n      Shows how to create a complex, animated UI component with panning, tapping, and neighbor displacement effects.\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/showcase_3d_vinyl.gif\" alt=\"vinyl jump Animation\" style=\"max-width:200px;\"\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\u003cstrong\u003e3d Vinyl\u003c/strong\u003e\u003c/td\u003e\n    \u003ctd\u003e\n      A 3D vinyl stack shuffle animation built using \u003ccode\u003eAnimatedBuilder\u003c/code\u003e and \u003ccode\u003eTransform\u003c/code\u003e. Demonstrates how to create complex 3D-looking animations by combining multiple transforms, custom curves, and z-index manipulation to simulate depth and realistic record flipping effects.\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/showcase_blurfade.gif\" alt=\"blurfade Animation\" style=\"max-width:200px;\"\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\u003cstrong\u003eBlurFade\u003c/strong\u003e\u003c/td\u003e\n    \u003ctd\u003e\n      A smooth blur and fade animation widget built using \u003ccode\u003eAnimationController\u003c/code\u003e, \u003ccode\u003eCurvedAnimation\u003c/code\u003e, and \u003ccode\u003eImageFiltered\u003c/code\u003e. \n      Demonstrates how to create elegant visibility transitions with combined opacity and blur effects, easily applicable to any child widget.\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/showcase_7.gif\" alt=\"Border Beam\" style=\"max-width:200px;\"\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\u003cstrong\u003eBorder Beam\u003c/strong\u003e\u003c/td\u003e\n    \u003ctd\u003e\n      [wip]\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/showcase_8.gif\" alt=\"Meteors\" style=\"max-width:200px;\"\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\u003cstrong\u003eMeteors\u003c/strong\u003e\u003c/td\u003e\n    \u003ctd\u003e\n     [wip]\n    \u003c/td\u003e\n  \u003c/tr\u003e\n    \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/showcase_9.gif\" alt=\"Neon Card\" style=\"max-width:200px;\"\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\u003cstrong\u003eNeon Card\u003c/strong\u003e\u003c/td\u003e\n    \u003ctd\u003e\n      [wip]\n    \u003c/td\u003e\n  \u003c/tr\u003e\n    \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/showcase_10.gif\" alt=\"Hyper text\" style=\"max-width:200px;\"\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\u003cstrong\u003eHyper text\u003c/strong\u003e\u003c/td\u003e\n    \u003ctd\u003e\n     [wip]\n    \u003c/td\u003e\n  \u003c/tr\u003e\n    \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/showcase_11.gif\" alt=\"Typing Animation\" style=\"max-width:200px;\"\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\u003cstrong\u003eTyping Animation\u003c/strong\u003e\u003c/td\u003e\n    \u003ctd\u003e\n      [wip]\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \n\n\n\n\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/showcase_rotating_text.gif\" alt=\"Rotating text\" style=\"max-width:200px;\"\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\u003cstrong\u003eRotating text\u003c/strong\u003e\u003c/td\u003e\n    \u003ctd\u003e\n      [wip]\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/showcase_text_blur.gif\" alt=\"Text blur animation\" style=\"max-width:200px;\"\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\u003cstrong\u003eText blur animation\u003c/strong\u003e\u003c/td\u003e\n    \u003ctd\u003e\n      [wip]\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/showcase_text_float_blur.gif\" alt=\"Text blur floating animation\" style=\"max-width:200px;\"\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\u003cstrong\u003eText blur floating animation\u003c/strong\u003e\u003c/td\u003e\n    \u003ctd\u003e\n      [wip]\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/showcase_text_chaos_blur.gif\" alt=\"Text chaos blur animation\" style=\"max-width:200px;\"\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\u003cstrong\u003eText chaos blur animation\u003c/strong\u003e\u003c/td\u003e\n    \u003ctd\u003e\n      [wip]\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/showcase_text_baloon_blur.gif\" alt=\"Text baloon fizzle\" style=\"max-width:200px;\"\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\u003cstrong\u003eText baloon fizzle\u003c/strong\u003e\u003c/td\u003e\n    \u003ctd\u003e\n      [wip]\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/showcase_text_flip_up.gif\" alt=\"Text flip animation\" style=\"max-width:200px;\"\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\u003cstrong\u003eText flip animation\u003c/strong\u003e\u003c/td\u003e\n    \u003ctd\u003e\n      [wip]\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/showcase_logo_globe.gif\" alt=\"Text flip animation\" style=\"max-width:200px;\"\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\u003cstrong\u003eAn interactive globe\u003c/strong\u003e\u003c/td\u003e\n    \u003ctd\u003e\n      An interactive globe made of logos.\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://github.com/flutterfx/flutterfx_widgets/blob/main/external_asset/showcase_celebrate.gif\" alt=\"Text flip animation\" style=\"max-width:200px;\"\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\u003cstrong\u003eCelebrate Fun\u003c/strong\u003e\u003c/td\u003e\n    \u003ctd\u003e\n      A fun animation on user interaction!\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003c!-- Add more rows here as we create new fx-widgets --\u003e\n\u003c/table\u003e\n\n\n\n# How to Use\n\n1. Clone this repository\n2. Run flutter pub get\n3. Open the project in your preferred IDE\n4. Run the app on your device or simulator\n\n\n# Contributing\n\nFound a bug? Have a suggestion? Don't just sit there, open a PR. But make sure your code works!\n\n# License\nThis project is licensed under the MIT License - see the LICENSE file for details. Not that anyone cares about licenses in a demo project.\n\n[flutterfx.com](https://flutterfx.com/)\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflutterfx%2Fflutterfx_widgets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflutterfx%2Fflutterfx_widgets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflutterfx%2Fflutterfx_widgets/lists"}