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!

Table of contents 🪄 #

Features ✨ #

• 📦 Tilt effect
• 🔦 Light effect
• 💡 Shadow effect
• 👀 Parallax effect
• 🧱 Multiple layouts
• 👇 Supports mouse and touch 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

Usage 📖 #

Example: flutter_tilt/example

Simple usage: 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,
  ),
),
... 

Tilt widget parameters

ChildLayout

TiltConfig

LightConfig

ShadowConfig

Simple usage: 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,
  ),
),
... 

TiltParallax widget parameters

License 📄 #

Open sourced under the MIT license.

© AmosHuKe