Flutter Spring -simple & power full animation kit

Related tags

Animation spring
Overview

Spring Logo

A simple & powerfull pre-built animation kit.

๐Ÿ”จ Installation

dependencies:
     spring: ^2.0.2

simple_fade

๐ŸŽฅ Spring Animations

โš™ Import

import 'package:spring/spring.dart';

๐Ÿ•น๏ธ Usage

Spring.slide(
     slideType: SlideType.slide_in_right,
     child: FlutterLogo(),
),

๐Ÿ•น๏ธ Advanced Usage

import 'package:flutter/material.dart';
import 'package:spring/spring.dart';
import 'package:test123/blue_card.dart';
import 'package:test123/red_card.dart';

class SpringExample extends StatelessWidget {
  final SpringController springController =
      SpringController(initialAnim: Motion.play);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Spring.slide(
          springController: springController,
          slideType: SlideType.slide_in_right,
          delay: Duration(milliseconds: 500),
          animDuration: Duration(milliseconds: 1000),
          curve: Curves.easeInExpo,
          extend: 30,
          withFade: true,
          animStatus: (AnimStatus status) {
            print(status);
          },
          child: GestureDetector(
              onTap: () {
                springController.play(motion: Motion.reverse);
              },
              child: FlutterLogo()),
        ),
      ),
    );
  }
}

๐ŸŽฎ SpringController

SpringController allow you to control the animations without setting the setState.
//initial anim = Motion.play
final SpringController springController =
     SpringController(); 
// you can set the initial anim using initialAnim param..
final SpringController springController =
      SpringController(initialAnim: Motion.pause,);

Controlling the animations

GestureDetector(
          onTap: () {
            springController.play(
                motion: Motion.reverse,
                animDuration: Duration(milliseconds: 300),
                curve: Curves.bounceIn,
                delay: Duration(milliseconds: 900));
          },
          child: Spring.slide(
              springController: springController,
              slideType: SlideType.slide_in_right,
              delay: Duration(milliseconds: 500),
              animDuration: Duration(milliseconds: 1000),
              curve: Curves.easeInExpo,
              extend: 30,
              withFade: true,
              animStatus: (AnimStatus status) {
                print(status);
              },
              child: FlutterLogo()),
        ),

๐Ÿ”ˆ Animation Status

You can listen for animation Staus via animStatus callBack which returns AnimStatus enum.

  • AnimStatus.forward
  • AnimStatus.completed
  • AnimStatus.reverse
  • AnimStatus.dismissed
Spring.rotate(
     springController: springController,
     animStatus: (AnimStatus status) {
          print(status);
     },
     child: FlutterLogo()),

๐Ÿž Bugs/Requests

If you encounter any problems please open an issue. If you feel the library is missing a feature, please raise a ticket on Github and we'll look into it. Pull request are welcome.

๐Ÿ™ Thanks

๐Ÿ“ƒ License

MIT License

You might also like...

Load and get full control of your Rive files in a Flutter project using this library.

Load and get full control of your Rive files in a Flutter project using this library.

โš ๏ธ Please migrate to the new Rive Flutter runtime. This runtime is for the old Rive (formerly Flare) and will only receive updates for breaking issues

Dec 31, 2022

IntroAnimationSlider - A simple Flutte Animation Introduction for Mobile app easy to implement Using intro Views flutter

introappanimation simple Flutte Animation Introduction for Mobile app easy to im

Sep 22, 2022

Flutter liquid swipe - Liquid Swipe Animation Built With Flutter

Flutter liquid swipe - Liquid Swipe Animation Built With Flutter

Flutter Liquid Swipe liquid Swipe animation is amazing and its Created for iOS P

Dec 1, 2022

A Flutter library for gradually painting SVG path objects on canvas (drawing line animation).

A Flutter library for gradually painting SVG path objects on canvas (drawing line animation).

drawing_animation From static SVG assets See more examples in the showcasing app. Dynamically created from Path objects which are animated over time m

Dec 27, 2022

A Flutter app with flip animation to view profiles of friends. ๐ŸŒŸ

A Flutter app with flip animation to view profiles of friends. ๐ŸŒŸ

Flip View Made with ๐Ÿ”ฅ in India This flutter app is based on the design made Dmytro Prudnikov for Yalantis on Dribble.He describes the design as: Just

Sep 23, 2022

Timer UI animation challenge from 'Flutter Animations Masterclass'

stopwatch_flutter An IOS stopwatch challenge from Flutter Animations Masterclass - Full Course What I learned; Use timer Use ticker Create custom shap

Jan 4, 2023

๐Ÿฑโ€๐Ÿ‘ค Flutter-Animation ๐Ÿ”ฅ ๐Ÿ”ฅ List Animated Staggered Animations

 ๐Ÿฑโ€๐Ÿ‘ค Flutter-Animation ๐Ÿ”ฅ ๐Ÿ”ฅ List Animated Staggered Animations

