About the project
Shop app with soft, eye-pleasing design and smooth custom Flutter animations.
This project includes custom-made animations using standard Flutter tools such as implicit and explicit animations.
Features
- Soft, eye-pleasing design.
- Animated splash screen.
- Transition animations.
- Switch product animation.
Splash screen animation
_secondController = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 500),
);
_mainController = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 500),
)..animateTo(3).then(
(_) {
_mainController.reverse();
_secondController.animateTo(1).then((_) {
if (widget.onAnimationFinish != null) {
widget.onAnimationFinish!();
}
});
},
);
}
vsync: this,
duration: const Duration(milliseconds: 500),
);
_mainController = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 500),
)..animateTo(3).then(
(_) {
_mainController.reverse();
_secondController.animateTo(1).then((_) {
if (widget.onAnimationFinish != null) {
widget.onAnimationFinish!();
}
});
},
);
}
_animation =
CurvedAnimation(parent: _mainController, curve: Curves.easeInQuad);
CurvedAnimation(parent: _mainController, curve: Curves.easeInQuad);
Product initial animation
_secondScaleController = AnimationController(
vsync: this, duration: const Duration(milliseconds: 600));
_secondScaleController.forward();
vsync: this, duration: const Duration(milliseconds: 600));
_secondScaleController.forward();
_secondScaleController.drive(
Tween<double>(end: 0, begin: 200),
),
Tween<double>(end: 0, begin: 200),
),
Switch product animation
GestureDetector(
onPanUpdate: (DragUpdateDetails details) {
// Swiping in right direction.
if (details.delta.dx > 0) {
if (reversed) {
controller.forward();
} else {
controller.reverse();
}
}
// Swiping in left direction.
if (details.delta.dx < 0) {
if (reversed) {
controller.reverse();
} else {
controller.forward();
}
}
},
child: child,
);
onPanUpdate: (DragUpdateDetails details) {
// Swiping in right direction.
if (details.delta.dx > 0) {
if (reversed) {
controller.forward();
} else {
controller.reverse();
}
}
// Swiping in left direction.
if (details.delta.dx < 0) {
if (reversed) {
controller.reverse();
} else {
controller.forward();
}
}
},
child: child,
);
Built with
- Flutter - Beautiful native apps in record time.
- IntelliJ IDEA - Code Editing.
- Clean Architecture - To separate architecture into loosely coupled layers.
- Flutter BloC - State Management for separating the UI from Business Logic.
- Get It - Dependency Injection.
Getting Started
Step 1:
Download or clone this repo by using the link below:
https://github.com/TBR-Group-software/flutter_custom_animation
Step 2:
Go to project root and execute the following command in console to get the required dependencies:
flutter pub get
License
This project is licensed under the GNU GPL v3 License - see the LICENSE.md file for details.