📓 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 ✨ #

• 📦 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 🐦 #

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 are triggered only on these platforms.

• Currently Web uses the Sensor API - Gyroscope, but it is not compatible with some of the major browsers, such as Safari, Firefox.
  After that maybe replace it with DeviceMotionEvent.

Gesture priority 📱 #

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

Touch > Hover > 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 📄 #

TiltConfig 📄 #

LightConfig 📄 #

ShadowConfig 📄 #

Contributors ✨ #

AmosHuKe

License 📄 #

Open sourced under the MIT license.

© AmosHuKe