Language: English | 中文

Flutter Tilt

Easily Apply Tilt Parallax Hover Effects on Flutter!

Table of contents 🪄 #

Features ✨ #

• 📦 Tilt effect
• 🔦 Light effect
• 💡 Shadow effect
• 👀 Parallax effect
• 👇 Supports mouse and touch events
• 🖼️ Smooth animation
• ⚙️ Many custom parameters

TODO 💡 #

• Sensors
• Tilt data callback
• Tilt controller

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

TiltConfig

LightConfig

ShadowConfig

Simple usage: Parallax 👀 #

TiltParallax widget can only be used in the childInner of Tilt widget.
childInner is the same as Stack widget.

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

...
Tilt(
  childInner: const [
    /// Parallax here
    Positioned.fill(
      child: Center(
        child: TiltParallax(
          child: Text('Parallax'),
        ),
      ),
    ),
    /// Parallax here
    Positioned.fill(
      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