A flutter package which makes it easier to display the difference between two images.

Overview

๐Ÿ‘ Before After Open Source Love License Build Status Awesome Flutter FlutterWeekly

Say Thanks! Twitter

A flutter package which makes it easier to display the differences between two images..

The source code is 100% Dart, and everything resides in the /lib folder.

Show some โค๏ธ and star the repo to support the project

GitHub stars GitHub forks GitHub watchers GitHub followers
Twitter Follow

๐Ÿ”… Gifs

Screenshot Screenshot Screenshot

๐Ÿ’ป Installation

In the dependencies: section of your pubspec.yaml, add the following line:

Version

dependencies:
  before_after: <latest version>

โ” Usage

Import this class

import 'package:before_after/before_after.dart';

before after

   BeforeAfter(
     beforeImage: Image.asset('assets/after.jpg'),
     afterImage: Image.asset('assets/before.jpg'),
   ),

๐ŸŽจ Customization and Attributes

All customizable attributes for BeforeAfter Widget

Attribute Name Example Value Description
beforeImage (Widget) Image.asset('assets/before.jpg') Sets the Before Image
afterImage (Widget) Image.asset('assets/after.jpg') Sets the After Image
isVertical (bool) false Sets the orientation of the slider
imageHeight (double) 100.0 Sets height of both the images
imageWidth (double) 200.0 Sets width of the images
imageCornerRadius (double) 16.0 Sets the corner radius of the images
thumbColor (Color) Colors.red Sets the color of the slider
thumbRadius (double) 16.0 Sets the radius of the thumb circle
overlayColor (Color) Colors.yellow Sets the color of the slider thumb overlay

๐Ÿ‘ How to Contribute

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request

๐Ÿ“ƒ License

Copyright (c) 2019 Sahil Kumar

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Getting Started

For help getting started with Flutter, view our online documentation.

For help on editing package code, view the documentation.