๐Ÿฑโ€๐Ÿ‘ค Staggered Animations made with algeria โค

Nov 22, 2022

Flutter Animation ๐Ÿฑโ€๐Ÿ‘ค Made with algeria By DZ-TM071

Flutter Animation ๐Ÿฑโ€๐Ÿ‘ค Made with algeria By DZ-TM071

Flutter Animation ๐Ÿฑโ€๐Ÿ‘ค Made with algeria By DZ-TM071

Oct 23, 2022

Flutter Animation ๐Ÿฑโ€๐Ÿ‘ค Made with algeria ๐Ÿ–ค

Flutter Animation ๐Ÿฑโ€๐Ÿ‘ค Made with algeria ๐Ÿ–ค

Flutter-awesome-login-page-animated-fastCode ๐Ÿฑโ€๐Ÿ‘ค Fast code and awesome design-ui for Login Page ! ๐Ÿ”ฅ Getting Started # First you need to add simple_

Oct 24, 2022
Comments
  • Create a SpringController rather than GlobalKey

    Create a SpringController rather than GlobalKey

    Using a GlobalKey to control an animation doesn't feel right. I feel like it's exposing an implementation detail (SpringState) to the user.

    What about creating a SpringController instead? Similar to ScrollController, PageViewController etc.

    enhancement 
    opened by josh-burton 1
  • No description about how to stop Spring

    No description about how to stop Spring

    I want to control when to dismiss the spring animation, and when to run it. The package documentation and the dart API didn't lead me to any conclusion.

    How do I do that? Is it possible?

    opened by CartmanGD 0
  • Animation replay on each setState

    Animation replay on each setState

    I am filing a new issue ticket as the latest version is still having an issue that the animation is being replayed on each setState.

    Same here! And I'm using version spring: ^2.0.2

    Originally posted by @GustavoFigueira in https://github.com/KaushickSArgekar/spring/issues/3#issuecomment-839079932

    opened by CalvinTp 1
  • Delay doesn't start when the springController starts

    Delay doesn't start when the springController starts

    It seems that the delay starts to count when the widget is rendered and not when the actual animation starts through the springController.play()

    It should start when the animation actual starts. Being initiated with

    final SpringController springController = SpringController(
        initialAnim: Motion.pause,
      );
    

    it should not fire the delay counter

    opened by netgfx 0
Owner
null
Flutter animation tutorials, such common animation, flare animation.

โค๏ธ Star โค๏ธ the repo to support the project or ?? Follow Me.Thanks! Facebook Page Facebook Group QQ Group Developer Flutter Open Flutter Open 963828159

Flutterๅผ€ๆบ็คพๅŒบ 123 Sep 3, 2022
A simple animated circular menu for Flutter, Adjustable radius, colors, alignment, animation curve and animation duration.

A simple animated circular menu for Flutter, Adjustable radius, colors, alignment, animation curve and animation duration. pub package Getting Started

Hasan Mohammed 91 Dec 20, 2022
A Flutter library that makes animation easer. It allows for separation of animation setup from the User Interface.

animator This library is an animation library for Flutter that: makes animation as simple as the simplest widget in Flutter with the help of Animator

MELLATI Fatah 225 Dec 22, 2022
Like Button is a flutter library that allows you to create a button with animation effects similar to Twitter's heart when you like something and animation effects to increase like count.

like_button Language: English | ไธญๆ–‡็ฎ€ไฝ“ Like Button is a flutter library that allows you to create a button with animation effects similar to Twitter's h

FlutterCandies 357 Dec 27, 2022
BKash-Ballance-Animation - BKash Ballance Animation For Flutter

BKash-Ballance-Animation before clone the GitHub repository please give a star o

Blackshadow Software Ltd 11 Sep 1, 2022
Fisherman-Fishing-Animation - Fisherman Fishing Animation With Flutter

Fisherman Fishing Animation before clone the GitHub repository please give a sta

Blackshadow Software Ltd 9 Oct 27, 2022
Nubank card animation - Nubank card animation built with flutter

Nubank card animation Project | Technologies | How to run | How to contribute ??

Lucas da Silva Barbosa 8 Nov 6, 2022
Fade animation - Add fade animation to your app easily

fade_animation Add fade animation to your app easily using simple_animations pac

Mazouzi Aymene 3 Oct 6, 2022
A simple widget for animating a set of images with full custom controls as an alternative to using a GIF file.

image_sequence_animator A simple widget for animating a set of images with full custom controls as an alternative to using a GIF file. If you have a G

AliYigitBireroglu 135 Jan 5, 2023
An advance flutter UI Kit for developing responsive, cross platform applications.

Liquid Build fast, responsive, cross platform apps with Liquid. Liquid is an open source UI toolkit for developing cross platform apps in Flutter. Qui

StackOrient Pvt. Ltd. 29 Dec 9, 2022