Juxtapose

A flutter widget for comparing two stacked widgets by dragging a slider thumb to reveal either sides of the slider horizontally or vertically.

Inspired by Knightlab's JuxtaposeJS

Installation

Add the Juxtapose package to pubspec.yaml

dependencies:
  juxtapose: ^1.0.2

Import the package in your dart file

import 'package:juxtapose/juxtapose.dart';

Usage

Juxtapose(
  backgroundColor: Color(0xFF012747),
  foregroundWidget: Image.asset("flutter-logo.png"),
  backgroundWidget: Image.asset("flutter-logo-stroke.png"),
),
Horizontal Vertical

By default the inner widgets expand to fill up space. Wrap in Center before sizing

Juxtapose(
  backgroundColor: Color(0xFF012747),
  foregroundWidget: Center(
    child: Image.asset("flutter-logo.png", width: 400),
  ),
  backgroundWidget: Center(
    child: Image.asset("flutter-logo-stroke.png", width: 400),
  ),
),

Sized Children output

API Reference

Property Default Description Type
foregroundWidget required Widget displayed in front of the backgroundWidget Widget
backgroundWidget required Widget displayed behind the foregroundWidget Widget
height optional Height of the Juxtapose box double
width optional Width of the Juxtapose box. double
direction Axis.horizontal Sliding direction for juxtaposing between the two widgets Axis
backgroundColor Colors.transparent Background color of the Juxtapose box Color
dividerColor Colors.white Color of the horizontal/vertical divider Color
dividerThickness 3.0 Line thickness of the horizontal/vertical divider double
thumbColor Colors.white Color of the thumb that is dragged to juxtapose Color
thumbSize Size(12, 100) Size of the thumb widget. Width is the shortest side. Height is the longest side. Size
thumbBorderRadius BorderRadius.circular(4) Sets the border radius of the thumb widget BorderRadius
showArrows true Indicates whether the arrows on the sides of the thumb are shown or not bool

Found an issue or have a suggestion?

Create an issue

Contact

Reach me on Twitter @lesliearkorful

Libraries

juxtapose
A widget for comparing two stacked widgets by dragging a slider thumb to reveal either sides of the slider.