Skip to content

Instantly share code, notes, and snippets.

@iamSahdeep

iamSahdeep/liquid_swipe_example.dart

Created May 7, 2021 14:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save iamSahdeep/fc40e8cd6531aba4e548b30592d9cce0 to your computer and use it in GitHub Desktop.
Save iamSahdeep/fc40e8cd6531aba4e548b30592d9cce0 to your computer and use it in GitHub Desktop.
Download ZIP
A liquid swipe example gist
Raw
liquid_swipe_example.dart
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:liquid_swipe/liquid_swipe.dart';
import 'package:flutter/scheduler.dart' show timeDilation;
void main() {
/// Comment or uncomment to run both examples
runApp(
//WithBuilder(),
WithPages()
);
}
///Class to hold data for itembuilder in Withbuilder app.
class ItemData{
final Color color;
final String image;
final String text1;
final String text2;
final String text3;
ItemData(this.color, this.image, this.text1, this.text2, this.text3);
}
/// Example of LiquidSwipe with itemBuilder
class WithBuilder extends StatefulWidget {
@override
_WithBuilder createState() => _WithBuilder();
}
class _WithBuilder extends State<WithBuilder> {
int page = 0;
LiquidController liquidController;
UpdateType updateType;
List<ItemData> data = [
ItemData(Colors.blue, "assets/1.png", "Hi", "It's Me", "Sahdeep"),
ItemData(Colors.deepPurpleAccent, "assets/1.png", "Take a", "Look At", "Liquid Swipe"),
ItemData(Colors.green, "assets/1.png", "Liked?", "Fork!", "Give Star!"),
ItemData(Colors.yellow, "assets/1.png", "Can be", "Used for", "Onboarding design"),
ItemData(Colors.red, "assets/1.png", "Do", "try it", "Thank you"),
];
@override
void initState() {
liquidController = LiquidController();
super.initState();
}
Widget _buildDot(int index) {
double selectedness = Curves.easeOut.transform(
max(
0.0,
1.0 - ((page ?? 0) - index).abs(),
),
);
double zoom = 1.0 + (2.0 - 1.0) * selectedness;
return new Container(
width: 25.0,
child: new Center(
child: new Material(
color: Colors.white,
type: MaterialType.circle,
child: new Container(
width: 8.0 * zoom,
height: 8.0 * zoom,
),
),
),
);
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Stack(
children: <Widget>[
LiquidSwipe.builder(
itemCount: data.length,
itemBuilder: (context, index){
return Container(
color: data[index].color,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Image.asset(
data[index].image,
fit: BoxFit.cover,
),
Padding(
padding: EdgeInsets.all(20.0),
),
Column(
children: <Widget>[
Text(
data[index].text1,
style: WithPages.style,
),
Text(
data[index].text2,
style: WithPages.style,
),
Text(
data[index].text3,
style: WithPages.style,
),
],
),
],
),
);
},
positionSlideIcon: 0.8,
slideIconWidget: Icon(Icons.arrow_back_ios),
onPageChangeCallback: pageChangeCallback,
waveType: WaveType.liquidReveal,
liquidController: liquidController,
ignoreUserGestureWhileAnimating: true,
),
Padding(
padding: EdgeInsets.all(20),
child: Column(
children: <Widget>[
Expanded(child: SizedBox()),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: List<Widget>.generate(data.length, _buildDot),
),
],
),
),
Align(
alignment: Alignment.bottomRight,
child: Padding(
padding: const EdgeInsets.all(25.0),
child: FlatButton(
onPressed: () {
liquidController.animateToPage(
page: data.length - 1, duration: 700);
},
child: Text("Skip to End"),
color: Colors.white.withOpacity(0.01),
),
),
),
Align(
alignment: Alignment.bottomLeft,
child: Padding(
padding: const EdgeInsets.all(25.0),
child: FlatButton(
onPressed: () {
liquidController.jumpToPage(
page:
liquidController.currentPage + 1 > data.length - 1
? 0
: liquidController.currentPage + 1);
},
child: Text("Next"),
color: Colors.white.withOpacity(0.01),
),
),
)
],
),
),
);
}
pageChangeCallback(int lpage) {
setState(() {
page = lpage;
});
}
}
///Example of App with LiquidSwipe by providing list of widgets
class WithPages extends StatefulWidget {
static final style = TextStyle(
fontSize: 30,
fontFamily: "Billy",
fontWeight: FontWeight.w600,
);
@override
_WithPages createState() => _WithPages();
}
class _WithPages extends State<WithPages> {
int page = 0;
LiquidController liquidController;
UpdateType updateType;
bool _checked_1 = false, _checked_2 = false, _checked_3 = false, _checked_4 = false, _checked_5 = false;
@override
void initState() {
liquidController = LiquidController();
super.initState();
}
Widget _buildDot(int index) {
double selectedness = Curves.easeOut.transform(
max(
0.0,
1.0 - ((page ?? 0) - index).abs(),
),
);
double zoom = 1.0 + (2.0 - 1.0) * selectedness;
return new Container(
width: 25.0,
child: new Center(
child: new Material(
color: Colors.white,
type: MaterialType.circle,
child: new Container(
width: 8.0 * zoom,
height: 8.0 * zoom,
),
),
),
);
}
@override
Widget build(BuildContext context) {
final pages = [
Container(
color: Colors.deepOrangeAccent,
child: Padding(
padding: const EdgeInsets.only(left: 0, top: 200, right: 0, bottom: 15),
child: Column(
children: <Widget>[
Column(
children: <Widget>[
Stack(
children: [
Align(
alignment: Alignment.center,
child: Image(
height: 75,
image: AssetImage(
'assets/1.png'
)
),
),
Padding(
padding: const EdgeInsets.only(left: 15, top: 10, right: 20, bottom: 0),
child: Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.blueAccent)
),
child: CheckboxListTile(
title: Text("I'm over 18 years old."),
secondary: Icon(Icons.accessibility_new),
controlAffinity: ListTileControlAffinity.leading,
value: _checked_1,
onChanged: (bool val) {
setState(() {
_checked_1 = val;
timeDilation = val ? 4.0 : 2.75;
});
},
// activeColor: Colors.green,
// checkColor: Colors.blue,
),
),
),
],
),
Stack(
children: [
Align(
alignment: Alignment.center,
child: Image(
height: 75,
image: AssetImage(
'assets/1.png'
)
),
),
Padding(
padding: const EdgeInsets.only(left: 15, top: 10, right: 20, bottom: 0),
child: CheckboxListTile(
title: Text("I agree to the term of use."),
secondary: Icon(Icons.miscellaneous_services),
controlAffinity: ListTileControlAffinity.leading,
value: _checked_2,
onChanged: (bool val) {
setState(() {
_checked_2 = val;
timeDilation = val ? 4.0 : 2.75;
});
},
// activeColor: Colors.green,
// checkColor: Colors.blue,
),
),
],
),
Stack(
children: [
Align(
alignment: Alignment.center,
child: Image(
height: 75,
image: AssetImage(
'assets/1.png'
)
),
),
Padding(
padding: const EdgeInsets.only(left: 15, top: 10, right: 20, bottom: 0),
child: CheckboxListTile(
title: Text("I agree to the privacy policy."),
secondary: Icon(Icons.privacy_tip),
controlAffinity: ListTileControlAffinity.leading,
value: _checked_3,
onChanged: (bool val) {
setState(() {
_checked_3 = val;
timeDilation = val ? 4.0 : 2.75;
});
},
// activeColor: Colors.green,
// checkColor: Colors.blue,
),
),
],
),
Stack(
children: [
Align(
alignment: Alignment.center,
child: Image(
height: 75,
image: AssetImage(
'assets/1.png'
)
),
),
Padding(
padding: const EdgeInsets.only(left: 15, top: 10, right: 20, bottom: 0),
child: CheckboxListTile(
title: Text("Enable notifications."),
secondary: Icon(Icons.notifications_active),
controlAffinity: ListTileControlAffinity.leading,
value: _checked_4,
onChanged: (bool val) {
setState(() {
_checked_4 = val;
timeDilation = val ? 4.0 : 2.75;
});
},
// activeColor: Colors.green,
// checkColor: Colors.blue,
),
),
],
),
Stack(
children: [
Align(
alignment: Alignment.center,
child: Image(
height: 75,
image: AssetImage(
'assets/1.png'
)
),
),
Padding(
padding: const EdgeInsets.only(left: 15, top: 10, right: 20, bottom: 0),
child: CheckboxListTile(
title: Text("I declare that:\n Lidor Is The best!"),
secondary: Icon(Icons.accessibility_new),
controlAffinity: ListTileControlAffinity.leading,
value: _checked_5,
onChanged: (bool val) {
setState(() {
_checked_5 = val;
timeDilation = val ? 4.0 : 2.75;
});
},
// activeColor: Colors.green,
// checkColor: Colors.blue,
),
),
],
),
],
), // Body
],
),
),
),
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: EdgeInsets.all(20.0),
),
Column(
children: <Widget>[
Text(
"Take a",
style: WithPages.style,
),
Text(
"look at",
style: WithPages.style,
),
Text(
"Liquid Swipe",
style: WithPages.style,
),
],
),
],
),
),
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: EdgeInsets.all(20.0),
),
Column(
children: <Widget>[
Text(
"Liked?",
style: WithPages.style,
),
Text(
"Fork!",
style: WithPages.style,
),
Text(
"Give Star!",
style: WithPages.style,
),
],
),
],
),
),
Container(
color: Colors.yellowAccent,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Image.asset(
'assets/1.png',
fit: BoxFit.cover,
),
Padding(
padding: EdgeInsets.all(20.0),
),
Column(
children: <Widget>[
Text(
"Can be",
style: WithPages.style,
),
Text(
"Used for",
style: WithPages.style,
),
Text(
"Onboarding Design",
style: WithPages.style,
),
],
),
],
),
),
Container(
color: Colors.redAccent,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Image.asset(
'assets/1.png',
fit: BoxFit.cover,
),
Padding(
padding: EdgeInsets.all(20.0),
),
Column(
children: <Widget>[
Text(
"Do",
style: WithPages.style,
),
Text(
"Try it",
style: WithPages.style,
),
Text(
"Thank You",
style: WithPages.style,
),
],
),
],
),
),
];
return MaterialApp(
home: Scaffold(
body: Stack(
children: <Widget>[
LiquidSwipe(
pages: pages,
positionSlideIcon: 0.8,
slideIconWidget: Icon(Icons.arrow_back_ios),
onPageChangeCallback: pageChangeCallback,
waveType: WaveType.liquidReveal,
liquidController: liquidController,
ignoreUserGestureWhileAnimating: true,
),
Padding(
padding: EdgeInsets.all(20),
child: Column(
children: <Widget>[
Expanded(child: SizedBox()),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: List<Widget>.generate(pages.length, _buildDot),
),
],
),
),
Align(
alignment: Alignment.bottomRight,
child: Padding(
padding: const EdgeInsets.all(25.0),
child: FlatButton(
onPressed: () {
liquidController.animateToPage(
page: pages.length - 1, duration: 700);
},
child: Text("Skip to End"),
color: Colors.white.withOpacity(0.01),
),
),
),
Align(
alignment: Alignment.bottomLeft,
child: Padding(
padding: const EdgeInsets.all(25.0),
child: FlatButton(
onPressed: () {
liquidController.jumpToPage(
page:
liquidController.currentPage + 1 > pages.length - 1
? 0
: liquidController.currentPage + 1);
},
child: Text("Next"),
color: Colors.white.withOpacity(0.01),
),
),
)
],
),
),
);
}
pageChangeCallback(int lpage) {
setState(() {
page = lpage;
});
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment