liquid_swipe 3.1.0 
liquid_swipe: ^3.1.0 copied to clipboard
sahdeepsingh.comA Flutter plugin to implement liquid Swipe effect to provided widgets.
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:liquid_swipe/liquid_swipe.dart';
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;
late LiquidController liquidController;
late 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.pink, "assets/1.png", "Example", "of a page", "with Gesture"),
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) - 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(
width: double.infinity,
color: data[index].color,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Image.asset(
data[index].image,
height: 300,
fit: BoxFit.contain,
),
Padding(
padding: EdgeInsets.all(index != 4 ? 24.0 : 0),
),
index == 4
? Padding(
padding:
const EdgeInsets.symmetric(horizontal: 70.0),
child: ExampleSlider(),
)
: SizedBox.shrink(),
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,
fullTransitionValue: 880,
enableSideReveal: true,
preferDragFromRevealedArea: true,
enableLoop: true,
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: TextButton(
onPressed: () {
liquidController.animateToPage(
page: data.length - 1, duration: 700);
},
child: Text("Skip to End"),
style: TextButton.styleFrom(
backgroundColor: Colors.white.withOpacity(0.01),
foregroundColor: Colors.black),
),
),
),
Align(
alignment: Alignment.bottomLeft,
child: Padding(
padding: const EdgeInsets.all(25.0),
child: TextButton(
onPressed: () {
liquidController.jumpToPage(
page: liquidController.currentPage + 1 > data.length - 1
? 0
: liquidController.currentPage + 1);
},
child: Text("Next"),
style: TextButton.styleFrom(
backgroundColor: Colors.white.withOpacity(0.01),
foregroundColor: Colors.black),
),
),
)
],
),
),
);
}
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;
late LiquidController liquidController;
late UpdateType updateType;
final pages = [
Container(
color: Colors.blue,
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(24.0),
),
Column(
children: <Widget>[
Text(
"Hi",
style: WithPages.style,
),
Text(
"It's Me",
style: WithPages.style,
),
Text(
"Sahdeep",
style: WithPages.style,
),
],
),
],
),
),
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(24.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.green,
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(24.0),
),
Column(
children: <Widget>[
Text(
"Liked?",
style: WithPages.style,
),
Text(
"Fork!",
style: WithPages.style,
),
Text(
"Give Star!",
style: WithPages.style,
),
],
),
],
),
),
Container(
color: Colors.yellow,
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(24.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.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.symmetric(horizontal: 70.0),
child: ExampleSlider(),
),
Column(
children: <Widget>[
Text(
"Example",
style: WithPages.style,
),
Text(
"of a page",
style: WithPages.style,
),
Text(
"with Gesture",
style: WithPages.style,
),
],
),
],
),
),
Container(
color: Colors.red,
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(24.0),
),
Column(
children: <Widget>[
Text(
"Do",
style: WithPages.style,
),
Text(
"Try it",
style: WithPages.style,
),
Text(
"Thank You",
style: WithPages.style,
),
],
),
],
),
),
];
@override
void initState() {
liquidController = LiquidController();
super.initState();
}
Widget _buildDot(int index) {
double selectedness = Curves.easeOut.transform(
max(
0.0,
1.0 - ((page) - 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(
pages: pages,
positionSlideIcon: 0.8,
fullTransitionValue: 880,
slideIconWidget: Icon(Icons.arrow_back_ios),
onPageChangeCallback: pageChangeCallback,
waveType: WaveType.liquidReveal,
liquidController: liquidController,
preferDragFromRevealedArea: true,
enableSideReveal: true,
ignoreUserGestureWhileAnimating: true,
enableLoop: 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: TextButton(
onPressed: () {
liquidController.animateToPage(
page: pages.length - 1, duration: 700);
},
child: Text("Skip to End"),
style: TextButton.styleFrom(
backgroundColor: Colors.white.withOpacity(0.01),
foregroundColor: Colors.black),
),
),
),
Align(
alignment: Alignment.bottomLeft,
child: Padding(
padding: const EdgeInsets.all(25.0),
child: TextButton(
onPressed: () {
liquidController.jumpToPage(
page:
liquidController.currentPage + 1 > pages.length - 1
? 0
: liquidController.currentPage + 1);
},
child: Text("Next"),
style: TextButton.styleFrom(
backgroundColor: Colors.white.withOpacity(0.01),
foregroundColor: Colors.black),
),
),
)
],
),
),
);
}
pageChangeCallback(int lpage) {
setState(() {
page = lpage;
});
}
}
class ExampleSlider extends StatefulWidget {
const ExampleSlider({Key? key}) : super(key: key);
@override
State<ExampleSlider> createState() => _ExampleSliderState();
}
class _ExampleSliderState extends State<ExampleSlider> {
double sliderVal = 0;
@override
Widget build(BuildContext context) {
return Slider(
value: sliderVal,
activeColor: Colors.white,
inactiveColor: Colors.red,
onChanged: (val) {
setState(() {
sliderVal = val;
});
});
}
}Metadata
1298
likes
150
pub points
97%
popularity
Publisher
Metadata
A Flutter plugin to implement liquid Swipe effect to provided widgets.
Repository (GitHub)
View/report issues
Documentation
License
Apache-2.0 (license)
