juxtapose 1.2.0 copy "juxtapose: ^1.2.0" to clipboard
juxtapose: ^1.2.0 copied to clipboard

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

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

95
likes
150
pub points
64%
popularity

Publisher

verified publisherlesliearkorful.com

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

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on juxtapose