Demonstrates how to use the liquid_swipe plugin.
-
Add this to your pubspec.yaml
dependencies: liquid_swipe: ^1.1.0
-
Get package from Pub:
flutter packages get
-
Import it in your file
import 'package:liquid_swipe/liquid_swipe.dart';
- First, create a list of Containers.
final pages = [
Container(
color: Colors.pink,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Image.asset(
'assets/1.png',
fit: BoxFit.cover,
),
Padding(padding: const EdgeInsets.all(20.0)),
Column(
children: <Widget>[
new Text(
"Hi",
style: TextStyle(
fontSize: 30,
fontFamily: "Billy",
fontWeight: FontWeight.w600),
),
new Text(
"It's Me",
style: TextStyle(
fontSize: 30,
fontFamily: "Billy",
fontWeight: FontWeight.w600),
),
new Text(
"Sahdeep",
style: TextStyle(
fontSize: 30,
fontFamily: "Billy",
fontWeight: FontWeight.w600),
),
],
)
],
),
),
Container(
color: Colors.deepPurpleAccent,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Image.asset(
'assets/1.png',
fit: BoxFit.cover,
),
Padding(padding: const EdgeInsets.all(20.0)),
Column(
children: <Widget>[
new Text(
"Take a",
style: TextStyle(
fontSize: 30,
fontFamily: "Billy",
fontWeight: FontWeight.w600),
),
new Text(
"look at",
style: TextStyle(
fontSize: 30,
fontFamily: "Billy",
fontWeight: FontWeight.w600),
),
new Text(
"Liquid Swipe",
style: TextStyle(
fontSize: 30,
fontFamily: "Billy",
fontWeight: FontWeight.w600),
),
],
)
],
),
),
Container(
color: Colors.greenAccent,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Image.asset(
'assets/1.png',
fit: BoxFit.cover,
),
Padding(padding: const EdgeInsets.all(20.0)),
Column(
children: <Widget>[
new Text(
"Liked?",
style: TextStyle(
fontSize: 30,
fontFamily: "Billy",
fontWeight: FontWeight.w600),
),
new Text(
"Fork!",
style: TextStyle(
fontSize: 30,
fontFamily: "Billy",
fontWeight: FontWeight.w600),
),
new Text(
"Give Star!",
style: TextStyle(
fontSize: 30,
fontFamily: "Billy",
fontWeight: FontWeight.w600),
),
],
)
],
),
),
];
- Second, just pass it to Liquid Swipe Widget.
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
body: LiquidSwipe(
pages: pages,
fullTransitionValue: 500,
enableSlideIcon: true,
)));
}
- Remember pages can only be containers.
- More Examples might come soon.
This project is a starting point for a Flutter application.
A few resources to get you started if this is your first Flutter project:
For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.