[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-9475":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":22,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":30,"readmeContent":31,"aiSummary":32,"trendingCount":16,"starSnapshotCount":16,"syncStatus":33,"lastSyncTime":34,"discoverSource":35},9475,"before_after","xsahil03x\u002Fbefore_after","xsahil03x","A flutter package which makes it easier to display the difference between two images.","https:\u002F\u002Fpub.dev\u002Fpackages\u002Fbefore_after",null,"Dart",1031,110,11,1,0,4,19.14,"MIT License",false,"master",true,[24,25,26,27,28,29],"before-after","dart","flutter","flutter-package","hacktoberfest","slider","2026-06-12 02:02:08","# 👏 Before After [![Open Source Love](https:\u002F\u002Fbadges.frapsoft.com\u002Fos\u002Fv1\u002Fopen-source.svg?v=102)](https:\u002F\u002Fopensource.org\u002Flicenses\u002FMIT) [![License](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-MIT-orange.svg)](https:\u002F\u002Fgithub.com\u002Fxsahil03x\u002Fbefore_after\u002Fblob\u002Fmaster\u002FLICENSE) [![before_after](https:\u002F\u002Fgithub.com\u002Fxsahil03x\u002Fbefore_after\u002Factions\u002Fworkflows\u002Fbefore_after.yaml\u002Fbadge.svg)](https:\u002F\u002Fgithub.com\u002Fxsahil03x\u002Fbefore_after\u002Factions\u002Fworkflows\u002Fbefore_after.yaml) [![Awesome Flutter](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FAwesome-Flutter-blue.svg)](https:\u002F\u002Fgithub.com\u002FSolido\u002Fawesome-flutter) [![FlutterWeekly](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FFlutter%20Weekly-%2368-teal.svg)](https:\u002F\u002Fmailchi.mp\u002Fflutterweekly\u002Fflutter-weekly-68)\n\n\u003Cp align=\"center\"> \n\u003Cimg src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F25670178\u002F61337576-978f1780-a853-11e9-9249-3637d0861ebb.gif\" width=\"100%\">\n\u003C\u002Fp>\n\n[![Say Thanks!](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FSay%20Thanks-!-1EAEDB.svg)](https:\u002F\u002Fsaythanks.io\u002Fto\u002Fxsahil03x) [![Twitter](https:\u002F\u002Fimg.shields.io\u002Ftwitter\u002Furl\u002Fhttps\u002Fgithub.com\u002Fxsahil03x\u002Fgiffy_dialog.svg?style=social)](https:\u002F\u002Ftwitter.com\u002Fintent\u002Ftweet?text=Wow:&url=https%3A%2F%2Fgithub.com%2Fxsahil03x%2Fgiffy_dialog)\n\n\u003Cp>A flutter package which makes it easier to display the differences between two images..\u003C\u002Fp>\n\nThe source code is **100% Dart**, and everything resides in\nthe [\u002Flib](https:\u002F\u002Fgithub.com\u002Fxsahil03x\u002Fgiffy_dialog\u002Ftree\u002Fmaster\u002Flib) folder.\n\nLive Demo: https:\u002F\u002Fxsahil03x.github.io\u002Fbefore_after\n\n### Show some :heart: and star the repo to support the project\n\n[![GitHub stars](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Fxsahil03x\u002Fbefore_after.svg?style=social&label=Star)](https:\u002F\u002Fgithub.com\u002Fxsahil03x\u002Fbefore_after) [![GitHub forks](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fforks\u002Fxsahil03x\u002Fbefore_after.svg?style=social&label=Fork)](https:\u002F\u002Fgithub.com\u002Fxsahil03x\u002Fbefore_after\u002Ffork) [![GitHub watchers](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fwatchers\u002Fxsahil03x\u002Fbefore_after.svg?style=social&label=Watch)](https:\u002F\u002Fgithub.com\u002Fxsahil03x\u002Fbefore_after) [![GitHub followers](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Ffollowers\u002Fxsahil03x.svg?style=social&label=Follow)](https:\u002F\u002Fgithub.com\u002Fxsahil03x\u002Fgiffy_dialog) \n[![Twitter Follow](https:\u002F\u002Fimg.shields.io\u002Ftwitter\u002Ffollow\u002Fxsahil03x.svg?style=social)](https:\u002F\u002Ftwitter.com\u002Fxsahil03x)\n\n# 🔅 Gifs\n\n| | | |\n|-------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------|\n| \u003Cimg src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F25670178\u002F61337857-a3c7a480-a854-11e9-9582-87d7f5592007.gif\" height=\"400\" alt=\"Screenshot\"\u002F> | \u003Cimg src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F25670178\u002F61338133-ba223000-a855-11e9-8b0a-a236a068c4c2.gif\" height=\"400\" alt=\"Screenshot\"\u002F> | \u003Cimg src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F25670178\u002F61338086-8e9f4580-a855-11e9-8b7e-72244b6a456e.gif\" height=\"400\" alt=\"Screenshot\"\u002F> |\n| | | |\n\n# 💻 Installation\n\nIn the `dependencies:` section of your `pubspec.yaml`, add the following line:\n\n[![Version](https:\u002F\u002Fimg.shields.io\u002Fpub\u002Fv\u002Fbefore_after.svg)](https:\u002F\u002Fpub.dartlang.org\u002Fpackages\u002Fbefore_after)\n\n```yaml\ndependencies:\n before_after: \u003Clatest version>\n```\n\n# ❔ Usage\n\n### Import this class\n\n```dart\nimport 'package:before_after\u002Fbefore_after.dart';\n```\n\n### before after\n\n```dart\nBeforeAfter(\n value: value,\n before: Image.asset('assets\u002Fafter.png'),\n after: Image.asset('assets\u002Fbefore.png'),\n onValueChanged: (value) {\n setState(() => 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?>? | 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>? | 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>? | 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","Before After 是一个 Flutter 包，用于简化两张图片差异的展示。其核心功能是通过滑块机制让用户直观地比较两张图片的不同之处，完全采用 Dart 语言编写，易于集成到现有的 Flutter 项目中。此包特别适用于需要展示图像处理前后的对比效果、产品设计变更展示等场景，为开发者提供了一种简洁高效的方式来增强用户体验。",2,"2026-06-11 03:23:01","top_language"]