{"id":32270176,"url":"https://github.com/chrisbinsunny/flippy","last_synced_at":"2026-02-23T10:32:00.633Z","repository":{"id":65488033,"uuid":"588525368","full_name":"chrisbinsunny/flippy","owner":"chrisbinsunny","description":"Flippy is a pub widget which can be flipped by button press or drag interaction and is highly customizable.","archived":false,"fork":false,"pushed_at":"2023-01-25T18:10:33.000Z","size":1077,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-22T22:37:57.944Z","etag":null,"topics":["card","flip","flipper","flutter","flutter-package","package"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/flippy","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chrisbinsunny.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":"2023-01-13T10:32:40.000Z","updated_at":"2024-09-18T02:46:04.000Z","dependencies_parsed_at":"2023-02-14T09:01:48.899Z","dependency_job_id":null,"html_url":"https://github.com/chrisbinsunny/flippy","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/chrisbinsunny/flippy","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisbinsunny%2Fflippy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisbinsunny%2Fflippy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisbinsunny%2Fflippy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisbinsunny%2Fflippy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chrisbinsunny","download_url":"https://codeload.github.com/chrisbinsunny/flippy/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisbinsunny%2Fflippy/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29741154,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-23T07:44:07.782Z","status":"ssl_error","status_checked_at":"2026-02-23T07:44:07.432Z","response_time":90,"last_error":"SSL_read: 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":["card","flip","flipper","flutter","flutter-package","package"],"created_at":"2025-10-22T22:33:19.474Z","updated_at":"2026-02-23T10:32:00.622Z","avatar_url":"https://github.com/chrisbinsunny.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Flippy- Flip it 🎡\n\nFlippy is an interactive flip widget for Flutter. With Flippy, you can easily customize and flip between two sides of a card in an intuitive way. This widget is built to be highly customizable and easy to use, making it the perfect addition to your Flutter app. Get ready to take your widgets to the next level with Flippy!\n\n| ![Flipper](https://github.com/chrisbinsunny/flippy/blob/master/doc/regularFlipper.gif?raw=true) | ![Draggable Flipper](https://github.com/chrisbinsunny/flippy/blob/master/doc/dragFlipper.gif?raw=true) |\n|--|--|\n| **Flipper** | **DragFlipper** |\n\n\n## Getting started\n\nTo start using Flippy, you need to add the package to your pubspec.yaml file:\n\nDepend on it:\n```yaml  \ndependencies:  \n   flipper: 0.1.0\n```  \nImport it:\n```dart  \nimport 'package:flippy/flippy.dart';\n```  \n\n## Features\n✅ Draggable and Non-Draggable flipper cards  \n✅ Funtions to turn to all sides  \n✅ Dynamic customisable shadow  \n✅ Complete control over widgets\n\n**TODO: Coming Soon**\n\n🟩 Animation duration  \n🟩 Optional sticky animation  \n🟩 Thickness to card  \n🟩 Single widget flip  \n🟩 Sounds on flip\n\n## Flippy Usage\n\n### Draggable Flipper\nThe Draggable Flipper is a versatile flip widget for Flutter that allows you to flip your widgets using both hand gesture and a controller with its various functions. To use the Draggable Flipper, you need to wrap the widgets you want to flip with the `DragFlipper` widget and pass a `controller`.\n\n```dart  \nDragFlipper(  \n  front: const FrontWidget(),  //required\n  back: const BackWidget(),  //required\n  controller: flipperController,  //required\n  height: double,  \n  width: double,  \n  padding: EdgeInsets,  \n  margin: EdgeInsets,  \n  backgroundColor: Color,  \n  border: Border,  \n  borderRadius: BorderRadius,  \n  gradient: Gradient,  \n  shape: BoxShape,  \n)  \n```  \n\n### Regular Flipper\nThe Regular Flipper is a flip widget for Flutter app that allows you to flip your widgets using a controller with its various functions. Unlike the Draggable Flipper, the Regular Flipper does not support dragging or gestures as a means of flipping the widget. To use the Regular Flipper, you need to wrap the widgets you want to flip with the `RegularFlipper` widget and pass a `controller`.\n\n```dart  \nFlipper(  \n  front: FrontWidget(),  //required\n  back: BackWidget(),  //required\n  controller: flipperController,  //required\n  height: double,  \n  width: double,  \n  padding: EdgeInsets,  \n  margin: EdgeInsets,  \n  backgroundColor: Color,  \n  border: Border,  \n  borderRadius: BorderRadius,  \n  gradient: Gradient,  \n  shape: BoxShape,  \n)  \n```  \n## Controller Usage\nThe FlipperController is a required parameter for both Flipper and DragFlipper. Controller allows you to control the animation of the flipper manually and programmatically. By using the `controller` parameter, you can add programmatic buttons to flip the flipper to the left or right.  \nTo create a FlipperController, you can use the `FlipperController()` constructor, which accepts a `dragAxis` parameter. The `dragAxis` parameter defaults to `DragAxis.horizontal`, but it can also be set to `DragAxis.vertical` and `DragAxis.both` to change the direction of the flip animation.\n\n```dart  \nFlipperController controller= FlipperController(  \n  dragAxis: DragAxis.both,  \n);\n```  \n### Methods\n\nThe `FlipperController` has three main methods:\n\n-   `flipLeft()`: Flips the flipper to the left for one time. Only works with `DragAxis.horizontal` and `DragAxis.both`.\n-   `flipRight()`: Flips the flipper to the right for one time. Only works with `DragAxis.horizontal` and `DragAxis.both`.\n-   `flipDown()`: Flips the flipper to the bottom for one time. Only works with `DragAxis.vertical` and `DragAxis.both`.\n-    `flipUp()`: Flips the flipper to the top for one time. Only works with `DragAxis.vertical` and `DragAxis.both`.\n\nPlease note that the `dragAxis` parameter of the FlipperController determines which flipping functions can be called. If `dragAxis` is set to `DragAxis.vertical`, you can only call `flipDown()` and `flipUp()`. If it is set to `DragAxis.horizontal`, you can only call `flipLeft()` and `flipRight()`.\n\n### Example\n\nHere is an example of how to use the `FlipperController` to add a programmatic button to flip the flipper to the left.\n```dart\nFlipperController flipperController= FlipperController(  \n  dragAxis: DragAxis.horizontal,  \n);\n\n@override\nWidget build(BuildContext context) {\n  return Scaffold(\n    body: DragFlipper(\n      controller: _flipperController,\n      front: Text('Front'),\n      back: Text('Back'),\n    ),\n    floatingActionButton: FloatingActionButton(\n      onPressed: () =\u003e flipperController.flipLeft(),\n      child: Icon(Icons.arrow_back),\n    ),\n  );\n} \n```\n\n\n\n## Additional information\n\nFind the documentation and API References [here](https://pub.dev/documentation/flippy/latest/)\n\n### Issues\nReport the found issues [here](https://github.com/chrisbinsunny/flippy/issues).\n\n###  Contributing\n\n1. Fork it (\u003chttps://github.com/chrisbinsunny/flippy/fork\u003e)\n2. Create your feature branch (`git checkout -b feature/fooBar`)\n3. Commit your changes (`git commit -am 'Add some fooBar'`)\n4. Push to the branch (`git push origin feature/fooBar`)\n5. Create a new Pull Request\n\n**Contributors**\n\n\u003ca href=\"https://github.com/chrisbinsunny/flippy/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=chrisbinsunny/flippy\" /\u003e\n\u003c/a\u003e\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisbinsunny%2Fflippy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchrisbinsunny%2Fflippy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisbinsunny%2Fflippy/lists"}