Search packages, repositories and app categories

GitHub repositoryTimoteohss/slide_button

slide_button

A swipe to confirm button for flutter

slide_button project cover
Stars
40
Forks
17
Last push (UTC)
Sep 27, 2021
Project status
Active

Original README

English project snapshot. Visit GitHub for the latest content.

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

  • [x] Create the repo
  • [x] 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.

Timoteohss GitHub avatar
GitHub author

Timoteohss ↗

Bsc Computer Science - Mobile Developer and Machine Learning enthusiast 💙

BRQCuritiba - PR
LanguagesDartShellSwiftKotlinObjective-C

Packages published by this repository

Dependencies used

Dependency list 2 items

  • flutter{"sdk":"flutter"}
  • flutter_testDevelopment{"sdk":"flutter"}

How do I choose a repository?

Start with your use case, compare repository activity, and check the original project before adopting it.

  1. Search by repository name, owner or description, then narrow the results by topic.
  2. Compare stars, forks and recent pushes. Stars show community interest, not a guarantee of quality.
  3. Read the README, license and issues on GitHub before using a project.

Sources and maintenance

“A repository is the most basic element of GitHub.”

GitHub Docs — About repositories ↗