A swipe to confirm button for flutter

Related tags

Templates slide_button
Overview

Sliding Button

A sliding Flutter widget, based on the slide to unlock function from multiple devices. Heavily customizable and flexible.

pls don't be a giant-ass gif

Installing

Add the following to your pubspec.yaml:

dependencies:
slide_button: ^0.2.8

Usage

  1. Install
  2. Use the SlideButton widget anywhere
  3. ???
  4. Profit

Properties

Several properties are present and can be customized:

| Properties              	| Description                                                                                                                                                            	|
|-------------------------	|------------------------------------------------------------------------------------------------------------------------------------------------------------------------	|
| height                  	| Height of the Widget, leave blank to get the parent constraints.                                                                                                       	|
| backgroundChild         	| A child to be put on the background bar, NOT centered by default.                                                                                                      	|
| slidingChild            	| A child tobe put on the sliding bar, NOT centered by default.                                                                                                          	|
| backgroundColor         	| The color of the background bar.                                                                                                                                       	|
| slidingBarColor         	| The color of the sliding bar.                                                                                                                                          	|
| confirmPercentage       	| How much of the bar width have to be slided to confirm the action.                                                                                                     	|
| initialSliderPercentage 	| The initial (and resting) percentage of the sliding bar.                                                                                                               	|
| isDraggable             	| Is this widget draggable?                                                                                                                                              	|
| onButtonSlide           	| Callback that returns a `Double` value containing the drag percentage.                                                                                                 	|
| onButtonOpened          	| Callback called when the button is slided all the way.                                                                                                                 	|
| onButtonClosed          	| Callback called when the button is back to the initialSliderPercentage.                                                                                                	|
| slideDirection          	| Either SlideDirection.RIGHT or SlideDirection.LEFT, sets the sliding direction of the sliding bar.                                                                     	|
| shouldCloseBorders      	| This updates the borders when the button reaches 0.9 percent dragged, and set the borderRadius to zero, giving the impression of a "closed" button. Defaults to `true` 	|
| shouldCloseBorders      	| BorderRadius for the sliding bar, default is 50. 	                                                                                                                        |

TODO

  • Create the repo
  • Make it work
  • Fix text on the sliding bar
  • Find a better activation function capable of activating between x and y percentages
  • More listeners?
  • Parallax effect?
  • Make it pop

Inspiration

This widget was partially made possible by inspecting elements from sliding_up_panel.

