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

Related tags

Widgets widgets flutter flutter-widget flutter-package stacked-widgets slider-thumb
Overview

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

You might also like...

Responsive Widgets Prefix allows you to add the "Responsive" prefix to any widget that needs scaling or font size increases

Responsive Widgets Prefix allows you to add the

Responsive Widgets Prefix allows you to add the Responsive prefix to any widget that needs scaling or font size increases (for varying device screen sizes).

Apr 18, 2022

A simple Flutter widget to add in the widget tree when you want to show nothing, with minimal impact on performance.

nil A simple widget to add in the widget tree when you want to show nothing, with minimal impact on performance. Why? Sometimes, according to a condit

Dec 22, 2022

A flutter carousel widget, support infinite scroll, and custom child widget.

A flutter carousel widget, support infinite scroll, and custom child widget.

carousel_slider A carousel slider widget. Features Infinite scroll Custom child widgets Auto play Supported platforms Flutter Android Flutter iOS Flut

Nov 25, 2021

A Flutter Widget to make interactive timeline widget.

A Flutter Widget to make interactive timeline widget.

Bubble Timeline Package A Flutter Widget to make interactive timeline widget. This widget can be used to make Event Timelines, or Timelines for certai

Sep 22, 2022

📸 Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget.

📸 Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget.

📸 Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget. Photo View is largely used to show interacive images and other stuff such as SVG.

Jan 7, 2023

A widget lib that the widget in this lib can react to flutter ScrollController's offset

A widget lib that the widget in this lib can react to flutter ScrollController's offset

Language: English | 中文简体 linked_scroll_widgets A lib full of widgets that can react to the scrollController's offset change,to custom your UI effect.

Oct 16, 2022

Full customable rolling switch widget for flutter apps based on Pedro Massango's 'crazy-switch' widget

Full customable rolling switch widget for flutter apps based on Pedro Massango's 'crazy-switch' widget

lite_rolling_switch Full customable rolling switch widget for flutter apps based on Pedro Massango's 'crazy-switch' widget https://github.com/pedromas

Dec 1, 2022

Progress Dialog widget for flutter projects with ability to customize loading widget, background color and background blur.

Progress Dialog widget for flutter projects with ability to customize loading widget, background color and background blur.

DISCONTINUED Checkout ArsDialog ars_progress_dialog Customizable progress dialog for Flutter applications with smooth animation for background dim col

Apr 15, 2022

A Flutter widget that will give a Glitch Animation Effect to it's child widget.

A Flutter widget that will give a Glitch Animation Effect to it's child widget.

GlitchEffect A Flutter widget that will give a Glitch Animation Effect to it's child widget. Installation Add the latest version of package to your pu

Nov 25, 2022
Releases(v1.2.0)
Owner
Leslie Arkorful
Flutter Mobile Engineer.
Leslie Arkorful
GitHub https://pub.dev/packages/juxtapose
A Flutter GridView whose items the user can interactively reorder by dragging

A GridView whose items the user can interactively reorder by dragging. Compared to the given ReorderableListView, it is possible to reorder different

null 57 Dec 19, 2022
Flutter package: Assorted layout widgets that boldly go where no native Flutter widgets have gone before.

assorted_layout_widgets I will slowly but surely add interesting widgets, classes and methods to this package. Despite the package name, they are not

Marcelo Glasberg 122 Dec 22, 2022
Flutter-useful-widgets - Flutter Useful Widgets

useful_widgets This package makes it easy to build apps by providing a list of simple and useful widgets. import 'package:useful_widgets/useful_widget

Ricardo Crescenti 6 Jun 20, 2022
Custom widgets and utils using Flutter framework widgets and Dart language

reuse_widgets_and_utils The custom widgets and utils using Flutter framework widgets and Dart programming language. Getting Started This project is a

null 1 Oct 29, 2021
Widgets beginner - Widgets beginner with flutter

Widgets beginner - Widgets beginner with flutter

Tukhtamurodov Sardorbek 2 Feb 6, 2022
This flutter package provides an easy implementation of a Slider Button to cancel current transaction or screen

This flutter package provides an easy implementation of a Slider Button to cancel current transaction or screen

null 222 Nov 8, 2022
A custom Slider which accepts a list of ordered values.

MultiSlider A custom Slider which accepts a list of ordered values. It's meant to be as simple as the original Slider! UI with it Usages Continuous sl

Sthefano Schiavon 7 Dec 3, 2022
React hooks for Flutter. Hooks are a new kind of object that manages a Widget life-cycles. They are used to increase code sharing between widgets and as a complete replacement for StatefulWidget.

English | Português Flutter Hooks A Flutter implementation of React hooks: https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889 Ho

Remi Rousselet 2.6k Dec 29, 2022
An extensive snap tool/widget for Flutter that allows very flexible snap management and snapping between your widgets.

An extensive snap tool/widget for Flutter that allows very flexible snap management and snapping between your widgets.

AliYigitBireroglu 101 Dec 16, 2022
Flutter ScrollView Observer - a library of widget that can be used to listen for child widgets those are being displayed in the scroll view

Flutter ScrollView Observer - a library of widget that can be used to listen for child widgets those are being displayed in the scroll view

林洵锋 67 Jan 6, 2023