gyroscopic_card 0.0.1 gyroscopic_card: ^0.0.1 copied to clipboard
Gyroscopic Card is a Flutter package that provides an interactive, gyroscope-responsive card widget. This widget creates a unique 3D tilting effect, rotating smoothly based on device orientation, offe [...]
Gyroscopic Card #
Gyroscopic Card is a Flutter package that provides an interactive, gyroscope-responsive card widget. It adds a realistic 3D tilting effect based on device orientation, making it ideal for applications aiming to create an immersive and interactive user experience.
Features #
- Gyroscope-Based Rotation: Adds real-time rotation based on device orientation.
- Customizable Sensitivity and Rotation Limits: Fine-tune rotation sensitivity and maximum tilt angle to match your design.
- Flexible Card Properties: Customize appearance, including elevation, shape, color, and shadow.
- Supports Any Child Widget: Easily integrate text, images, or any widget inside the gyroscopic card.
Getting Started #
To use this package, ensure you have Flutter set up and add the package to your pubspec.yaml
file.
dependencies:
gyroscopic_card: ^1.0.0
## Usage
Wrap any widget with GyroscopicCard to add gyroscope-driven tilt effects. Here’s a basic example
```dart
import 'package:flutter/material.dart';
import 'package:gyroscopic_card/gyroscopic_card.dart';
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: GyroscopicCard(
sensitivity: 0.05,
maxAngleRadians: 0.785, // 45 degrees in radians
child: Container(
width: 250,
height: 350,
alignment: Alignment.center,
child: Text(
'Gyroscopic Card',
style: TextStyle(fontSize: 24),
),
),
cardProperties: Card(
elevation: 8,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
),
),
),
),
);
}
}