{"id":13465538,"url":"https://github.com/xsahil03x/before_after","last_synced_at":"2025-05-16T02:09:47.496Z","repository":{"id":37549307,"uuid":"196949511","full_name":"xsahil03x/before_after","owner":"xsahil03x","description":"A flutter package which makes it easier to display the difference between two images.","archived":false,"fork":false,"pushed_at":"2024-07-09T18:25:51.000Z","size":9191,"stargazers_count":915,"open_issues_count":5,"forks_count":109,"subscribers_count":12,"default_branch":"master","last_synced_at":"2024-10-29T15:48:36.421Z","etag":null,"topics":["before-after","dart","flutter","flutter-package","hacktoberfest","slider"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/before_after","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/xsahil03x.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":{"github":null,"patreon":"xsahil03x","open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null}},"created_at":"2019-07-15T07:42:22.000Z","updated_at":"2024-10-22T09:14:06.000Z","dependencies_parsed_at":"2024-07-31T15:01:33.165Z","dependency_job_id":"4f65f9ed-f43b-41dd-8718-04e8c827ece3","html_url":"https://github.com/xsahil03x/before_after","commit_stats":{"total_commits":42,"total_committers":5,"mean_commits":8.4,"dds":0.1428571428571429,"last_synced_commit":"107459bd553a67ee454592e9ab3ce196e81c1643"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xsahil03x%2Fbefore_after","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xsahil03x%2Fbefore_after/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xsahil03x%2Fbefore_after/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xsahil03x%2Fbefore_after/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xsahil03x","download_url":"https://codeload.github.com/xsahil03x/before_after/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247838446,"owners_count":21004580,"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":["before-after","dart","flutter","flutter-package","hacktoberfest","slider"],"created_at":"2024-07-31T15:00:31.685Z","updated_at":"2025-04-08T12:12:18.639Z","avatar_url":"https://github.com/xsahil03x.png","language":"Dart","funding_links":["https://patreon.com/xsahil03x"],"categories":["Components","Dart","็ป„ไปถ","UI [๐Ÿ”](#readme)"],"sub_categories":["UI"],"readme":"# ๐Ÿ‘ Before After [![Open Source Love](https://badges.frapsoft.com/os/v1/open-source.svg?v=102)](https://opensource.org/licenses/MIT) [![License](https://img.shields.io/badge/license-MIT-orange.svg)](https://github.com/xsahil03x/before_after/blob/master/LICENSE) [![before_after](https://github.com/xsahil03x/before_after/actions/workflows/before_after.yaml/badge.svg)](https://github.com/xsahil03x/before_after/actions/workflows/before_after.yaml) [![Awesome Flutter](https://img.shields.io/badge/Awesome-Flutter-blue.svg)](https://github.com/Solido/awesome-flutter) [![FlutterWeekly](https://img.shields.io/badge/Flutter%20Weekly-%2368-teal.svg)](https://mailchi.mp/flutterweekly/flutter-weekly-68)\n\n\u003cp align=\"center\"\u003e \n\u003cimg src=\"https://user-images.githubusercontent.com/25670178/61337576-978f1780-a853-11e9-9249-3637d0861ebb.gif\" width=\"100%\"\u003e\n\u003c/p\u003e\n\n[![Say Thanks!](https://img.shields.io/badge/Say%20Thanks-!-1EAEDB.svg)](https://saythanks.io/to/xsahil03x) [![Twitter](https://img.shields.io/twitter/url/https/github.com/xsahil03x/giffy_dialog.svg?style=social)](https://twitter.com/intent/tweet?text=Wow:\u0026url=https%3A%2F%2Fgithub.com%2Fxsahil03x%2Fgiffy_dialog)\n\n\u003cp\u003eA flutter package which makes it easier to display the differences between two images..\u003c/p\u003e\n\nThe source code is **100% Dart**, and everything resides in\nthe [/lib](https://github.com/xsahil03x/giffy_dialog/tree/master/lib) folder.\n\nLive Demo: https://xsahil03x.github.io/before_after\n\n### Show some :heart: and star the repo to support the project\n\n[![GitHub stars](https://img.shields.io/github/stars/xsahil03x/before_after.svg?style=social\u0026label=Star)](https://github.com/xsahil03x/before_after) [![GitHub forks](https://img.shields.io/github/forks/xsahil03x/before_after.svg?style=social\u0026label=Fork)](https://github.com/xsahil03x/before_after/fork) [![GitHub watchers](https://img.shields.io/github/watchers/xsahil03x/before_after.svg?style=social\u0026label=Watch)](https://github.com/xsahil03x/before_after) [![GitHub followers](https://img.shields.io/github/followers/xsahil03x.svg?style=social\u0026label=Follow)](https://github.com/xsahil03x/giffy_dialog) \n[![Twitter Follow](https://img.shields.io/twitter/follow/xsahil03x.svg?style=social)](https://twitter.com/xsahil03x)\n\n# ๐Ÿ”… Gifs\n\n| | | |\n|-------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------|\n| \u003cimg src=\"https://user-images.githubusercontent.com/25670178/61337857-a3c7a480-a854-11e9-9582-87d7f5592007.gif\" height=\"400\" alt=\"Screenshot\"/\u003e | \u003cimg src=\"https://user-images.githubusercontent.com/25670178/61338133-ba223000-a855-11e9-8b0a-a236a068c4c2.gif\" height=\"400\" alt=\"Screenshot\"/\u003e | \u003cimg src=\"https://user-images.githubusercontent.com/25670178/61338086-8e9f4580-a855-11e9-8b7e-72244b6a456e.gif\" height=\"400\" alt=\"Screenshot\"/\u003e |\n| | | |\n\n# ๐Ÿ’ป Installation\n\nIn the `dependencies:` section of your `pubspec.yaml`, add the following line:\n\n[![Version](https://img.shields.io/pub/v/before_after.svg)](https://pub.dartlang.org/packages/before_after)\n\n```yaml\ndependencies:\n before_after: \u003clatest version\u003e\n```\n\n# โ” Usage\n\n### Import this class\n\n```dart\nimport 'package:before_after/before_after.dart';\n```\n\n### before after\n\n```dart\nBeforeAfter(\n value: value,\n before: Image.asset('assets/after.png'),\n after: Image.asset('assets/before.png'),\n onValueChanged: (value) {\n setState(() =\u003e this.value = value);\n },\n)\n```\n\n## ๐ŸŽจ Customization and Attributes\n\n| Field | Type | Description |\n|------------------------|--------------------------------|-----------------------------------------------------------------------------------------|\n| before | Widget | The widget to be displayed before the slider. |\n| after | Widget | The widget to be displayed after the slider. |\n| direction | SliderDirection | The drag direction of the slider. |\n| height | double? | The height of the BeforeAfter widget. |\n| width | double? | The width of the BeforeAfter widget. |\n| trackWidth | double? | The width of the slider track. |\n| trackColor | Color? | The color of the slider track. |\n| hideThumb | bool | Whether to hide the slider thumb. |\n| thumbHeight | double? | The height of the slider thumb. |\n| thumbWidth | double? | The width of the slider thumb. |\n| thumbColor | Color? | The color of the slider thumb. |\n| overlayColor | MaterialStateProperty\u003cColor?\u003e? | The highlight color that's typically used to indicate that the slider thumb is focused. |\n| thumbDecoration | BoxDecoration? | The decoration of the slider thumb. |\n| divisions | int? | The number of discrete divisions on the slider. |\n| value | double | The position of the slider, ranging from 0.0 to 1.0. |\n| onValueChanged | ValueChanged\u003cdouble\u003e? | A callback function that is called when the value of the slider changes. |\n| thumbDivisions | int? | The number of discrete divisions on the slider thumb. |\n| thumbPosition | double | The position of the slider thumb, ranging from 0.0 to 1.0. |\n| onThumbPositionChanged | ValueChanged\u003cdouble\u003e? | A callback function that is called when the position of the thumb changes. |\n| focusNode | FocusNode? | The focus node for the widget. |\n| autofocus | bool | Whether the widget should be focused automatically. |\n| mouseCursor | MouseCursor? | The cursor for a mouse pointer when it enters or hovers over the widget. |\n\n# ๐Ÿ“ƒ License\n\n[MIT License](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxsahil03x%2Fbefore_after","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxsahil03x%2Fbefore_after","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxsahil03x%2Fbefore_after/lists"}