https://github.com/anasfik/transitioned_indexed_stack
A Package That Helps Implementing Animated Indexed Stack For Fluttuer
https://github.com/anasfik/transitioned_indexed_stack
animation dart flutter flutter-examples flutter-package flutter-ui flutter-widget indexed-stack
Last synced: 6 months ago
JSON representation
A Package That Helps Implementing Animated Indexed Stack For Fluttuer
- Host: GitHub
- URL: https://github.com/anasfik/transitioned_indexed_stack
- Owner: anasfik
- License: mit
- Created: 2022-12-20T20:15:50.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-12-26T14:16:22.000Z (over 3 years ago)
- Last Synced: 2025-04-03T08:59:55.244Z (over 1 year ago)
- Topics: animation, dart, flutter, flutter-examples, flutter-package, flutter-ui, flutter-widget, indexed-stack
- Language: Dart
- Homepage: https://pub.dev/packages/transitioned_indexed_stack
- Size: 7.67 MB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Transitioned Indexed Stack
This Package helps You Making Animated Transitions between IndexedStack children widgets Easily.
# What it offers
- Fade Indexed Stack
- Scale Indexed Stack
- Slide Indexed Stack
- Slide Up IndexedStack
- Slide Down IndexedStack
- Slide Right IndexedStack
- Slide Left IndexedStack
- Size Factor Indexed Stack
- Rotation Indexed Stack
- Diagonal Indexed Stack
- Shake Indexed Stack
All widgets offered by this package have the same properties as the pre-built Flutter `IndexedStack` widget, in addition of some useful properties which control the animations.
# Demo App
# Usage:
## Fade Indexed Stack
### Showcase :
### Code :
```dart
FadeIndexedStack(
beginOpacity: 0.0,
endOpacity: 1.0,
curve: Curves.easeInOut,
duration: const Duration(milliseconds: 250),
index: 1,
children: const [
Center(
child: Text("Child 1"),
),
Center(
child: Text("Child 2"),
),
],
),
```
#### Properties
| property | Description | type |
| -------------- | ------------------------------------------------------------ | ---------- |
| `beginOpacity` | The Initial Fade Opacity Animation Value | `double` |
| `endOpacity` | The End Fade Opacity Animation Value | `double` |
| `curve` | The Animation Curve | `Curve` |
| `duration` | The Animation duration ( need a hot restart to see changes ) | `Duration` |
## Scale Indexed Stack
### Showcase :
### Code :
```dart
ScaleIndexedStack(
beginScale: 0.0,
endScale: 1.0,
curve: Curves.easeInOut,
duration: const Duration(milliseconds: 250),
index: 1,
children: const [
Center(
child: Text("Child 1"),
),
Center(
child: Text("Child 2"),
),
],
),
```
#### Properties
| property | Description | type |
| ------------ | ------------------------------------------------------------ | ---------- |
| `beginScale` | The Initial Scale Animation Value | `double` |
| `endScale` | The End Scale Animation Value | `double` |
| `curve` | The Animation Curve | `Curve` |
| `duration` | The Animation duration ( need a hot restart to see changes ) | `Duration` |
## Slide Indexed Stack
### Showcase :
### Code :
```dart
SlideIndexedStack(
endSlideOffset: const Offset(0.5, 1),
beginSlideOffset: const Offset(0.0, 0.0),
curve: Curves.easeInOut,
duration: const Duration(milliseconds: 250),
index: 1,
children: const [
Center(
child: Text("Child 1"),
),
Center(
child: Text("Child 2"),
),
],
),
```
#### Properties
| property | Description | type |
| ------------------ | ------------------------------------------------------------ | ---------- |
| `endSlideOffset` | The Offset From Where The Animations Starts | `Offset` |
| `beginSlideOffset` | The Offset From Where The Animations Ends | `Offset` |
| `curve` | The Animation Curve | `Curve` |
| `duration` | The Animation duration ( need a hot restart to see changes ) | `Duration` |
## Size Factor Indexed Stack
### Showcase :
### Code :
```dart
SizeFactorIndexedStack(
beginSizeFactor: 0.0,
endSizeFactor: 1.0,
curve: Curves.easeInOut,
duration: const Duration(milliseconds: 250),
index: 1,
children: const [
Center(
child: Text("Child 1"),
),
Center(
child: Text("Child 2"),
),
],
),
```
#### Properties
| property | Description | type |
| ----------------- | ------------------------------------------------------------ | ---------- |
| `beginSizeFactor` | The Initial Size Factor Animation Value | `double` |
| `endSizeFactor` | The End Size Factor Animation Value | `double` |
| `curve` | The Animation Curve | `Curve` |
| `duration` | The Animation duration ( need a hot restart to see changes ) | `Duration` |
## Rotation Indexed Stack
### Showcase :
### Code :
```dart
RotationIndexedStack(
beginTurn: 0.0,
endTurn: 1.0,
curve: Curves.easeInOut,
duration: const Duration(milliseconds: 250),
index: 1,
children: const [
Center(
child: Text("Child 1"),
),
Center(
child: Text("Child 2"),
),
],
),
````
#### Properties
| property | Description | type |
| ----------- | ------------------------------------------------------------ | ---------- |
| `beginTurn` | The Initial Rotation Turn Animation Value | `double` |
| `endTurn` | The End Rotation Turn Animation Value | `double` |
| `curve` | The Animation Curve | `Curve` |
| `duration` | The Animation duration ( need a hot restart to see changes ) | `Duration` |
## Shake Indexed Stack
### Showcase :
### Code :
```dart
ShakeIndexedStack(
shakesCount: 100,
shakeFrequency: 0.04,
duration: const Duration(milliseconds: 250),
curve: Curves.slowMiddle,
index: 1,
children: const [
Center(
child: Text("Child 1"),
),
Center(
child: Text("Child 2"),
),
],
),
````
#### Properties
| property | Description | type |
| ---------------- | ------------------------------------------------------------------------------ | ---------- |
| `shakesCount` | This represent how much times a shake should be triggered during the animation | `double` |
| `shakeFrequency` | THis represents the shake frequency | `double` |
| `curve` | The Animation Curve | `Curve` |
| `duration` | The Animation duration ( need a hot restart to see changes ) | `Duration` |