Need help with liquid_swipe_flutter?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

iamSahdeep
718 Stars 108 Forks Apache License 2.0 148 Commits 0 Opened issues

Description

A flutter based liquid swipe

Services available

!
?

Need anything else?

Contributors list

# 61,450
Dart
Kotlin
Shell
Flutter
104 commits
# 278,727
Dart
Shell
Flutter
flutter...
3 commits
# 315,728
Dart
Kotlin
Shell
Flutter
2 commits
# 379,983
Dart
Kotlin
Shell
Flutter
1 commit
# 378,718
Dart
Kotlin
Shell
Flutter
1 commit
# 209,075
Firebas...
Flutter
Dart
Kotlin
1 commit
# 270,686
HTML
react-c...
Dart
Flutter
1 commit


Liquid Swipe

Pub Awesome Flutter

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

Table of contents

Getting Started

  • Add this to your pubspec.yaml ``` dependencies: liquid_swipe: ^2.0.2
* 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 UI through it.

    dart
    final pages = [
    Container(...),
    Container(...),
    Container(...),
    ];
    
  • Now just pass these pages to LiquidSwipe widget.

    dart
    @override
    Widget build(BuildContext context) {
    return new MaterialApp(
      home: Builder(
          builder: (context) =>
              LiquidSwipe(
                  pages: pages
              )),
    );
    }
    
  • Check out the complete Example

Migration

Some things to keep in mind while updating to v2.0.0 from any version. * v2.0.0 is migrated to null safety. See migration * Attribute

enableSlideIcon
is removed from LiquidSwipe. You can simply pass
null
to
slideIconWidget
to enable and disable it. * Attribute
positionSlideIcon
is now ranged from 0.0 to 1.0. * Next Reveal is there by default. If you want to disable it you might want to make changes in your fork. Create an issue I will help.

That's it ;)

Sample APK

Please download apk from Releases or Assets folder

Documentation

LiquidSwipe

Please Refer to API documentation for more details.

| Property | Type | Description | Default Value | |-|:-:|-|:-:| | pages |

List
| Set Pages/Views/Containers. See complete example for usage. | @required value | | fullTransitionValue |
double
| Handle swipe sensitivity through it. Lower the value faster the animation | 400.0 | | initialPage |
int
| Set initial page value, wrong position will throw exception. | 0 | | slideIconWidget |
Widget
| Icon/Widget you want to display for swipe indication. Remember the curve will be created according to it. | null | | positionSlideIcon |
double
| Icon position on vertical axis. Must satisfy this condition
0.0 <= value <= 1.0
| 0.8 | | enableLoop |
bool
| Whether you want to loop through all those
pages
. | true | | liquidController |
LiquidController
| Controller to handle some runtime changes. Refer | null | | waveType |
WaveType enum
| Type of clipper you want to use. | WaveType.liquidReveal | | onPageChangeCallback |
Callback
| Triggered whenever page changes. | null | | currentUpdateTypeCallback |
Callback
| Triggered whenever UpdateType changes. Refer | null | | slidePercentCallback |
Callback
| Triggered on Swipe animation. Use carefully as its quite frequent on swipe. | null | | ignoreUserGestureWhileAnimating |
bool
| If you want to block gestures while swipe is still animating. See #5 | false | | disableUserGesture |
bool
| Disable user gesture, always. | false | | enableSideReveal |
bool
| Enable/Disable side reveal | false |

LiquidController

A Controller class with some utility fields and methods.

Simple Usage :

Firstly make an Object of LiquidController and initialize it in initState() ```dart LiquidController liquidController;

@override void initState() { super.initState(); liquidController = LiquidController(); } ```

Now simply add it to LiquidSwipe's Constructor

dart
   LiquidSwipe(
        pages: pages,
        LiquidController: liquidController,
    ),

Only Rules/Limitation to its Usage is, you can't use any method in Liquid Controller before build method is being called in which LiquidSwipe is initialized. So we have to use them after LiquidSwipe is Built

  • Properties
    • currentPage
      - Getter to get current Page. Default value is 0.
    • isUserGestureDisabled
      - If somehow you want to check if gestures are disabled or not. Default value is false;
  • Methods
    • animateToPage({required int page, int duration = 600})
      Animate to mentioned page within given Duration Remember the duration here is the total duration in which it will animate though all pages not the single page.
    • jumpToPage({required int page})
      Jump Directly to mentioned Page index but without Animation.
    • shouldDisableGestures({required bool disable})
      Use this method to disable gestures during runtime, like on certain pages using OnPageChangeCallback.

Please Refer to API documentation for more details.

Credits

Disclaimer : This project is not anyhow connected to Cuberto, but have apprised them through this issue.

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 :coffee: to keep me recharged :metal: + PayPal

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

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!

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.