flutter_tilt

0

? Easily apply tilt parallax hover effects on Flutter! | 在 Flutter 上轻松创建倾斜视差悬停效果!

Productivity

flutter
hover
parallax
tilt

Flutter Tilt

Easily apply tilt parallax hover effects on Flutter!

Table of Contents

  • Features
  • TODO
  • Install
  • Versions Compatibility
  • Add Package
  • Usage
  • License

Features

  • Tilt effect
  • Light effect
  • Shadow effect
  • Parallax effect
  • Supports mouse and touch events
  • Smooth animation
  • Many custom parameters

TODO

  • Sensors
  • Tilt controller

Install

Versions Compatibility

3.0.x 3.3.x 3.10.x
0.0.1+

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 'package:flutter_tilt/flutter_tilt.dart';

...

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

Tilt widget parameters

Parameter Type Default Description
child (required) Widget - Create a widget that its child widget can be tilted.
childInner List [] As with Stack, you can use the Stack layout to create widgets that are above the child, e.g., parallax effects.
disable bool false Disable all effects.
fps int 60 Gesture triggered frames.
borderRadius BorderRadiusGeometry? null If non-null, the corners of this box are rounded by this BorderRadius.
clipBehavior Clip Clip.antiAlias Flutter clipBehavior.
tiltConfig TiltConfig TiltConfig() Tilt effect config.
lightConfig LightConfig
Company Screenshot