Comments
  • slide_button doesn't have a main class

    slide_button doesn't have a main class

    The plugin slide_button doesn't have a main class defined in /xxx/flutter/.pub-cache/hosted/pub.flutter-io.cn/slide_button-0.2.8/android/src/main/java/com/timoteohss/slide_button/SlideButtonPlugin.java or /Users/tv/dev/flutter/.pub-cache/hosted/pub.flutter-io.cn/slide_button-0.2.8/android/src/main/kotlin/com/timoteohss/slide_button/SlideButtonPlugin.kt. This is likely to due to an incorrect androidPackage: com.timoteohss.slide_button or mainClass entry in the plugin's pubspec.yaml. If you are the author of this plugin, fix the androidPackage entry or move the main class to any of locations used above. Otherwise, please contact the author of this plugin and consider using a different plugin in the meanwhile.

    opened by tinvyhx 4
  • Can not install it

    Can not install it

    I have some problem here, when i install this plugin

    Couldn't read file LocalFile: 'C:\flutter.pub-cache\hosted\pub.dartlang.org\slide_button-0.2.8\android\src\main\kotlin\com\timoteohss\slide_button\SlideButtonPlugin.kt' even though it exists. Please verify that this file has read permission and try again.

    Anyone can help me?

    opened by 4RSIM3R 2
  • Fix to prevent OnButtonOpened to be called twice

    Fix to prevent OnButtonOpened to be called twice

    To reproduce the issue : Add an OnButtonOpened call back to the button and drag it until the end release you will see that the callback is being called twice, once when you reach 1.0 manually and the other one when the animator fling it to 1.0 again (even when it's already 1.0).

    Source fo the issue : The source of the error is that the button is being flung anyways when it reaches the confirmPercentage even when it's already at 1.0

    The fix : To fix the issue, added a check before flinging. So the only case when to fling is when the button has been dragged to less than 1.0 but reached the confirmationPercentage.

    opened by karimkod 1
  • iOS podspec error

    iOS podspec error

    Hi,

    I am successfully using your dependency in android. thanks for your hard work. But when i checked it in ios i get this error

    [!] No podspec found for slide_button in .symlinks/plugins/slide_button/ios

    Kindly help me with this problem. Thanks

    opened by faiziakbr 1
  • Fix naming issue (#1)

    Fix naming issue (#1)

    Due to a file and directory name issue, this plugin could not be used for android.
    This PR changes the directory name swipe_button to slide_button as well as the kotlin class name SwipeButtonPlugin to SlideButtonPlugin fixing the build.

    opened by geisterfurz007 1
  • Fixed the call of OnButtonOpened twice one when the slider reach 1.0 and one when it's being fling by the animator

    Fixed the call of OnButtonOpened twice one when the slider reach 1.0 and one when it's being fling by the animator

    To reproduce the issue : Add an OnButtonOpened call back to the button and drag it until the end release you will see that the callback is being called twice, once when you reach 1.0 manually and the other one when the animator fling it to 1.0 again (even when it's already 1.0).

    Source fo the issue : The source of the error is that the button is being flung anyways when it reaches the confirmPercentage even when it's already at 1.0

    The fix : To fix the issue, added a check before flinging. So the only case when to fling is when the button has been dragged to less than 1.0 but reached the confirmationParcentage.

    opened by karimkod 0
  • Add axis to update and end event

    Add axis to update and end event

    Added a way to swift between horizontal and vertical drag event update. I found it easier to drag when the gesture detector event was set to "horizontal" rather than vertical.

    I've added UpdateAxis enum, which has HORIZONTAL and VERTICAL.

    opened by Julius-Bendt 0
Owner
Bsc Computer Science - Mobile Developer and Machine Learning enthusiast 💙
null
GitHub https://pub.dev/packages/slide_button
Swipeable button view - Create Ripple Animated Pages With Swipeable Button View

swipeable_button_view You can create ripple animated pages with swipeable_button

cemreonur 3 Apr 22, 2022
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
Swipe Book | E-book Mobile Application For Android and IoS Using Flutter

is a collection of a wide variety of educational resources consisting pdfs, images, question papers, a collection of important questions, programs, useful videos that will help in the effective learning process.

Sajan Poudel 8 Nov 9, 2022
A 3D pushable button built in Flutter. Ideal for important CTAs in the app.

Pushable Button A 3D pushable button built in Flutter. Ideal for important CTAs in the app. Usage PushableButton( child: Text('ENROLL NOW', style: s

Andrea Bizzotto 18 May 14, 2022
A flutter package that provides multiple states for a button with endless customizability.

multi_state_button A package which provides multiple states for a button with endless customizability. Getting Started Add dependency dependencies:

null 4 Apr 11, 2022
counter button flutter plugin

counter_button Counter Button is a flutter library that allows you to create a button with animation effects when you increase or decrease the counter

Altercode 4 Dec 20, 2021
Flutter package to create list of radio button, by providing a list of objects it can be a String list or list of Map.

Custom Radio Group List Flutter package to create list of radio button, by providing a list of objects it can be a String list or list of Map. Feature

Ashok Kumar Verma 0 Nov 30, 2021
A sign in button helper library for Flutter

A Flutter plugin for iOS and Android for generating signin buttons for different social media account. Feedback and Pull Requests are most welcome! In

Liu Zhiheng 229 Dec 29, 2022
How to Create Bouncing Button in Flutter

Bouncing Button ?? Screenshots Download the Following App for Preview ?? Flutter Tutorial All Flutter Tutorials plus additional Code and shorter posts

Sagar Shende 14 Mar 15, 2022
Flutter plugin to display a popup menu button widget with handsome design and easy to use.

menu_button Flutter widget to display a popup menu button very simply and easily customizable. Resources Documentation Pub Package GitHub Repository I

Hugo EXTRAT 63 Sep 27, 2022
A Flutter app that shows a random Steve Jobs quote on every button click

Inspire App An app I made while learning Flutter that shows a random Steve Jobs quote on every button click. Used technologies Dart Screenshots Contri

Yılmaz Yağız Dokumacı 1 Dec 2, 2021
A Flutter package that allows Android users to press the back-button twice to close the app.

double_back_to_close_app A Flutter package that allows Android users to press the back-button twice to close the app. Usage Inside a Scaffold that wra

Hugo Passos 57 Oct 10, 2022
A Flutter package with an advanced dropdown Button which let you give different design on DropdownButton

Use decorated_dropdown button to add DropdownButton with decoration properties l

Hari Prasad Chaudhary 1 Dec 17, 2021
A Flutter Material Button that animates between Progress and Error states

progress_button A Material Flutter Button that supports progress and error visuals Getting Started ProgressButton is designed to be easy to use and cu

Halil Ozercan 132 Sep 21, 2022
A Custom 3D Button in Flutter

Clicky Button for flutter A Custom 3D Button in Flutter Demo How To Use it import 'clicky_button/clicky_button.dart' ... ClickyButton( child: Tex

Raj Singh 16 Sep 2, 2022