Liquid swipe is the revealing clipper to stacked Container and inspired by Cuberto's liquid swipe and IntroViews.
-
Add this to your pubspec.yaml
dependencies: liquid_swipe: ^1.0.2 -
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 liquidswipe constructor.
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: Builder(
builder: (context) =>
LiquidSwipe(
pages: pages
)),
);
}
- Remember pages can only be containers.
- Check out the complete Example
- Cuberto for awesome Liquid Swipe in Swift.
- @aagarwal1012 for IntroViews, It made my work too less.
This project is created by Sahdeep Singh but with lots of support and help. See the Credits.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent