liquid_swipe 1.5.0
liquid_swipe: ^1.5.0
liquid_swipe: ^2.0.0-dev.1

Flutter Android iOS web

A Flutter plugin to implement liquid Swipe effect to provided containers.


Liquid Swipe

Pub Awesome Flutter

This repository contains the Liquid Swipe source code. Liquid swipe is the revealing clipper to bring off amazing liquid like swipe to stacked Container and inspired by Cuberto's liquid swipe and IntroViews.

Sample APK #

Download sample apk as shown in example from releases.

Get it from Github Releases

Getting Started #

  • Add this to your pubspec.yaml

    dependencies:
    liquid_swipe: ^1.5.0
    
    
  • Get the package from Pub:

    flutter packages get
    
  • Import it in your file

    import 'package:liquid_swipe/liquid_swipe.dart';
    

Usage #

  • Liquid Swipe just requires the list of Widgets like Container. Just to provide flexibity to the developer to design its own view through it.
 final pages = [
    Container(...),
    Container(...),
    Container(...),
  ];
  • Now just pass these pages to LiquidSwipe widget.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: Builder(
          builder: (context) =>
              LiquidSwipe(
                  pages: pages
              )),
    );
  }

Attributes #

AttributeDatatypeDescriptionDefault ValueComments
pagesList<Widget>Set the Pages/ views/ ContainersNullA Page can contain anything, look for an example
fullTransitionValuedoubleSets the scroll distance or sensitivity for a complete swipe.400.0This transition value can be used to increase or decrease the sensitivity of the swipe. 100.0 would make swipe really fast with even a bit of drag
initialPageintSet the initial Page0Should not be >= no.of pages or smaller than 0
enableSlideIconboolUsed to enable Slide icon to the right for where the wave would originatefalseGives a ios style arrow to right side of the screen. Might include modification to it soon.
slideIconWidgetWidgetCreate your own icon and add hereIcon(Icons.arrow_back_ios)You can use icons from Icons package. Thanks to PR #10
positionSlideIcondoublePosition your icon in y-axis at right side of the screen0.54Range from -1 to 1, -1 represents extreme top and 1 represent extreme bottom. Soon add x-axis position, if required!
enableLoopboolEnable or disable pages recurrence.trueIf you dont want to make pages to be in the loop, use this attribute.
waveTypeWaveTypeSelect the type of reveal you want.WaveType.liquidRevealYou can use circularReveal, more coming soon. Import Helpers.dart file if Autoimport doesn't work.
onPageChangeCallbackCallBackPass your method as a callback, it will return a pageNo.Nonesee Example
currentUpdateTypeCallbackCallBacksame Callback but returns an UpdateTypeNonesee Example
slidePercentCallbackCallBackreturns SlidePercent both horizontal & verticalNonesee Example
ignoreUserGestureWhileAnimatingboolOptional Value, if you want to block gestures while swipe is still animatingfalsePlease look #5 for reason of implementation
disableUserGestureboolOptional Value, if you want to block gestures alwaysfalseYou can even Disable or Enable Gestures using LiquidController

Additional #

From v1.5.0-dev.1 we can use LiquidController class to create its instance and use it from controlling pages programmatically. Features/Methods added but will not be limited to :

  • jumpToPage({int page}) : It will jump to the mentioned page but without animation or swipe.
  • animateToPage({int page, int duration = 600}) : It will animate to the mentioned page in given time with animation of swipes.
  • currentPage : This getter will return the current Page which is being displayed.

Please look at the Example in this project for detailed usage.

Credits #

Author & support #

This project is created by Sahdeep Singh but with lots of support and help. See credits.

If you appreciate my work, consider buying me a cup of ☕ to keep me recharged 🤘

Or you can also endorse me on LinkedIn to keep me motivated.

I love my work and I'm available for freelance work. Contact me on my email: sahdeepsingh98@gmail.com

Contributors ✨ #

Thanks goes to these wonderful people (emoji key):


Sahdeep Singh

💻

Yasser Omar Jammeli

💻 🐛

Mourad Brahim

💻

heshesh2010

🐛 📓

Federico Tarascio

💻

This project follows the all-contributors specification. Contributions of any kind welcome!

234
likes
95
pub points
96%
popularity

Publisher

sahdeepsingh.com

A Flutter plugin to implement liquid Swipe effect to provided containers.

Repository (GitHub)
View/report issues

Documentation

API reference

License

Apache 2.0 (LICENSE)

Dependencies

flutter, provider

More

Packages that depend on liquid_swipe