Inscription
- Holding the sword in the world, starting from your accumulation, wherever you go, you must strive for perfection, that is, toss every day.

1 Add dependencies

The editor encapsulates this effect into a ShakeAnimationWidget component, and directly uses the shake_animation_widget dependency library to achieve this effect

The actual project is first to refer to dependencies, and add dependencies through the pub repository. The code is as follows: the latest version is here

  dependencies:
	 shake_animation_widget: ^1.0.0

• 1
• 2

Or click to view github to add dependencies through github, the code is as follows:

dependencies:
	shake_animation_widget:
	      git:
	        url: https://github.com/zhaolongs/flutter_shake_animation_widget.git
	        ref: master

• 1
• 2
• 3
• 4
• 5

Then load the dependencies, the code is as follows:

flutter pub get

• 1

Then import the package where it is used, the code is as follows:

import 'package:shake_animation_widget/shake_animation_widget.dart';

• 1

Then you can use ShakeAnimationWidget to add a shaking animation effect to any widget. The actual application scenario is that the user does not enter the password when logging in or the verification code shakes to remind the user, or when the output is wrong, shake the password input box to remind the user.

2 Implement the jitter of a button

Left and right jitter:

The code is as follows:

  ///Shake Animation Controller 
 ShakeAnimationController _shakeAnimationController = 
        new  ShakeAnimationController ( ) ; 
  /// Build Shake Effect 
  ShakeAnimationWidget buildShakeAnimationWidget ( )  { 
    return  ShakeAnimationWidget ( 
      /// Shake Controller 
      shakeAnimationController : _shakeAnimationController , 
      /// 
      Shake ShakeAnimationType : ShakeAnimationType . RoateShake , 
      ///Setting does not turn on shaking 
      isForward :  false , 
      ///The default is 0 to execute 
      shakeCount indefinitely : 0 , 
      ///The value range of the shaking amplitude is [0,1] 
      shakeRange :  0.2 , 
      ///The child Widget that performs shaking animation 
      child :  RaisedButton ( 
        child :  Text ( 
          'Test' , 
          style :  TextStyle ( color : Colors . white ) , 
        ) , 
        onPressed :  ( )  { 
          ///Determine whether the shaking animation is being executed 
          if  ( _shakeAnimationController . animationRunging )  { 
            ///Stop shaking animation
            _shakeAnimationController . stop ( ) ; 
          }  else  { 
            ///Enable shaking animation 
            ///The parameter shakeCount is used to configure the number of shakes 
            ///The default value is 1 by the controller start method 
            _shakeAnimationController . start ( shakeCount :  1 ) ; 
          } 
        } , 
      ) , 
    ) ; 
  }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37

Determine the type of shaking animation using the shakeAnimationType property to configure, its value is shown in the following table

ShakeAnimationType.TopBottomShake Up and Down Shake:

ShakeAnimationType.RoateShake Rotation Shake:

ShakeAnimationType.SkewShake Bevel Shake:

3 Realize the jitter effect of the text

The running effect is as follows:

In the shake_animation_widget dependency library, Xiaobian provides a ShakeTextAnimationWidget component to set an independent shaking effect for a single character in a String string.
When using it, you only need to import the package as follows:

import 'package:flutterbookcode/demo/shake/shake_animation_text.dart';

• 1

Then use ShakeTextAnimationWidget to implement the text shaking code as follows:

 ShakeTextAnimationWidget ( 
    ///Text 
    animationString that needs to set the shaking effect :  "Here is the shaking of the text" , 
    ///Character spacing 
    space :  1.0 , 
    ///Line spacing 
    runSpace :  10 , 
    ///Text style 
    textStyle :  TextStyle ( 
      / //The size of the text 
      fontSize :  25 , 
    ) , 
    /// The number of 
    shakes shakeCount :  0 , 
  ) ,

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15