https://github.com/salihgueler/flutter_before_after_image

A Slider view for Before-After use-case for Flutter.
https://github.com/salihgueler/flutter_before_after_image

flutter flutter-plugin flutter-plugins library

Last synced: 11 days ago
JSON representation

A Slider view for Before-After use-case for Flutter.

• Host: GitHub
• URL: https://github.com/salihgueler/flutter_before_after_image
• Owner: salihgueler
• License: apache-2.0
• Created: 2018-10-22T06:09:28.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2020-07-10T16:54:01.000Z (over 4 years ago)
• Last Synced: 2024-10-14T09:42:28.529Z (25 days ago)
• Topics: flutter, flutter-plugin, flutter-plugins, library
• Language: Dart
• Size: 4.17 MB
• Stars: 49
• Watchers: 0
• Forks: 5
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
#  Before After Image

**BeforeAfterImage** is a Flutter plugin to create a Before-After view with stacked two images and give user experience about before and after view.

![Alt Text](https://github.com/salihgueler/flutter_before_after_image/blob/master/resource/preview.gif)

## How to use?

You can import it as it's shown below.

```

dependencies:

  before_after_image_slider: ^0.0.2

```

Then update your packages and import it in your project

```

$ flutter packages get

```

You can simply use it by adding two images to **beforeImage** and **afterImage** values.

**dividerThickness** and **dividerColor** can be modified too. These two values have default values of **5.0** for dividerThickness and **Colors.black12** for dividerColor.

```

import 'package:flutter/material.dart';

import 'package:before_after_image_slider/before_after_image_slider.dart';

void main() => runApp(new MyApp());

class MyApp extends StatefulWidget {

  @override

  _MyAppState createState() => new _MyAppState();

}

class _MyAppState extends State {

  @override

  Widget build(BuildContext context) {

    return new MaterialApp(

        home: new Scaffold(

            appBar: new AppBar(

              title: const Text('Plugin example app'),

  ),

  body: Container(

              child: BeforeAfterImage(

                  beforeImage: Image.network(

                      'https://cdn.images.express.co.uk/img/dynamic/galleries/x701/59626.jpg'),

  afterImage: Image.network(

                      'https://cdn.images.express.co.uk/img/dynamic/galleries/x701/59640.jpg')),

  )));

  }

}

```

## TODOs

- Add Landscape mode support.

- Add icon for slider.

- Tests

## License

#### salihgueler/flutter_before_after_image repository is licensed under the Apache License 2.0

A 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.

For more information about license, check  `LICENSE`  file.