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"),
),
HorizontalVertical

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

PropertyDefaultDescriptionType
foregroundWidgetrequiredWidget displayed in front of the backgroundWidgetWidget
backgroundWidgetrequiredWidget displayed behind the foregroundWidgetWidget
heightoptionalHeight of the Juxtapose boxdouble
widthoptionalWidth of the Juxtapose box.double
directionAxis.horizontalSliding direction for juxtaposing between the two widgetsAxis
backgroundColorColors.transparentBackground color of the Juxtapose boxColor
dividerColorColors.whiteColor of the horizontal/vertical dividerColor
dividerThickness3.0Line thickness of the horizontal/vertical dividerdouble
thumbColorColors.whiteColor of the thumb that is dragged to juxtaposeColor
thumbSizeSize(12, 100)Size of the thumb widget. Width is the shortest side. Height is the longest side.Size
thumbBorderRadiusBorderRadius.circular(4)Sets the border radius of the thumb widgetBorderRadius
showArrowstrueIndicates whether the arrows on the sides of the thumb are shown or notbool

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. [...]