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

Easily Apply Tilt Parallax Hover Effects for Flutter!

Check out the Live Demo.

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

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

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

Touch > Hover > Sensors

Example: flutter_tilt/example

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,
  ),
),
... 

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,
  ),
),
... 

AmosHuKe

Open sourced under the MIT license.

© AmosHuKe