Flutter – Liquid Swipe Animation
Liquid Swipe animation is used to slide the page like water which show different design and pattern on the screen. It creates a floating state. Liquid Swipe animation is a significantly trending design procedure. Movement can help keep clients inspired by your UI design longer and more motivated to collaborate with content. This method provides the app with a smooth look in a new way.
Follow the below steps to implement the Liquid Swipe Animation:
Step 1: Create a Flutter App using the command:
flutter create liquid_swipe
Note: You can give any name to your app.
Step 2: Create a file in main.dart and home.dart to write code.
Step 3: Import the liquid_swipe dependency into the main.dart file using the below code:
import 'package:liquid_swipe/liquid_swipe.dart';
import 'package:flutter/src/material/icons.dart';
Step 4: Add the dependency to your pubspec.yaml file as shown below:
Update with NULL safety
Add dependencies:
liquid_swipe: ^2.1.1
Get the package from Pub:
flutter packages get
Step 5: In the LiquidSwipe() method we need to add pages, fullTransitionValue, waveType, positionSlideIcon, enableSlideIcon which are the attributes of the LiquidSwipe() method as shown below:
body:LiquidSwipe(
pages: page,
enableLoop: true,
fullTransitionValue: 300,
enableSlideIcon: true,
waveType: WaveType.liquidReveal,
positionSlideIcon: 0.5,
),
In the main.dart file we have a main() function which calls runApp() by taking any widget as an argument to create the layout. We have the home as MyliquidSwipe() which is a stateful class(Mutable class) as shown below:
Dart
import 'package:flutter/material.dart' ;
import './liquid_swipe.dart' ;
void main() {
runApp(
MaterialApp(
title: "My Ani" ,
home: MyliquidSwipe(),
),
);
}
|
- Step 6: We will add images in the assets folder. All the images you need on-screen you can add there. Activate assets in pubspec .yaml file as shown below:
assets:
- assets/
Complete Source Code:
Dart
import 'package:flutter/material.dart' ;
import 'package:liquid_swipe/liquid_swipe.dart' ;
import 'package:flutter/src/material/icons.dart' ;
class MyliquidSwipe extends StatelessWidget {
@override
Widget build(BuildContext context) {
final page = [
Container(
color:Colors.brown,
child: Padding(
padding: const EdgeInsets.all(100.0),
child: Center(
child: Column(
children:<Widget>[
Text( "Welcome To GeeksforGeeks" ,style:TextStyle(
fontSize: 30,
color:Colors.green[600],
),
),
]
),
),
),),
Container(color:Colors.yellow[100],
child: Padding(
padding: const EdgeInsets.all(120.0),
child: Center(
child: Column(
children:<Widget>[
Image.asset( "assets/save.png" ),
Text( "" ,style:TextStyle(
fontSize: 20,
color:Colors.green,
),
)
]
),),
),),
Container(color: Colors.blue[100],
child: Padding(
padding: const EdgeInsets.all(100.0),
child: Center(
child: Column(
children:<Widget>[
Text(" GeeksforGeeks A Computer Science portal
for geeks",
style:TextStyle(
fontSize:30 ,
color:Colors.green[600],
),
),
]),),
))
];
return Scaffold(
body: LiquidSwipe(
enableLoop: false ,
pages: page,
slideIconWidget: Icon(Icons.arrow_back_ios),
),
);
}
}
|
Output:
Last Updated :
20 Jun, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...