📓 Language: English | 中文
🎁 Check out the Live Demo.
💡 See the Migration Guide to learn how to migrate between breaking changes.

Flutter Tilt

Easily apply tilt parallax hover effects for Flutter!

Check out the [Live Demo][].

Table of contents 🪄

• Features

• Install

  • Versions compatibility

  • Platforms compatibility

  • Add package

• Sensors compatibility

• Gestures priority

• Simple usage

  • Tilt

  • Parallax

• Usage

  • Tilt widget parameters

  • TiltParallax widget parameters

  • ChildLayout

  • StreamController<TiltStreamModel>

  • TiltConfig

  • LightConfig

  • ShadowConfig

• Contributors

• License

Features ✨

• 📦 Tilt effect
• 🔦 Light effect
• 💡 Shadow effect
• 👀 Parallax effect
• 📱 Gyroscope sensor support (Sensors compatibility)
• 🧱 Multiple layouts
• 👇 Supports hover, touch and sensors events
• 🖼️ Smooth animation
• ⚙️ Many custom parameters

Install 🎯

Versions compatibility 🐦

Platforms compatibility 📱

Add package 📦

Run this command with Flutter,

$ flutter pub add flutter_tilt

or add flutter_tilt to pubspec.yaml dependencies manually.

dependencies:
  flutter_tilt: ^latest_version

Sensors compatibility 📱

Sensors will only trigger on these platforms.
Platforms without sensors support do not affect the normal use of other features.

[!NOTE]
Currently Web uses the Sensor API - Gyroscope, but it is not compatible with some of the major browsers, such as Safari, Firefox.

Gestures priority 📱

When multiple gestures are enabled, they are triggered based on priority:

Touch > Hover > Controller > Sensors

Simple usage 📖

Example: flutter_tilt/example

Tilt 📦

Tilt widget will have default tilt, shadow, and light effects.

/// Import flutter_tilt
import 'package:flutter_tilt/flutter_tilt.dart';

Tilt(
  child: Container(
    width: 150.0,
    height: 300.0,
    color: Colors.grey,
  ),
),

Parallax 👀

TiltParallax widget can only be used in the childLayout of Tilt widget.

/// Import flutter_tilt
import 'package:flutter_tilt/flutter_tilt.dart';

Tilt(
  childLayout: const ChildLayout(
    outer: [
      /// Parallax here
      Positioned(
        child: TiltParallax(
          child: Text('Parallax'),
        ),
      ),
      /// Parallax here
      Positioned(
        top: 20.0,
        left: 20.0,
        child: TiltParallax(
          size: Offset(-10.0, -10.0),
          child: Text('Tilt'),
        ),
      ),
    ],
  ),
  child: Container(
    width: 150.0,
    height: 300.0,
    color: Colors.brown,
  ),
),

Usage 📖

Tilt widget parameters 🤖

TiltParallax widget parameters 🤖

ChildLayout 📄

StreamController<TiltStreamModel> 📄

final StreamController<TiltStreamModel> tiltStreamController =
      StreamController<TiltStreamModel>.broadcast();

/// The current gesture is being used
tiltStreamController.add(
  TiltStreamModel(
    position: Offset(xx, xx),
  ),
);

/// Stop using the current gesture
tiltStreamController.add(
  TiltStreamModel(
    position: Offset(xx, xx),
    gestureUse: false,
  ),
);

TiltConfig 📄

LightConfig 📄

ShadowConfig 📄

Contributors ✨

See graphs/contributors for more details.
Contributions of any kind are welcome! (emoji key)

AmosHuKe 💻  👀  📖  💡  ⚠️  🚧  🎨  🤔  💬  Example: flutter_tilt_book

LOCKEDFILE 🐛

License 📄

Open sourced under the MIT license.

© AmosHuKe