rotation_three_d_effect 0.4.0

A Flutter package inspired by SwiftUI's rotation3DEffect that allows to apply a Three Dimensional rotation to any Widget.

Rotation 3D Effect

A Flutter package inspired by SwiftUI's rotation3DEffect that allows to apply a Three Dimensional rotation to any Widget.

Installation

Add the following line to your pubspec.yaml file:

dependencies:
  rotation_three_d_effect: ^0.4.0

Usage

1. Import the package:

import 'package:rotation_three_d_effect/rotation_three_d_effect.dart';

2. Apply 3D Rotation Effect:

** NEW DoubleSidedFlipWidget:

DoubleSidedFlipWidget(
  axis: FlipAxis.vertical,
  enableTap: true,
  enableDrag: true,                    
  flipThreshold: 0.5,
  perspective: 0.001,
  front: Container(
    padding: const EdgeInsets.all(10),
    decoration: BoxDecoration(
      color: Colors.amber,
      borderRadius: BorderRadius.circular(10)
    ),
    child: const Text("Front")
  ),
  back: Container(
    padding: const EdgeInsets.all(10),
    decoration: BoxDecoration(
      color: Colors.deepPurpleAccent,
      borderRadius: BorderRadius.circular(10)
    ),
    child: const Text("Back")
  ),
);

** NEW Indefinite Rotation:

IndefiniteRotation3DEffect(
  rotateY: true,
  rotateX: false,
  rotationCount: 10,
  allowUserRotation: true,
  stopRotationOnUserInteraction: false,
  rotationDuration: const Duration(seconds: 5),
  child: FilledButton.tonal(
    onPressed: () {},
    child: const Text(
      "Indefinite Continous Rotation",
    ),
  ),
);

a) Limited Returns In Place:

Rotation3DEffect.limitedReturnsInPlace(
  child: Text(
    'Hello 3D Rotation! \n(Returns in place)',
    style: TextStyle(fontSize: 35),
  ),
)

b) Limited Rotation (No Return in Place):

Rotation3DEffect.limited(
  maximumPan: 80,
  child: FilledButton.tonal(
    onPressed: () {},
    child: const Text("Limited 3D Rotation (No return in place)"),
  ),
)

c) Full 3D Rotation:

Rotation3DEffect(
  child: FlutterLogo(
    size: 150,
  ),
)

d) Full Custom:

Rotation3DEffect(
    maximumPan: 20,
    returnsInPlace: true,
    returnInPlaceDuration: const Duration(seconds: 2),
    child: Card(
      elevation: 6,
      color: Colors.amber[300],
      shadowColor: Colors.black,
      child: const SizedBox(
        height: 160,
        width: 300,
        child: Center(child: Text("Rotating Card")),
      ),
    ),
)

e) Full Custom with Initial and End Offset of your chosing:

 Rotation3DEffect(
  maximumPan: 90,
  returnsInPlace: true,
  returnInPlaceDuration: const Duration(milliseconds: 200),
  initalPosition: const Offset(45, 90),
  endPosition: const Offset(45, 90),
  child: const Card(
    elevation: 6,
    color: Colors.green,
    shadowColor: Colors.black,
    child: SizedBox(
      height: 160,
      width: 300,
      child: Center(
          child: Text(
              "Rotating Card\nInitial and end pos:\nx: 45, y: 90")),
    ),
  ),
)

Important Notice

This project is still in development, bugs may be present and I encourage you to report them. New features are under development and will be coming in the next weeks.