juxtapose

Description:

juxtapose

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
copied to clipboard
Import the package in your dart file
import 'package:juxtapose/juxtapose.dart';
copied to clipboard
Usage #
Juxtapose(
backgroundColor: Color(0xFF012747),
foregroundWidget: Image.asset("flutter-logo.png"),
backgroundWidget: Image.asset("flutter-logo-stroke.png"),
),
copied to clipboard



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),
),
),
copied to clipboard
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