A flutter based liquid swipe

Overview


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.1
    
    
  • 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.
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
             )),
   );
 }

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<Widget> 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

LiquidController

A Controller class with some utility fields and methods.

Simple Usage :

Firstly make an Object of LiquidController and initialize it in initState()

   LiquidController liquidController;

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

Now simply add it to LiquidSwipe's Constructor

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

Only Rules/Limitation to its Usage is For now 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 ☕ to keep me recharged 🤘

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!

Comments
  • Fast swiping

    Fast swiping

    First of all awesome widget. Thanks for it. It goes really smooth but sometimes, I need to go back on my app and start over. This is quite usual and the next swipe will be faster (before the animation for actual page finishes).

    When I go a bit faster I face some "flash" with next page and automatically it opens ok.

    I'm trying exactly the example you posted here: https://github.com/iamSahdeep/liquid_swipe_flutter/tree/master/example

    opened by erperejildo 15
  • inside liquid_swipe scrolling widgets are not working

    inside liquid_swipe scrolling widgets are not working

    this is my widget that I fill out the list of pages animation_card.txt here in this part of the code I inserted a scrollable element. Flexible( child: SingleChildScrollView( child: Text( describe, style: TextStyle( fontSize: 16, ), textAlign: TextAlign.justify, overflow: TextOverflow.visible, ), ), ) information is cropped, and does not scroll ((((

    opened by Okladnoj 13
  • `liquid_swipe` does not specify a Swift version

    `liquid_swipe` does not specify a Swift version

    I receive this one:


    liquid_swipe does not specify a Swift version and none of the targets (Runner) integrating it have the SWIFT_VERSION attribute set. Please contact the author or set the SWIFT_VERSION attribute in at least one of the targets that integrate this pod.


    flutter doctor is fine and i run flutter clean.

    I think it has something to do with removing and readding the plugin, because it did work once. However, I'm new to this and am not sure how to go about that.

    opened by shredding 12
  • CheckboxListTile Gesture isn't working inside the liquid swipe widget

    CheckboxListTile Gesture isn't working inside the liquid swipe widget

    I have a liquid swipe widget ( not builder ) that gets it's pages from List<Widgets> pages I populate it in the initStatemethod, everything is displaying correctly, also the CheckboxListTile is displayed right, but when I go to click on the CheckboxListTile notihng happans, it's like the gesture of it gets disabled once it's in the liquid swipe. I check my self and the same screen/widget that in the liquid swipe outside of it and it works perfectly, but when it's inside he liquid swipe, it wont work. This is my liquid Swipe widget:

    LiquidSwipe(
                    pages: pages,
                    positionSlideIcon: 0.8,
                    slideIconWidget: SizedBox(
                      height: 25,
                      width: 50,
                      child: Container(
                        decoration: BoxDecoration(
                            border: Border.all(color: Colors.black)
                        ),
                      ),
                    ),
                    onPageChangeCallback: pageChangeCallback,
                    waveType: WaveType.liquidReveal,
                    liquidController: _liquidController,
                    ignoreUserGestureWhileAnimating: false,
                    disableUserGesture: false,
                  ),
    
    opened by LidorPrototype 10
  • Flutter 3.0.0 is detecting issue with the library

    Flutter 3.0.0 is detecting issue with the library

    ../../../Documents/flutter/.pub-cache/hosted/pub.dartlang.org/liquid_swipe-2.1.1/lib/PageHelpers/page_dragger.dart:121:20: Warning: Operand of null-aware operation '!' has type 'WidgetsBinding' which excludes null.

    • 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('../../../Documents/flutter/packages/flutter/lib/src/widgets/binding.dart'). WidgetsBinding.instance!.addPostFrameCallback((_) {
    opened by RoyalCoder88 8
  • Slide is 0.5x wrong when running in landscape mode.

    Slide is 0.5x wrong when running in landscape mode.

    Hi! I got an issue with the liquidController. When I use it in landscape mode the center of the swipe animation is on the point between where I got my finger and the top of the screen.

    Example video: https://youtu.be/KW8fPtMRaV4

    The same issue is present when we start in landscape mode without any rotation in between.

    class Quiz extends StatefulWidget {
      static const routeName = "/Quiz";
      static const rotation = ScreenOrientation.landscapeOnly;
    
    
      @override
      _QuizState createState() => _QuizState();
    }
    
    class _QuizState extends State<Quiz> {
    
      LiquidController liquidController;
      UpdateType updateType;
    
      List<Widget> questions = [
        Question(text: "1",),
        Question(text: "2",),
        Question(text: "3",)
      ];
    
      @override
      void initState() {
        liquidController = LiquidController();
        super.initState();
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            body: LiquidSwipe(
                    pages: questions,
                    onPageChangeCallback: (int page) => {print("Page: " + page.toString())},
                    waveType: WaveType.liquidReveal,
                    liquidController: liquidController,
                    ignoreUserGestureWhileAnimating: true,
                    enableSlideIcon: true,
                    fullTransitionValue: 800,
                    positionSlideIcon: 0.0,
                )
        );
      }
    }
    
    
    opened by N0K0 8
  • add arrow icon with next background color

    add arrow icon with next background color

    Screen Shot 2020-04-08 at 1 40 28 AM

    how to add this wive icon to be as same as screenshot shows not that when transition finished there will be some right pixels that show the right screen color with arrow icon

    opened by heshesh2010 8
  • Automaticly change page

    Automaticly change page

    Hey,

    Thank you for this package, the animation is beautiful but it is only available from a drag gesture.

    Could you implement programitcly changing the page ? It would serve so much more cases.

    opened by NicolasCharpentier 8
  • Can't use currentPage in build function since provider is late

    Can't use currentPage in build function since provider is late

    We should be able to use currentPage in build function to act differently depending on the current page. However, since provider is late, this causes an exception in the first build. Here is the exception when you try to use currentPage in build()

    ======== Exception caught by widgets library =======================================================
    The following LateError was thrown building LandingPage(dirty, dependencies: [MediaQuery], state: _LandingPageState#31358):
    LateInitializationError: Field 'provider' has not been initialized.
    
    The relevant error-causing widget was: 
      LandingPage file:///xxx/lib/main.dart:47:13
    When the exception was thrown, this was the stack: 
    #0      LiquidController.provider (package:liquid_swipe/PageHelpers/LiquidController.dart)
    #1      _LandingPageState.build (package:xxx/view/landing/landing_view.dart:281:52)
    #2      StatefulElement.build (package:flutter/src/widgets/framework.dart:4612:27)
    #3      ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4495:15)
    #4      StatefulElement.performRebuild (package:flutter/src/widgets/framework.dart:4667:11)
    ...
    
    opened by gazialankus 7
  • Liquid Swipe causes 2 rebuilds

    Liquid Swipe causes 2 rebuilds

    Hello, i'm trying to implement a timer within this awesome plugin, but the problem is that when the timer finishes, liquid swipe makes the timer being called twice, but without liquid swipe, when the timer finishes, is not being called twice.

    With the following code the 'Finished.' line prints two times.

    Example code:

    page1.dart

     Widget build(BuildContext context) {
        return SafeArea(
          child: Scaffold(
            backgroundColor: Colors.white,
            body: LiquidSwipe(
              pages: [
                Container(
                  height: double.infinity,
                  width: double.infinity,
                  color: Colors.blue,
                  child: Text('First page'),
                ),
                Container(
                  height: double.infinity,
                  width: double.infinity,
                  color: Colors.white,
                  child: CustomTimer(
                    from: Duration(seconds: 5),
                    to: Duration(seconds: 0),
                    onFinishAction: CustomTimerAction.auto_start,
                    onBuildAction: CustomTimerAction.auto_start,
                    onFinish: () {
                      print('Finished.');
                    },
                      builder: (CustomTimerRemainingTime remaining) {
                        return Column(
                          children: [
                            Container(
                              child: Text(
                                '${remaining.hours}:${remaining.minutes}:${remaining.seconds}',
                                style: TextStyle(
                                  color: Colors.black,
                                  fontSize: 30,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                            )
                          ],
                        );
                      },
                  ),
                )
              ],
            ),
          ),
        );
      }
    }
    

    Any workaround?

    opened by luis-cruzt 7
  • Migrate to null safety

    Migrate to null safety

    https://dart.dev/null-safety/migration-guide

    Null safety comes with many advantages (which has been talked about in today's Flutter livestream), and it will probably be the default in the future.

    It would be appreciated if this package can be migrated to null safety.

    opened by gabrc52 7
  • Does not work well, when pages are scrollable (and are scrolled to a position other than top)

    Does not work well, when pages are scrollable (and are scrolled to a position other than top)

    Liquid Swipe does not seem to work well, wenn a page is scrollable: The crossfade always shows the page from the very top (not scolled), however the actual page is already scrolled to the bottom. However, after completing the swipe, the view jumps to the correct scrolled position.

    Waiting for response 
    opened by Terranic 5
  • Flickering when swipe happens with lottie/gif animations on slides

    Flickering when swipe happens with lottie/gif animations on slides

    I have created certain slides with this package with each slide having a lottie animation. When I slide from ith slide to i+1th a background flicker happens.

    Please help us out. Thanks

    help wanted 
    opened by raunak-many-ac 15
Releases(v2.1.0)
Owner
Sahdeep Singh
Blah! Blah! Developer
Sahdeep Singh
A sample for having PageView transformation effects in Flutter.

What is it? The end result looks a little something like this: Sample project for creating nice looking PageView parallax effects in Flutter. Read the

Iiro Krankka 811 Dec 22, 2022
A package provides an easy way to add shimmer effect in Flutter project

Shimmer A package provides an easy way to add shimmer effect in Flutter project How to use import 'package:shimmer/shimmer.dart'; SizedBox( width:

HungHD 1.6k Jan 8, 2023
photofilters library for flutter

Photo Filters package for flutter A flutter package for iOS and Android for applying filter to an image. A set of preset filters are also available. Y

Sharafudheen KK 336 Dec 23, 2022
Liquid swipe with Drawer - Liquid swipe application with full customizable drawer with govt logo

Liquid swipe with Drawer Liquid swipe application with full customizable drawer

Munem Sarker 1 Jan 19, 2022
Card Swipe Animation Ruchika GuptaCard Swipe Animation [404⭐] - Swipe cards template by Ruchika Gupta.

FlutterCardSwipe Card Swipe Animation Creating the swipe view as used in the Tinder. Swipe right is considered accepted and swipe left is rejected.It

Ruchika Gupta 517 Dec 27, 2022
A flutter based liquid swipe

This repository contains the Liquid Swipe Flutter source code. Liquid swipe is the revealing clipper to bring off amazing liquid like swipe to stacked

Sahdeep Singh 987 Dec 28, 2022
Splash Screen with liquid swipe effect!

liquid_swipe_intro A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you start

Flutter Boy 21 Dec 30, 2022
FlutterCardSwipe Card Swipe Animation Creating the swipe view as used in the Tinder.

FlutterCardSwipe Card Swipe Animation Creating the swipe view as used in the Tinder. Swipe right is considered accepted and swipe left is rejected.It

Ruchika Gupta 517 Dec 27, 2022
A Side Menu plugin for flutter and compatible with liquid ui for flutter

Liquid Shrink Side Menu A Side Menu plugin for flutter and compatible with liquid ui Side Menu Types There are 8 configuration of Liquid shrink side m

Raj Singh 18 Nov 24, 2022
Flutter Animation liquid 🐱‍👤 Made with algeria By DZ-TM071

Flutter Animated Loading liquid progress ?? ?? ?? screen screen # Usage First you need to add liquid_progress_indicator 0.4.0 Or + in the dependency a

Hmida 8 Jan 10, 2022
A liquid progress indicator for Flutter

liquid_progress_indicator Liquid progress indicator for Flutter. Features Liquid circular progress indicator. Liquid linear progress indicator. Liquid

null 301 Dec 15, 2022
It's a universal app template to have a great animated splash screen and liquid slider. Just change the animation if you want (rive) and change the images or colours according to your app.

liquid A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this i

Zikyan Rasheed 28 Oct 7, 2022
An Interactive tool for visualization of data reported by the Amiga Tractor onto the panoramic cluster display of Liquid Galaxy.

Amiga Crop Visualizer About Amiga Crop Visualizer The App takes Data from the Amiga Drone and shows it in colored KML onto the Liquid Galaxy. For demo

Yash Raj Bharti 3 Oct 16, 2022
Tinder like cards swipe effect with Flutter.

Tinder cards Hi! After showcasing Focus for Reddit, the app I am working on, people asked me how did I do the tinder like cards swipe (posts media are

Ivascu Adrian 733 Jan 7, 2023
Flutter Card Swipe Animation

FlutterCardSwipe Card Swipe Animation Creating the swipe view as used in the Tinder. Swipe right is considered accepted and swipe left is rejected.It

Ruchika Gupta 521 Jan 8, 2023
A flutter UI package provides a cell widget that has leading and trailing swipe action menu.

Language: English |中文įŽ€äŊ“ flutter_swipe_action_cell A package that can give you a cell that can be swiped ,effect is like iOS native If you like this pa

WenJingRui 261 Jan 7, 2023
Beautiful flutter analog clocks. Swipe to change the clock design

analog_clock_for_flutter Beautiful flutter analog clocks. Swipe to change the clock design Screenshots Usage To use plugin, just import package import

Ouzani Abd Raouf 4 Nov 3, 2021
A Beautiful Swipe for flutter

solarsysteme You can get a lot inforamation about plants UI Use this source code

Amirziya 5 Mar 12, 2022
Flutter page widget that is dismissed by swipe gestures, with Hero style animations, Inspired by Facebook and Instagram stories.

dismissible_page ?? ?? Creates page that is dismissed by swipe gestures, with Hero style animations, Inspired by FB, IG stories. Live Demo Contents Su

Tornike 76 Dec 22, 2022
Cupertino back gesture - Flutter package to set custom width of iOS back swipe gesture area

cupertino_back_gesture A Flutter package to set custom width of iOS back swipe gesture area. Usage To use this package, add cupertino_back_gesture as

null 28 Dec 7, 2022