{"id":16803390,"url":"https://github.com/salihgueler/flutter_before_after_image","last_synced_at":"2025-08-23T02:37:41.270Z","repository":{"id":56826525,"uuid":"154094740","full_name":"salihgueler/flutter_before_after_image","owner":"salihgueler","description":"A Slider view for Before-After use-case for Flutter.","archived":false,"fork":false,"pushed_at":"2020-07-10T16:54:01.000Z","size":4371,"stargazers_count":50,"open_issues_count":2,"forks_count":5,"subscribers_count":0,"default_branch":"master","last_synced_at":"2024-12-24T18:14:16.587Z","etag":null,"topics":["flutter","flutter-plugin","flutter-plugins","library"],"latest_commit_sha":null,"homepage":null,"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/salihgueler.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},"funding":{"github":"salihgueler"}},"created_at":"2018-10-22T06:09:28.000Z","updated_at":"2024-11-29T02:07:10.000Z","dependencies_parsed_at":"2022-09-20T22:02:18.368Z","dependency_job_id":null,"html_url":"https://github.com/salihgueler/flutter_before_after_image","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salihgueler%2Fflutter_before_after_image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salihgueler%2Fflutter_before_after_image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salihgueler%2Fflutter_before_after_image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salihgueler%2Fflutter_before_after_image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/salihgueler","download_url":"https://codeload.github.com/salihgueler/flutter_before_after_image/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":231494438,"owners_count":18385248,"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":["flutter","flutter-plugin","flutter-plugins","library"],"created_at":"2024-10-13T09:42:27.435Z","updated_at":"2024-12-27T13:59:15.437Z","avatar_url":"https://github.com/salihgueler.png","language":"Dart","funding_links":["https://github.com/sponsors/salihgueler"],"categories":[],"sub_categories":[],"readme":"#  Before After Image\n\n**BeforeAfterImage** is a Flutter plugin to create a Before-After view with stacked two images and give user experience about before and after view.\n\n![Alt Text](https://github.com/salihgueler/flutter_before_after_image/blob/master/resource/preview.gif)\n\n## How to use?\n\nYou can import it as it's shown below.\n\n```\ndependencies:\n  before_after_image_slider: ^0.0.2\n```\n\nThen update your packages and import it in your project\n\n```\n$ flutter packages get\n```\n\nYou can simply use it by adding two images to **beforeImage** and **afterImage** values.\n\n**dividerThickness** and **dividerColor** can be modified too. These two values have default values of **5.0** for dividerThickness and **Colors.black12** for dividerColor.\n\n```\nimport 'package:flutter/material.dart';\nimport 'package:before_after_image_slider/before_after_image_slider.dart';\n\nvoid main() =\u003e runApp(new MyApp());\n\nclass MyApp extends StatefulWidget {\n  @override\n  _MyAppState createState() =\u003e new _MyAppState();\n}\n\nclass _MyAppState extends State\u003cMyApp\u003e {\n  @override\n  Widget build(BuildContext context) {\n    return new MaterialApp(\n        home: new Scaffold(\n            appBar: new AppBar(\n              title: const Text('Plugin example app'),\n  ),\n  body: Container(\n              child: BeforeAfterImage(\n                  beforeImage: Image.network(\n                      'https://cdn.images.express.co.uk/img/dynamic/galleries/x701/59626.jpg'),\n  afterImage: Image.network(\n                      'https://cdn.images.express.co.uk/img/dynamic/galleries/x701/59640.jpg')),\n  )));\n  }\n}\n```\n\n## TODOs\n- Add Landscape mode support.\n- Add icon for slider.\n- Tests\n\n## License\n\n#### salihgueler/flutter_before_after_image repository is licensed under the Apache License 2.0\n\nA permissive license whose main conditions require preservation of copyright and license notices. Contributors provide an express grant of patent rights. Licensed works, modifications, and larger works may be distributed under different terms and without source code.\n\nFor more information about license, check  `LICENSE`  file.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsalihgueler%2Fflutter_before_after_image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsalihgueler%2Fflutter_before_after_image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsalihgueler%2Fflutter_before_after_image/lists"}