My First Flutter Package

I am excited to announce my first #Flutter package!🎉

Meet Juxtapose, a 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


Add the Juxtapose package to pubspec.yaml

  juxtapose: ^1.0.2

Import the package in your dart file

import 'package:juxtapose/juxtapose.dart';


  backgroundColor: Color(0xFF012747),
  foregroundWidget: Image.asset("flutter-logo.png"),
  backgroundWidget: Image.asset("flutter-logo-stroke.png"),

By default the inner widgets expand to fill up space. Wrap in Center before sizing

  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

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


Reach me on Twitter @lesliearkorful

Made with 💙 from 🇬🇭
© 2023 Leslie Arkorful