LiquidUI is a stunning Flutter onboarding experience that showcases the power of liquid swipe animations — featuring smooth, fluid page transitions with vibrant gradients and modern design principles.
This project serves as a comprehensive learning resource for developers exploring advanced Flutter animations, gesture handling, and creating engaging user onboarding flows.
- 🌊 Liquid Swipe Animation — Smooth, fluid page transitions with gesture control
- 🎨 5 Beautiful Screens — Welcome, Features, Analytics, Security, and Get Started
- ✨ Advanced Animations — Fade, slide, and pulse effects for engaging UX
- 🎭 Vibrant Gradients — Eye-catching color schemes for each onboarding page
- 📍 Page Indicators — Clear navigation feedback with animated dots
- 📱 Responsive Design — Adapts seamlessly to different screen sizes
- 🔄 Loop Support — Continuous swiping for smooth navigation
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
Watch the App in action:
liquid.swipe.1.1.mp4
| Technology | Description |
|---|---|
| Flutter | Cross-platform framework for building beautiful apps |
| Dart | Core programming language powering Flutter apps |
| liquid_swipe | Package for fluid swipe animations |
| AnimationController | Handles custom fade and slide transitions |
| Material Design | Modern design principles with gradient aesthetics |
Follow these steps to run the project locally:
git clone https://github.com/<your-username>/liquid-ui-flutter.git
cd liquid-ui-flutterflutter pub getflutter runAdd these to your pubspec.yaml:
dependencies:
flutter:
sdk: flutter
liquid_swipe: ^3.1.0Update colors in each page's LinearGradient:
gradient: LinearGradient(
colors: [
Color(0xFF667eea), // Start color
Color(0xFF764ba2), // End color
],
)Modify animation duration in initState():
_animationController = AnimationController(
duration: Duration(milliseconds: 1000), // Change timing here
vsync: this,
);Customize LiquidSwipe properties:
LiquidSwipe(
enableLoop: true, // Enable continuous swiping
fullTransitionValue: 700, // Swipe sensitivity (lower = more sensitive)
enableSideReveal: true, // Show next page preview
waveType: WaveType.liquidReveal, // Animation style
)By working with this project, you'll gain insights into:
- Building engaging onboarding experiences with Flutter
- Implementing gesture-based navigation with liquid swipe
- Creating custom animations with AnimationController
- Applying modern gradient designs and glassmorphism effects
- Structuring multi-page UI flows effectively
- Managing animation states across page transitions
Contributions are encouraged! If you'd like to enhance the design or functionality:
- Fork the repository
- Create a new branch (
git checkout -b feature/your-feature) - Commit your changes (
git commit -m 'Add a new feature') - Push to the branch (
git push origin feature/your-feature) - Open a Pull Request
This project is built using Flutter. Below are the essential details and configuration requirements:
| Component | Details |
|---|---|
| Flutter Version | 3.27.1+ (Stable Channel) |
| Dart Version | 3.6.0+ |
| liquid_swipe | ^3.1.0 |
| Platforms Supported | Android, iOS, Web, Windows, macOS, Linux |
| Minimum SDK | Android 21+ / iOS 12+ |
- Android Studio 2023.3+ or VS Code with Flutter extensions
- Flutter SDK properly configured in PATH
- Dart DevTools for debugging
For questions, feedback, or collaborations:
If this project inspired you or helped your Flutter learning journey:
- ⭐ Star this repository
- 🍴 Fork it for your own projects
- 📢 Share it with the Flutter community
- 🐛 Report issues or suggest features
Made with ❤️ and Flutter
Creating beautiful experiences, one swipe at a time 🌊