View Code? Open in Web Editor NEW

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

License: MIT License

Kotlin 0.82% Swift 7.62% Objective-C 0.25% Dart 83.94% HTML 7.37%

juxtapose's Introduction

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`