Comments
  • Request to add Product in Start Flutter

    Request to add Product in Start Flutter

    Hello,

    I am Maheshwari from team GeekyAnts. On behalf of Start Flutter, we add open source products which we find helpful to the community & also we provide credits to author itself.

    Let me know if you are interested showcase your product in our open source website.

    Looking forward to hear from you.

    opened by maheshwari-1153 4
  • The following assertion was thrown during paint():

    The following assertion was thrown during paint():

    Hello, before I thank you all for creating this plugin that is great. The example compiles me well and the application will be opened but when I start it is this in the debug console:

    Restarted application in 24.145ms. I/flutter ( 7025): โ•โ•โ•ก EXCEPTION CAUGHT BY RENDERING LIBRARY โ•žโ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ• I/flutter ( 7025): The following assertion was thrown during paint(): I/flutter ( 7025): 'package:flutter/src/material/slider_theme.dart': Failed assertion: line 1469 pos 12: I/flutter ( 7025): 'parentBox.size.height >= trackHeight': is not true. I/flutter ( 7025): I/flutter ( 7025): Either the assertion indicates an error in the framework itself, or we should provide substantially I/flutter ( 7025): more information in this error message to help you determine and fix the underlying cause. I/flutter ( 7025): In either case, please report this assertion by filing a bug on GitHub: I/flutter ( 7025): https://github.com/flutter/flutter/issues/new?template=BUG.md I/flutter ( 7025): I/flutter ( 7025): When the exception was thrown, this was the stack: I/flutter ( 7025): #2 _RoundedRectSliderTrackShape&SliderTrackShape&BaseSliderTrackShape.getPreferredRect I/flutter ( 7025): #3 _RenderSlider.paint I/flutter ( 7025): #4 RenderObject._paintWithContext I/flutter ( 7025): #5 PaintingContext.paintChild I/flutter ( 7025): #6 _RenderStack&RenderBox&ContainerRenderObjectMixin&RenderBoxContainerDefaultsMixin.defaultPaint I/flutter ( 7025): #7 RenderStack.paintStack I/flutter ( 7025): #8 RenderStack.paint I/flutter ( 7025): #9 RenderObject._paintWithContext I/flutter ( 7025): #10 PaintingContext.paintChild I/flutter ( 7025): #11 _RenderFlex&RenderBox&ContainerRenderObjectMixin&RenderBoxContainerDefaultsMixin.defaultPaint I/flutter ( 7025): #12 RenderFlex.paint I/flutter ( 7025): #13 RenderObject._paintWithContext I/flutter ( 7025): #14 PaintingContext.paintChild I/flutter ( 7025): #15 _RenderCustomMultiChildLayoutBox&RenderBox&ContainerRenderObjectMixin&RenderBoxContainerDefaultsMixin.defaultPaint I/flutter ( 7025): #16 RenderCustomMultiChildLayoutBox.paint I/flutter ( 7025): #17 RenderObject._paintWithContext I/flutter ( 7025): #18 PaintingContext.paintChild I/flutter ( 7025): #19 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.paint I/flutter ( 7025): #20 _RenderInkFeatures.paint I/flutter ( 7025): #21 RenderObject._paintWithContext I/flutter ( 7025): #22 PaintingContext.paintChild I/flutter ( 7025): #23 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.paint I/flutter ( 7025): #24 PaintingContext.pushLayer I/flutter ( 7025): #25 RenderPhysicalModel.paint I/flutter ( 7025): #26 RenderObject._paintWithContext I/flutter ( 7025): #27 PaintingContext.paintChild I/flutter ( 7025): #28 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.paint I/flutter ( 7025): #29 RenderObject._paintWithContext I/flutter ( 7025): #30 PaintingContext.paintChild I/flutter ( 7025): #31 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.paint I/flutter ( 7025): #32 RenderObject._paintWithContext I/flutter ( 7025): #33 PaintingContext._repaintCompositedChild I/flutter ( 7025): #34 PaintingContext.repaintCompositedChild I/flutter ( 7025): #35 PaintingContext._compositeChild I/flutter ( 7025): #36 PaintingContext.paintChild I/flutter ( 7025): #37 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.paint I/flutter ( 7025): #38 RenderObject._paintWithContext I/flutter ( 7025): #39 PaintingContext.paintChild I/flutter ( 7025): #40 RenderAnimatedOpacity.paint I/flutter ( 7025): #41 RenderObject._paintWithContext I/flutter ( 7025): #42 PaintingContext.paintChild I/flutter ( 7025): #43 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.paint I/flutter ( 7025): #44 RenderFractionalTranslation.paint I/flutter ( 7025): #45 RenderObject._paintWithContext I/flutter ( 7025): #46 PaintingContext.paintChild I/flutter ( 7025): #47 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.paint I/flutter ( 7025): #48 RenderObject._paintWithContext I/flutter ( 7025): #49 PaintingContext._repaintCompositedChild I/flutter ( 7025): #50 PaintingContext.repaintCompositedChild I/flutter ( 7025): #51 PaintingContext._compositeChild I/flutter ( 7025): #52 PaintingContext.paintChild I/flutter ( 7025): #53 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.paint I/flutter ( 7025): #54 RenderObject._paintWithContext I/flutter ( 7025): #55 PaintingContext.paintChild I/flutter ( 7025): #56 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.paint I/flutter ( 7025): #57 RenderOffstage.paint I/flutter ( 7025): #58 RenderObject._paintWithContext I/flutter ( 7025): #59 PaintingContext.paintChild I/flutter ( 7025): #60 _RenderStack&RenderBox&ContainerRenderObjectMixin&RenderBoxContainerDefaultsMixin.defaultPaint I/flutter ( 7025): #61 RenderStack.paintStack I/flutter ( 7025): #62 RenderStack.paint I/flutter ( 7025): #63 RenderObject._paintWithContext I/flutter ( 7025): #64 PaintingContext.paintChild I/flutter ( 7025): #65 __RenderTheatre&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.paint I/flutter ( 7025): #66 RenderObject._paintWithContext I/flutter ( 7025): #67 PaintingContext.paintChild I/flutter ( 7025): #68 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.paint I/flutter ( 7025): #69 RenderObject._paintWithContext I/flutter ( 7025): #70 PaintingContext.paintChild I/flutter ( 7025): #71 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.paint I/flutter ( 7025): #72 RenderObject._paintWithContext I/flutter ( 7025): #73 PaintingContext.paintChild I/flutter ( 7025): #74 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.paint I/flutter ( 7025): #75 RenderPointerListener.paint I/flutter ( 7025): #76 RenderObject._paintWithContext I/flutter ( 7025): #77 PaintingContext.paintChild I/flutter ( 7025): #78 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.paint I/flutter ( 7025): #79 RenderCustomPaint.paint I/flutter ( 7025): #80 RenderObject._paintWithContext I/flutter ( 7025): #81 PaintingContext.paintChild I/flutter ( 7025): #82 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.paint I/flutter ( 7025): #83 RenderObject._paintWithContext I/flutter ( 7025): #84 PaintingContext.paintChild I/flutter ( 7025): #85 RenderView.paint I/flutter ( 7025): #86 RenderObject._paintWithContext I/flutter ( 7025): #87 PaintingContext._repaintCompositedChild I/flutter ( 7025): #88 PaintingContext.repaintCompositedChild I/flutter ( 7025): #89 PipelineOwner.flushPaint I/flutter ( 7025): #90 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding.drawFrame I/flutter ( 7025): #91 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding&WidgetsBinding.drawFrame I/flutter ( 7025): #92 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding._handlePersistentFrameCallback I/flutter ( 7025): #93 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback I/flutter ( 7025): #94 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame I/flutter ( 7025): #95 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.scheduleWarmUpFrame.<anonymous closure> I/flutter ( 7025): #104 _Timer._runTimers (dart:isolate-patch/timer_impl.dart:382:19) I/flutter ( 7025): #105 _Timer._handleMessage (dart:isolate-patch/timer_impl.dart:416:5) I/flutter ( 7025): #106 _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:172:12) I/flutter ( 7025): (elided 10 frames from class _AssertionError, package dart:async, and package dart:async-patch) I/flutter ( 7025): I/flutter ( 7025): The following RenderObject was being processed when the exception was fired: _RenderSlider#43b88: I/flutter ( 7025): creator: _SliderRenderObjectWidget โ† Slider โ† SliderTheme โ† Positioned โ† Stack โ† BeforeAfter โ† I/flutter ( 7025): Column โ† MediaQuery โ† LayoutId-[<_ScaffoldSlot.body>] โ† CustomMultiChildLayout โ† AnimatedBuilder โ† I/flutter ( 7025): DefaultTextStyle โ† โ‹ฏ I/flutter ( 7025): parentData: top=0.0; right=0.0; bottom=0.0; left=0.0; offset=Offset(0.0, 0.0) (can use size) I/flutter ( 7025): constraints: BoxConstraints(w=48.0, h=0.0) I/flutter ( 7025): semantic boundary I/flutter ( 7025): size: Size(48.0, 0.0) I/flutter ( 7025): This RenderObject has no descendants. I/flutter ( 7025): โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•

    execute flutter doctor -v

    `[โˆš] Flutter (Channel stable, v1.7.8+hotfix.3, on Microsoft Windows [Versiรƒยณn 10.0.17763.615], locale es-CU) โ€ข Flutter version 1.7.8+hotfix.3 at C:\src\flutter โ€ข Framework revision b712a172f9 (10 days ago), 2019-07-09 13:14:38 -0700 โ€ข Engine revision 54ad777fd2 โ€ข Dart version 2.4.0

    [โˆš] Android toolchain - develop for Android devices (Android SDK version 28.0.3) โ€ข Android SDK at D:\Programas\Android\SDK โ€ข Android NDK location not configured (optional; useful for native profiling support) โ€ข Platform android-Q, build-tools 28.0.3 โ€ข ANDROID_HOME = D:\Programas\Android\SDK โ€ข Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java โ€ข Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1248-b01) โ€ข All Android licenses accepted.

    [โˆš] Android Studio (version 3.3) โ€ข Android Studio at C:\Program Files\Android\Android Studio โ€ข Flutter plugin version 34.0.1 โ€ข Dart plugin version 182.5215 โ€ข Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1248-b01)

    [โˆš] VS Code (version 1.36.1) โ€ข VS Code at C:\Users\yeikel\AppData\Local\Programs\Microsoft VS Code โ€ข Flutter extension version 2.20.0

    [โˆš] Connected device (1 available) โ€ข SM T580 โ€ข 52037296ea36c3b1 โ€ข android-arm โ€ข Android 8.1.0 (API 27)

    โ€ข No issues found! `

    good first issue hacktoberfest 
    opened by yeikel16 2
  •  Error: The method 'CustomThumbShape.paint' has fewer named arguments than the overridden method 'SliderComponentShape.paint'.

    Error: The method 'CustomThumbShape.paint' has fewer named arguments than the overridden method 'SliderComponentShape.paint'.

    When updating Flutter to the new version 1.20.1, these new parameters were added:

    • double textScaleFactor
    • Size sizeWithOverflow

    to the overridden paint () method of the SliderComponentShape class

    opened by yeikel16 0
  • [ImgBot] Optimize images

    [ImgBot] Optimize images

    Beep boop. Your images are optimized!

    Your image file size has been reduced by 30% ๐ŸŽ‰

    Details

    | File | Before | After | Percent reduction | |:--|:--|:--|:--| | /example/assets/after.png | 284.17kb | 168.66kb | 40.65% | | /example/assets/before.png | 302.01kb | 208.94kb | 30.82% | | /example/assets/before.jpg | 78.74kb | 71.18kb | 9.59% | | /example/assets/after.jpg | 58.41kb | 53.65kb | 8.16% | | /example/ios/Runner/Assets.xcassets/AppIcon.appiconset/[email protected] | 10.85kb | 10.68kb | 1.62% | | | | | | | Total : | 734.18kb | 513.11kb | 30.11% |


    ๐Ÿ“docs | :octocat: repo | ๐Ÿ™‹issues | ๐Ÿ…swag | ๐Ÿชmarketplace

    opened by imgbot[bot] 0
  • - #20 zoom and pan image

    - #20 zoom and pan image

    • switch when to zoom/slide by longpressing thumb
    • Note: thumb also gets scaled when scaling image (couldn't find a way to make it static)
    • there's a delay when switching to zoom/slide
    • changed compileSdkVersion and kotlin version, it was giving me kotlin problems for running on emulator
    • changed main.dart, because I found it better to test with only one before_after widget
    opened by yuran09 0
  • Null safety

    Null safety

    Porting to the null safety version see pull request.

    https://github.com/dariocavada/before_after

    if anyone would like to use the null safety version on github right now please add the following to the pubspec.yaml file.

    before_after: 
      git:
        url: https://github.com/dariocavada/before_after.git
    
    opened by dariocavada 2
  • Height and width simultaneously crop the image. Padding is not adjustable?

    Height and width simultaneously crop the image. Padding is not adjustable?

    Hello, congratulations on the excellent work!

    I am trying to adjust the height and width simultaneously, but the image is cropped. I took a look at the code and it seems to be on purpose, could it be changed?

    It would also be interesting for padding to be controlled externally, giving more freedom, does it make sense?

    opened by jessicamrbr 3
Owner
Sahil Kumar
Flutter Engineer at @GetStream
Sahil Kumar
A Flutter ListView that implicitly animates between the changes of two lists with support to reorder its items.

Implicitly Animated Reorderable List A Flutter ListView that implicitly calculates the changes between two lists using the MyersDiff algorithm and ani

null 246 Feb 22, 2022
A Flutter ListView that implicitly animates between the changes of two lists with support to reorder its items.

Implicitly Animated Reorderable List A Flutter ListView that implicitly calculates the changes between two lists using the MyersDiff algorithm and ani

null 246 Feb 22, 2022
Widgets for creating Hero-like animations between two widgets within the same screen.

flutter_sidekick Widgets for creating Hero-like animations between two widgets within the same screen. Features Hero-like animations. Allow you to spe

Romain Rastel 291 Oct 21, 2022
A draggable Flutter widget that makes implementing a SlidingUpPanel much easier!

sliding_up_panel A draggable Flutter widget that makes implementing a SlidingUpPanel much easier! Based on the Material Design bottom sheet component,

Akshath Jain 1.2k Jan 7, 2023
A Flutter package that two widgets switch with clipper.

Flutter Switch Clipper A Flutter package that two widgets switch with clipper. ไฝฟ็”จ ไฝฟ็”จFillClipperๅนถ่‡ชๅฎšไน‰็›ธๅ…ณๅ‚ๆ•ฐ View code SwitchCipper( initSelect: true,

FlutterCandies 23 Jan 3, 2023
A COVID-19 case tracker app which basically fetches latest data from an API and display it beautifully according to countries.

Stay Safe Coronavirus Tracker Flutter App This app basically tracks the total cases of infected persons (real-time data), in all countries with total

Hash Studios 5 Jun 20, 2022
A package to display blinking point to your mobile app in Flutter

Blinking point Easy way to create a blinking point for your Flutter project. Installation Add this to your package's pubspec.yaml file: dependencies:

Tam Nguyen 13 Apr 18, 2022
A Flutter library that makes animation easer. It allows for separation of animation setup from the User Interface.

animator This library is an animation library for Flutter that: makes animation as simple as the simplest widget in Flutter with the help of Animator

MELLATI Fatah 225 Dec 22, 2022
A custom Flutter value slider that makes a wave effect when dragged.

A Flutter slider that makes a wave effect when dragged. Does a little bounce when dropped. Demo Getting Started To use this plugin, add wave_slider as

Gordon Hayes 33 Dec 21, 2022
A simple widget for animating a set of images with full custom controls as an alternative to using a GIF file.

image_sequence_animator A simple widget for animating a set of images with full custom controls as an alternative to using a GIF file. If you have a G

AliYigitBireroglu 135 Jan 5, 2023
Wave-transition-app - A wave transition based mobile app with included images and other files

Flutter wave application A new Flutter project done with dart and it's a wave tr

Munem Sarker 2 May 18, 2022
A flutter package which will help you to generate pin code fields with beautiful design and animations

A flutter package which will help you to generate pin code fields with beautiful design and animations. Can be useful for OTP or pin code inputs ?? ??

Adar 550 Dec 23, 2022
filterList is a flutter package which provide utility to search/filter data from provided dynamic list.

filter_list Plugin FilterList is a flutter package which provide utility to search/filter on the basis of single/multiple selection from provided dyna

Sonu Sharma 156 Dec 24, 2022
A flutter package which contains a collection of some cool and beautiful effects; support android and ios

flutter effects A flutter package which contains a collection of some cool and beautiful effects; support android and ios . Screenshot type support ch

ๅคงๆตท่ฑš 462 Jan 3, 2023
This flutter package contains a widget called DecodingTextEffect which is having some cool Decode Effects for texts.

This flutter package contains a widget called DecodingTextEffect which is having some cool Decode Effects for texts. Installing 1. Depend on it Add th

Aadarsh Patel 13 Nov 25, 2020
๐Ÿ”” A flutter package to create cool and beautiful text animations. [Flutter Favorite Package]

Animated Text Kit A flutter package which contains a collection of some cool and awesome text animations. Recommended package for text animations in C

Ayush Agarwal 1.4k Jan 6, 2023
Dart package that converts number to words (English language)A Flutter/Dart package that converts number to words (English language)

flutter_number_to_words_english A Flutter/Dart package that converts number to words (English language) Flutter (Null Safety) Flutter (Channel stable,

Ke Nguyen 4 Dec 9, 2022
Base Flutter widget which triggers rebuild only of props changed

pure_widget Base widget which triggers rebuild only if props changed Installation pubspec.yaml: dependencies: pure_widget: ^1.0.0 Example import 'da

Andrei Lesnitsky 9 Dec 12, 2022
Sample Flutter Drawing App which allows the user to draw onto the canvas along with color picker and brush thickness slider.

DrawApp Sample Flutter Drawing App which allows the user to draw onto the canvas along with color picker and brush thickness slider. All code free to

Jake Gough 226 Nov 3, 2022