Code Monkey home page Code Monkey logo

liquid_swipe_flutter's Introduction


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

Attribute Datatype Description Default Value Comments
pages List<Widget> Set the Pages/ views/ Containers Null A Page can contain anything, look for an example
fullTransitionValue double Sets the scroll distance or sensitivity for a complete swipe. 400.0 This 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
initialPage int Set the initial Page 0 Should not be >= no.of pages or smaller than 0
enableSlideIcon bool Used to enable Slide icon to the right for where the wave would originate false Gives a ios style arrow to right side of the screen. Might include modification to it soon.
slideIconWidget Widget Create your own icon and add here Icon(Icons.arrow_back_ios) You can use icons from Icons package. Thanks to PR #10
positionSlideIcon double Position your icon in y-axis at right side of the screen 0.54 Range from -1 to 1, -1 represents extreme top and 1 represent extreme bottom. Soon add x-axis position, if required!
enableLoop bool Enable or disable pages recurrence. true If you dont want to make pages to be in the loop, use this attribute.
waveType WaveType Select the type of reveal you want. WaveType.liquidReveal You can use circularReveal, more coming soon. Import Helpers.dart file if Autoimport doesn't work.
onPageChangeCallback CallBack Pass your method as a callback, it will return a pageNo. None see Example
currentUpdateTypeCallback CallBack same Callback but returns an UpdateType None see Example
slidePercentCallback CallBack returns SlidePercent both horizontal & vertical None see Example
ignoreUserGestureWhileAnimating bool Optional Value, if you want to block gestures while swipe is still animating false Please look #5 for reason of implementation
disableUserGesture bool Optional Value, if you want to block gestures always false You 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: [email protected]

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!

liquid_swipe_flutter's People

Contributors

iamsahdeep avatar allcontributors[bot] avatar jeaanlucas avatar byneapp avatar jjclane avatar mourad-brahim avatar edtheguy00 avatar ricotarascio avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.