Simple usage

Simple examples to help you get started quickly.

Tilt

Tilt widget only manages gesture, sensor, and animation state (no UI rendering).
You can compose the TiltBaseContainer widget within the Tilt widget to wrap the default tilt, light, and shadow effects.
Alternatively, you can use the built-in Tilt.base widget to achieve the same effects.

For more information about Tilt container, check out Tilt container.

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

...

/// Tilt with TiltBaseContainer for default effects.
Tilt(
  child: TiltBaseContainer(
    child: SizedBox(
      width: 150,
      height: 300,
      child: DecoratedBox(
        decoration: const BoxDecoration(color: Colors.grey),
      ),
    ),
  ),
),

/// Tilt with built-in Tilt.base for default effects.
/// Tilt.base is a convenient widget that composes Tilt and TiltBaseContainer.
Tilt.base(
  child: SizedBox(
    width: 150,
    height: 300,
    child: DecoratedBox(
      decoration: const BoxDecoration(color: Colors.grey),
    ),
  ),
),

...

Parallax

TiltParallax widget can only be used in the Tilt widget.

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

...

Tilt(
  child: TiltBaseContainer(
    childLayout: const ChildLayout(
      outer: [
        /// Parallax here
        Positioned(
          child: TiltParallax(
            child: Text('Parallax'),
          ),
        ),
        /// Parallax here
        Positioned(
          top: 20.0,
          left: 20.0,
          child: TiltParallax(
            offset: Offset(-10.0, -10.0),
            child: Text('Tilt'),
          ),
        ),
      ],
    ),
    child: SizedBox(
      width: 150,
      height: 300,
      child: DecoratedBox(
        decoration: const BoxDecoration(color: Colors.brown),
      ),
    ),
  ),
),

...