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

How to use?

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<MyApp> {
  @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.

Libraries

before_after_image_slider

Dart

dart:ui
Built-in types and core primitives for a Flutter application. [...]

Core

dart:async
Support for asynchronous programming, with classes such as Future and Stream. [...]
dart:collection
Classes and utilities that supplement the collection support in dart:core. [...]
dart:convert
Encoders and decoders for converting between different data representations, including JSON and UTF-8. [...]
dart:core
Built-in types, collections, and other core functionality for every Dart program. [...]
dart:developer
Interact with developer tools such as the debugger and inspector. [...]
dart:math
Mathematical constants and functions, plus a random number generator. [...]
dart:typed_data
Lists that efficiently handle fixed sized data (for example, unsigned 8 byte integers) and SIMD numeric types. [...]

VM

dart:io
File, socket, HTTP, and other I/O support for non-web applications. [...]
dart:isolate
Concurrent programming using isolates: independent workers that are similar to threads but don't share memory, communicating only via messages. [...]