Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lesliearkorful/juxtapose
A flutter widget for comparing two stacked widgets by dragging a slider thumb to reveal either sides of the slider horizontally or vertically.
https://github.com/lesliearkorful/juxtapose
flutter flutter-package flutter-widget slider-thumb stacked-widgets widgets
Last synced: about 12 hours ago
JSON representation
A flutter widget for comparing two stacked widgets by dragging a slider thumb to reveal either sides of the slider horizontally or vertically.
- Host: GitHub
- URL: https://github.com/lesliearkorful/juxtapose
- Owner: lesliearkorful
- License: mit
- Created: 2020-07-29T23:58:55.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-04-04T18:10:48.000Z (almost 3 years ago)
- Last Synced: 2023-08-20T22:29:00.953Z (over 1 year ago)
- Topics: flutter, flutter-package, flutter-widget, slider-thumb, stacked-widgets, widgets
- Language: Dart
- Homepage: https://pub.dev/packages/juxtapose
- Size: 990 KB
- Stars: 77
- Watchers: 0
- Forks: 4
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
```yaml
dependencies:
juxtapose: ^1.0.2
```
Import the package in your dart file
```dart
import 'package:juxtapose/juxtapose.dart';
```
## Usage
```dart
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
```dart
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