A simple widget for having UI elements that respond to taps with a spring animation.

Overview

spring_button

Cosmos Software

Pub License

A simple widget for having child widgets that respond to gestures with a spring animation.

Media | Description | How-to-Use

Media

Watch on Youtube:

v1.0.0



Description

This is a simple widget for having child widgets that respond to gestures with a spring animation.

It is more of an extension to the GestureDetector widget than an original new widget.

How-to-Use

Simply create a SpringButton as shown in the example:

SpringButton(
    SpringButtonType.OnlyScale, //springButtonType
    uiChild(),                  //uiChild
    {Key key,
    useCache            : true,
    alignment           : Alignment.center,
    scaleCoefficient    : 0.75,
    onTapDown,
    onTapUp,
    onTap,
    onTapCancel,
    onSecondaryTapDown,
    onSecondaryTapUp,
    onSecondaryTapCancel,
    onDoubleTap,
    onLongPress,
    onLongPressStart,
    onLongPressMoveUpdate,
    onLongPressUp,
    onLongPressEnd,
    onVerticalDragDown,
    onVerticalDragStart,
    onVerticalDragUpdate,
    onVerticalDragEnd,
    onVerticalDragCancel,
    onHorizontalDragDown,
    onHorizontalDragStart,
    onHorizontalDragUpdate,
    onHorizontalDragEnd,
    onHorizontalDragCancel,
    onForcePressStart,
    onForcePressPeak,
    onForcePressUpdate,
    onForcePressEnd,
    onPanDown,
    onPanStart,
    onPanUpdate,
    onPanEnd,
    onPanCancel,
    onScaleStart,
    onScaleUpdate,
    onScaleEnd})
    
Widget uiChild() {}

Further Explanations:

For a complete set of descriptions for all parameters and methods, see the documentation.

  • SpringButton, as you can see, is very similar to a GestureDetector widget so it should be familiar.

Notes

I started using and learning Flutter only some weeks ago so this package might have some parts that don't make sense, that should be completely different, that could be much better, etc. Please let me know! Nicely!

Any help, suggestion or criticism is appreciated!

Cheers.





You might also like...

"FlutterMoneyFormatter" is a Flutter extension to formatting various types of currencies according to the characteristics you like, without having to be tied to any localization.

FlutterMoneyFormatter FlutterMoneyFormatter is a Flutter extension to formatting various types of currencies according to the characteristics you like

Jan 1, 2023

An Android Launcher (having Ubuntu-Gnome flavour) build with Flutter

An Android  Launcher (having Ubuntu-Gnome flavour) build with Flutter

Ubuntu Launcher Introduction Ubuntu launcher is an custom android launcher build with Flutter with a Ubuntu-Gnome look. Though flutter is a cross plat

Dec 22, 2022

SSH no ports provides ssh to a remote Linux device with out that device having any ports open

Ssh! No ports ssh no ports provides a way to ssh to a remote linux host/device without that device having any open ports (not even 22) on external int

Dec 21, 2022

Card Swipe Animation Ruchika GuptaCard Swipe Animation [404⭐] - Swipe cards template by Ruchika Gupta.

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

Dec 27, 2022

A Fluter tabview that text color can change with animation and bg color change with animation

A Fluter tabview that text color can change with animation and bg color change with animation

float_tab A Fluter tabview that text color can change with animation and bg color change with animation Getting Started This project is a starting poi

Dec 8, 2021

OnBoarding Animation provides page like animation to the onBoarding screens with the page indicator

OnBoarding Animation OnBoarding Animation provides page like animation to the onBoarding screens with the page indicator. Screenshots and Screen recor

Oct 12, 2022

Create account, animation transition and animation painter logo splash

Create account, animation transition and animation painter logo splash

flutter_text_form_field This project have a splash screen by using animation and creating profile. Login and Register. Page transition animation App S

May 2, 2021

Animation Examples: stepper Counter loading Ripple Circle Generator water Flow Animation Wave

AnimatioExamples(stepperCounter-loadingRippleCircleGenerator-waterFlowAnimationWave) A new Flutter project. Getting Started This project is a starting

