{"id":17679409,"url":"https://github.com/florent37/animatedwidgets","last_synced_at":"2025-05-07T04:07:47.491Z","repository":{"id":50131898,"uuid":"197172663","full_name":"florent37/AnimatedWidgets","owner":"florent37","description":"Easily add animations on your screen with AnimatedWidgets. Made for Bloc pattern","archived":false,"fork":false,"pushed_at":"2023-07-24T21:43:37.000Z","size":5073,"stargazers_count":115,"open_issues_count":7,"forks_count":18,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-05-07T04:07:37.639Z","etag":null,"topics":["alpha","anim","animation","bloc","controller","dart","flutter","opacity","provider","rotation","stateful","stateless","translation","tween"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/animated_widgets","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/florent37.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","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},"funding":{"ko_fi":"FlorentChampigny","github":"florent37"}},"created_at":"2019-07-16T10:27:18.000Z","updated_at":"2025-02-12T11:52:29.000Z","dependencies_parsed_at":"2024-06-18T22:32:42.716Z","dependency_job_id":"9468b380-d686-4576-8a83-bf5a9837f3d8","html_url":"https://github.com/florent37/AnimatedWidgets","commit_stats":{"total_commits":44,"total_committers":4,"mean_commits":11.0,"dds":0.09090909090909094,"last_synced_commit":"772ab2879bd3d0a1ad31b13524ccb3dfcd39a8b0"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/florent37%2FAnimatedWidgets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/florent37%2FAnimatedWidgets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/florent37%2FAnimatedWidgets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/florent37%2FAnimatedWidgets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/florent37","download_url":"https://codeload.github.com/florent37/AnimatedWidgets/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252810273,"owners_count":21807759,"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":["alpha","anim","animation","bloc","controller","dart","flutter","opacity","provider","rotation","stateful","stateless","translation","tween"],"created_at":"2024-10-24T08:41:52.516Z","updated_at":"2025-05-07T04:07:47.473Z","avatar_url":"https://github.com/florent37.png","language":"Dart","funding_links":["https://ko-fi.com/FlorentChampigny","https://github.com/sponsors/florent37"],"categories":[],"sub_categories":[],"readme":"# animated_widgets\n\nEasily add animations on your screen with AnimatedWidgets.\n\nOptimized for MVVM using *Bloc*, updating the `enabled` value of the widget will forward or reverse the animation.\n\nAvailable widgets : `TranslationAnimatedWidget`, `OpacityAnimatedWidget`, `RotationAnimatedWidget`, `ScaleAnimatedWidget`, `SizeAnimatedWidget`\n\nFor example : add a TranslationAnimatedWidget on a button, then activate it to display it !\n\n```dart\nTranslationAnimatedWidget(\n    enabled: this.displayMyWidget, //update this boolean to forward/reverse the animation\n    values: [\n        Offset(0, 200), // disabled value value\n        Offset(0, 250), //intermediate value\n        Offset(0, 0) //enabled value\n    ],\n    child: /* your widget */\n),\n```\n\n[![screen](https://raw.githubusercontent.com/florent37/AnimatedWidgets/master/medias/translation.gif)](https://www.github.com/florent37/AnimatedWidgets)\n\n\nor using a `tween constructor`\n\n```dart\nRotationAnimatedWidget.tween(\n    enabled: this.displayMyWidget, //update this boolean to forward/reverse the animation\n    rotationDisabled: Rotation.degrees(z: 0),\n    rotationEnabled: Rotation.degrees(z: 90),\n    child: /* your widget */\n),\n```\n\n[![screen](https://raw.githubusercontent.com/florent37/AnimatedWidgets/master/medias/rotation.gif)](https://www.github.com/florent37/AnimatedWidgets)\n\n# Compose\n\nDon't hesitate to compose them\n\n```dart\nTranslationAnimatedWidget.tween(\n    enabled: this.displayMyWidget,\n    translationDisabled: Offset(0, 200),\n    translationEnabled: Offset(0, 0),\n    child:\n        OpacityAnimatedWidget.tween(\n        enabled: this.displayMyWidget,\n        opacityDisabled: 0,\n        opacityEnabled: 1,\n        child: /* your widget */\n    ),\n),\n```\n\n[![screen](https://raw.githubusercontent.com/florent37/AnimatedWidgets/master/medias/compose.gif)](https://www.github.com/florent37/AnimatedWidgets)\n\n# Opacity\n\n[![screen](https://raw.githubusercontent.com/florent37/AnimatedWidgets/master/medias/opacity.gif)](https://www.github.com/florent37/AnimatedWidgets)\n\nExample using a `Stateful Widget`\n\n```dart\nclass _StatefulScreenState extends State\u003cStatefulScreen\u003e {\n\n  // will determine if the opacity animation is launched\n  bool _display = false;\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(),\n      body: Column(\n        crossAxisAlignment: CrossAxisAlignment.stretch,\n        mainAxisAlignment: MainAxisAlignment.center,\n        mainAxisSize: MainAxisSize.max,\n        children: [\n\n          //wrap your widget with OpacityAnimatedWidget\n          OpacityAnimatedWidget.tween(\n            opacityEnabled: 1, //define start value\n            opacityDisabled: 0, //and end value\n            enabled: _display, //bind with the boolean\n            child: Container(\n               height: 200,\n               width: 200,\n               child: FlutterLogo(\n                 style: FlutterLogoStyle.stacked,\n               ),\n            ),\n          ),\n\n          RaisedButton(\n            color: Colors.blue,\n            child: Text(\n              _display ? \"hide logo\" : \"display logo\",\n              style: TextStyle(color: Colors.white),\n            ),\n            onPressed: () {\n              setState(() {\n\n                //will fire the animation\n                _display = !_display;\n\n              });\n            },\n          )\n        ],\n      ),\n    );\n  }\n}\n```\n\n# Translation\n\n[![screen](https://raw.githubusercontent.com/florent37/AnimatedWidgets/master/medias/translation.gif)](https://www.github.com/florent37/AnimatedWidgets)\n\nExample using `bloc` pattern\n\n```dart\nclass FirstScreenBloc extends Bloc {\n  final _viewState = BehaviorSubject\u003cFirstScreenViewState\u003e.seeded(FirstScreenViewState());\n  Observable\u003cFirstScreenViewState\u003e get viewState =\u003e _viewState;\n\n  void onClicked() {\n    _viewState.add(FirstScreenViewState(buttonVisible: true));\n  }\n\n  void onDismissClicked() {\n    _viewState.add(FirstScreenViewState(buttonVisible: false));\n  }\n\n  @override\n  void dispose() {\n    _viewState.close();\n  }\n}\n\nclass FirstScreenViewState {\n  final bool buttonVisible;\n\n  const FirstScreenViewState({\n    this.buttonVisible = false,\n  });\n}\n```\n\n```dart\nclass FirstScreenView extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    final bloc = BlocProvider.of\u003cFirstScreenBloc\u003e(context);\n\n    return StreamBuilder\u003cFirstScreenViewState\u003e(\n            stream: bloc.viewState,\n            builder: (context, snapshot) {\n\n                final viewState = snapshot.data;\n\n                return Stack(\n                  fit: StackFit.expand,\n                  children: [\n                    _buildInputButton(onClicked: () {\n                      bloc.onClicked();\n                    }),\n                    Positioned(\n                      bottom: 20,\n                      left: 20,\n                      right: 20,\n\n                      child: TranslationAnimatedWidget(\n                        enabled: viewState.buttonVisible, //will forward/reverse the animation\n                        curve: Curves.easeIn,\n                        duration: Duration(seconds: 1),\n                        values: [\n                          Offset(0, 200),\n                          Offset(0, -50),\n                          Offset(0, 0),\n                        ],\n                        child: RaisedButton(\n                          onPressed: () {\n                            bloc.onDismissClicked();\n                          },\n                          child: Text(\"Dismiss\"),\n                        ),\n\n                      ),\n                    ),\n                  ],\n               );\n            }\n        );\n  }\n}\n```\n\n# Rotation\n\n[![screen](https://raw.githubusercontent.com/florent37/AnimatedWidgets/master/medias/rotation.gif)](https://www.github.com/florent37/AnimatedWidgets)\n\n```dart\nRotationAnimatedWidget.tween(\n    enabled: enabled,\n    rotationDisabled: Rotation.deg(),\n    rotationEnabled: Rotation.deg(z: 90, x: 80),\n    child: /* your widget */\n),\n\nRotationAnimatedWidget.tween(\n    enabled: enabled,\n    rotation: Rotation.deg(),\n    rotationEnabled: Rotation.deg(z: 90, x: 80),\n    child: /* your widget */\n),\n```\n\n# Scale\n\n```dart\nScaleAnimatedWidget.tween(\n      enabled: this._enabled,\n      duration: Duration(milliseconds: 600),\n      scaleDisabled: 0.5,\n      scaleEnabled: 1,\n\n      //your widget\n      child: Container(\n        height: 200,\n        width: 200,\n        child: FlutterLogo(\n          style: FlutterLogoStyle.stacked,\n        ),\n      ),\n    ),\n```\n\n[![screen](https://raw.githubusercontent.com/florent37/AnimatedWidgets/master/medias/scale.gif)](https://www.github.com/florent37/AnimatedWidgets)\n\n# Size\n\n```dart\nSizeAnimatedWidget(\n      enabled: this._enabled,\n      duration: Duration(milliseconds: 1500),\n      values: [Size(100, 100),  Size(100, 150), Size(200, 150), Size(200, 200)],\n      curve: Curves.linear,\n\n      //your widget\n      child: Container(\n        decoration: BoxDecoration(\n          border: Border.all(color: Colors.blue)\n        ),\n        child: FlutterLogo(\n          style: FlutterLogoStyle.stacked,\n        ),\n      ),\n    ),\n```\n\n[![screen](https://raw.githubusercontent.com/florent37/AnimatedWidgets/master/medias/size.gif)](https://www.github.com/florent37/AnimatedWidgets)\n\n# Shake\n\n```dart\nShakeAnimatedWidget(\n      enabled: this._enabled,\n      duration: Duration(milliseconds: 1500),\n      shakeAngle: Rotation.deg(z: 40),\n      curve: Curves.linear,\n      child: FlutterLogo(\n        style: FlutterLogoStyle.stacked,\n      ),\n    ),\n```\n\n[![screen](https://raw.githubusercontent.com/florent37/AnimatedWidgets/master/medias/shake.gif)](https://www.github.com/florent37/AnimatedWidgets)\n\n# Custom Animated\n\n```dart\nCustomAnimatedWidget(\n      enabled: this._enabled,\n      duration: Duration(seconds: 3),\n      curve: Curves.easeOut,\n      builder: (context, percent) { //for custom animation, use builders\n        final int displayedDate = (2018 * percent).floor();\n        return Text(\n              \"current year : $displayedDate\",\n              style: TextStyle(color: Colors.blue),\n        );\n      },\n),\n```\n\n[![screen](https://raw.githubusercontent.com/florent37/AnimatedWidgets/master/medias/custom.gif)](https://www.github.com/florent37/AnimatedWidgets)\n\n## Flutter Package\n\nAnimated widget is available at\nhttps://pub.dev/packages/animated_widgets\n\n```\ndependencies:\n  animated_widgets:\n```\n\n## Getting Started with Flutter\n\nFor help getting started with Flutter, view our \n[online documentation](https://flutter.dev/docs), which offers tutorials, \nsamples, guidance on mobile development, and a full API reference.\n\n# License\n\n    Copyright 2019 florent37, Inc.\n\n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflorent37%2Fanimatedwidgets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflorent37%2Fanimatedwidgets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflorent37%2Fanimatedwidgets/lists"}