How to disable Slide Icon on last page in Flutter Liquid Swipe? - flutter

Question

Is there any way to disable the slide icon when you reach last page of Liquid Swipe while not looping?
enableSlideIcon: false, //disables slide icon on all pages
I want to hide it from last page only.

Answer 1

You can copy paste run full code below
Step 1: You can use bool slideIcon to control
Step 2: In pageChangeCallback, compare pages.length with lpage then do setState
code snippet
bool slideIcon = true;
...
LiquidSwipe(
enableSlideIcon: slideIcon,
...
pageChangeCallback(int lpage) {
setState(() {
if (lpage == pages.length - 1) {
slideIcon = false;
} else {
slideIcon = true;
}
page = lpage;
});
}
working demo
full code
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:liquid_swipe/liquid_swipe.dart';
void main() {
runApp(
MyApp(),
);
}
class MyApp extends StatefulWidget {
static final style = TextStyle(
fontSize: 30,
fontFamily: "Billy",
fontWeight: FontWeight.w600,
);
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
int page = 0;
LiquidController liquidController;
UpdateType updateType;
bool slideIcon = true;
#override
void initState() {
liquidController = LiquidController();
super.initState();
}
final pages = [
Container(
color: Colors.pink,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Image.network(
'https://picsum.photos/250?image=9',
fit: BoxFit.cover,
),
Padding(
padding: EdgeInsets.all(20.0),
),
Column(
children: <Widget>[
Text(
"Hi",
style: MyApp.style,
),
Text(
"It's Me",
style: MyApp.style,
),
Text(
"Sahdeep",
style: MyApp.style,
),
],
),
],
),
),
Container(
color: Colors.deepPurpleAccent,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Image.network(
'https://picsum.photos/250?image=10',
fit: BoxFit.cover,
),
Padding(
padding: EdgeInsets.all(20.0),
),
Column(
children: <Widget>[
Text(
"Take a",
style: MyApp.style,
),
Text(
"look at",
style: MyApp.style,
),
Text(
"Liquid Swipe",
style: MyApp.style,
),
],
),
],
),
),
Container(
color: Colors.greenAccent,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Image.network(
'https://picsum.photos/250?image=11',
fit: BoxFit.cover,
),
Padding(
padding: EdgeInsets.all(20.0),
),
Column(
children: <Widget>[
Text(
"Liked?",
style: MyApp.style,
),
Text(
"Fork!",
style: MyApp.style,
),
Text(
"Give Star!",
style: MyApp.style,
),
],
),
],
),
),
Container(
color: Colors.yellowAccent,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Image.network(
'https://picsum.photos/250?image=12',
fit: BoxFit.cover,
),
Padding(
padding: EdgeInsets.all(20.0),
),
Column(
children: <Widget>[
Text(
"Can be",
style: MyApp.style,
),
Text(
"Used for",
style: MyApp.style,
),
Text(
"Onboarding Design",
style: MyApp.style,
),
],
),
],
),
),
Container(
color: Colors.redAccent,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Image.network(
'https://picsum.photos/250?image=13',
fit: BoxFit.cover,
),
Padding(
padding: EdgeInsets.all(20.0),
),
Column(
children: <Widget>[
Text(
"Do",
style: MyApp.style,
),
Text(
"Try it",
style: MyApp.style,
),
Text(
"Thank You",
style: MyApp.style,
),
],
),
],
),
),
];
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 Container(
width: 25.0,
child: Center(
child: Material(
color: Colors.white,
type: MaterialType.circle,
child: Container(
width: 8.0 * zoom,
height: 8.0 * zoom,
),
),
),
);
}
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Stack(
children: <Widget>[
LiquidSwipe(
enableSlideIcon: slideIcon,
pages: pages,
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: 500);
},
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);
},
child: Text("Next"),
color: Colors.white.withOpacity(0.01),
),
),
)
],
),
),
);
}
pageChangeCallback(int lpage) {
setState(() {
if (lpage == pages.length - 1) {
slideIcon = false;
} else {
slideIcon = true;
}
page = lpage;
});
}
}