Nov 1, 2022
Comments
  • Data not being updated in stateful widget.

    Data not being updated in stateful widget.

    first of all Thanks for the great Library when trying to change its data after button pressed nothing happens in the UI. onPress() works correctly and changes the data I want (I can see it is changed using print()) but in the UI the button stays the same as it was since the beginning. or maybe im not using the library properly...

    heres the code:

    
                                  ...options.map((option) =>
                                      SpringButton(
                                        SpringButtonType.WithOpacity,
                                        Padding(
                                          padding: EdgeInsets.symmetric(vertical: 4.0, horizontal: 30.0),
                                          child: Container(
                                            height: 40.0,
                                            width: clickedOption,
                                            decoration: BoxDecoration(
                                              color: btnColor,
                                              borderRadius: const BorderRadius.all(const Radius.circular(30.0)),
                                              boxShadow: [
                                                BoxShadow(
                                                  color: Color(0x80000000),
                                                  blurRadius: 10.0,
                                                  offset: Offset(0.0, 5.0),
                                                ),
                                              ],
                                            ),
                                            child: Center(
                                              child: Text(option,
                                                style: TextStyle(
                                                    fontSize: 18.0,
                                                    fontWeight: FontWeight.bold,
                                                    color: Colors.white),
                                              ),
                                            ),
                                          ),
                                        ),
                                        onTapDown: (_) {
                                          setState(() {
                                            _answers[_currentIndex] = option;
                                            print(_answers[_currentIndex]);
                                            btnColor = Colors.yellowAccent;
                                            print(option);
                                          });
                                        },
    //                                            onLongPress: () ,
                                        onLongPressEnd: (_) {
                                          setState(() {
                                            _answers[_currentIndex] = option;
                                            print(_answers[_currentIndex]);
                                            print(option);
                                          });
                                          },
                                      ),
                                  ),
    

    the options is the data coming from the database and after each click should change but what happens is that data updates in options but nothing happens in UI.

    opened by MojtabaTavakkoli 18
  • Can't change the Spring button color

    Can't change the Spring button color

    Can't change the Spring button color dynamically, if i have some color intiallly and want to change later with setState, it doesn't reflect to the button child: SpringButton(

    Source Code:

      SpringButton(  
        SpringButtonType.OnlyScale,
        Container(
          height: ScreenUtil.getInstance().setHeight(50),
          width: MediaQuery.of(context).size.width * 0.78,
          decoration:BoxDecoration(
            shape: BoxShape.rectangle,
            color: dynamicButtonColor,
            borderRadius: BorderRadius.circular(5.0),
          ) ,
          child: Center(
            child: Text(
             "ABC",
              style: GoogleFonts.openSans(
                fontWeight: FontWeight.w600,
                fontSize: ScreenUtil(allowFontScaling: true).setSp(14),
                color: AppColors.whiteText,
              ),
              textScaleFactor: 1.0,
            ),
          ),
        ),
        onTapDown: (_) => {
      
    
        },
      )
    

    )

    opened by mohantyagii 2
Owner
AliYigitBireroglu
"It's true that we love one another, I love programming like a little brother."
AliYigitBireroglu
Flutter Youtube Redesign. this gave me so much Experience For Flutter . I used Video_player and Spring animation packages in this project

youtube 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

null 1 Dec 13, 2021
FLUTTER API: It's powerful navigation by gestures and taps. You can scroll from left to right or tap on the navigation icons.

scroll_navigation My other APIs Video Viewer Video Editor Helpers Features Fancy animations. Customizable colors. Works with the back button. Scrollin

Luis Felipe Murguia Ramos 14 Jun 14, 2022
A highly customisable and simple widget for having iOS 13 style tab bars.

cupertino_tabbar A highly customisable and simple widget for having iOS 13 style tab bars. It is highly recommended to read the documentation and run

AliYigitBireroglu 98 Oct 31, 2022
A very easy-to-use navigation tool/widget for having iOS 13 style stacks.

cupertino_stackview A very easy-to-use navigation tool/widget for having iOS 13 style stacks. It is highly recommended to read the documentation and r

AliYigitBireroglu 49 Nov 18, 2022
A periodic table app with 3D view of the elements built using flutter.

A flutter app which takes you on a 3d visualisation of the 118 elements of the periodic table. promo.mp4 Tech Stack Deployed using How it all began It

Shanwill Pinto 48 Nov 16, 2022
It's OK to love Flutter and hate hand-coding design elements. Parabeac-Core converts design files into Flutter code.

Parabeac-Core Parabeac-Core converts design files into Flutter code driven by open-source & community. Contribute · Discord Community · Designer Proto

Parabeac 536 Jan 4, 2023
A modern app made with Flutter to track the chemical elements.

Elements A modern app to track the chemical elements. Including all 118 elements, with their weight, radiation, consistency, type, block, and electron

Kristóf Kékesi 13 Nov 28, 2021
Design system flutter - A framework contains SBB (Swiss Federal Railways) UI elements for Flutter Apps

Design System Mobile for Flutter Design System Mobile in Flutter (yes, it could

Swiss Federal Railways (SBB) 14 Dec 22, 2022
Canton Design System elements and resources for Flutter.

Canton UI Canton UI elements and resources for Flutter. Examples in Apps Notes App News App Elisha Description This includes things such as themes (co

Carlton Aikins 10 Dec 17, 2022
A #Flutter package that let you draw a flow chart diagram with different kind of customizable elements

Flutter Flow Chart A package that let you draw a flow chart diagram with different kind of customizable elements. Dashboards can be saved for later us

Marco Bavagnoli 50 Jan 1, 2023