flutter_shake_animated

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

flutter_shake_animated is a Flutter package that provides animated shake effects for widgets, enhancing user interaction through dynamic visual feedback. It allows developers to easily apply shake animations to UI elements with minimal code. The package supports multiple platforms including Android, iOS, Web, macOS, Windows, and Linux, making it versatile for cross-platform applications. With simple integration via pub add, it's ideal for adding playful or attention-grabbing animations to buttons, inputs, or alerts.

Use cases

Adding visual feedback to form inputs
Creating interactive button animations
Highlighting errors in forms
Enhancing game UI elements
Designing engaging onboarding screens

Key features

Simple API for applying shake animations
Cross-platform compatibility
Customizable shake intensity and duration
Supports both horizontal and vertical shaking
Lightweight and easy to integrate

Suitable for

UI designers seeking interactive elements
Developers building form-heavy apps
Game developers needing quick animations
Educational app creators
Prototyping interactive interfaces

Considerations

May not be suitable for accessibility-focused designs
Excessive use could distract users
Performance impact on low-end devices
Limited customization beyond basic shake parameters
Best used sparingly for optimal UX

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

Get started

this shake effect I refer to this css open source library, CSShake

Add dependency

dependencies:
  flutter_shake_animated: ^0.0.5

Usage

For more animate effects, please refer to example/lib/main.dart file

import 'package:flutter_shake_animated/flutter_shake_animated.dart';

ShakeWidget(
    duration: duration,
    shakeConstant: shakeConstant,
    autoPlay: true,
    enableWebMouseHover: true,
    child: your widget,
)

ShakeConstant

1. ShakeDefaultConstant1,ShakeDefaultConstant2
2. ShakeHardConstant1,ShakeHardConstant2
3. ShakeSlowConstant1,ShakeSlowConstant2
4. ShakeLittleConstant1,ShakeLittleConstant2
5. ShakeHorizontalConstant1,ShakeHorizontalConstant2
6. ShakeVerticalConstant1,ShakeVerticalConstant2
7. ShakeRotateConstant1,ShakeRotateConstant2
8. ShakeCrazyConstant1,ShakeCrazyConstant2
9. ShakeOpacityConstant
10.ShakeChunkConstant

Custom shake animation


class CustomShakeAnimated implements ShakeConstant {

  @override
  Duration get duration => throw UnimplementedError();

  @override
  /// range: 0 - 100 && incremental, last value must equal 100. 
  /// when only have oneelement,represents the same interval
  List<int> get interval => throw UnimplementedError();

  @override
  /// range: 0 - 1.0, []:1.0 = [1.0]
  List<double> get opacity => throw UnimplementedError();

  @override
  /// eg: 45deg = pi / 4, []:0 = [45]: rotate 45deg
  List<double> get rotate => throw UnimplementedError();

  @override
  // Offset(double dx, double dy)
  List<Offset> get translate => throw UnimplementedError();
  
}

Search packages, repositories and app categories