liquid_swipe_flutter
liquid_swipe_flutter copied to clipboard
I would like to dynamically load data
For example, my initial datasource only has three elements [1, 2, 3], with an initial index of 1. When I swipe to the 0th page, I hope to insert an element "first - 1" at the beginning of the datasource, making it [0, 1, 2, 3]. Similarly, when I swipe to the last page, I hope to append an element "last + 1" to the end of the datasource, making it [0, 1, 2, 3, 4]. Can this functionality be supported?
Code below work error:
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:liquid_swipe/liquid_swipe.dart';
void main() {
runApp(WithBuilder());
}
class ItemData {
final Color color;
final String image;
final String text1;
ItemData(this.color, this.image, this.text1);
}
class WithBuilder extends StatefulWidget {
@override
_WithBuilder createState() => _WithBuilder();
}
class _WithBuilder extends State<WithBuilder> {
late LiquidController liquidController;
List<ItemData> data = [
ItemData(_getRandomColor(), 'assets/1.png', '0'),
ItemData(_getRandomColor(), 'assets/2.png', '1'),
ItemData(_getRandomColor(), 'assets/1.png', '2'),
];
static Color _getRandomColor() {
return Color.fromRGBO(
Random().nextInt(256),
Random().nextInt(256),
Random().nextInt(256),
1,
);
}
@override
void initState() {
liquidController = LiquidController();
super.initState();
}
TextStyle getFontStyle(Color color) {
return GoogleFonts.anybody(
color: color.lightColor,
fontSize: 43,
fontWeight: FontWeight.w900,
);
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Stack(
children: <Widget>[
LiquidSwipe.builder(
initialPage: 1,
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,
),
Column(
children: <Widget>[
Text(
data[index].text1,
style: getFontStyle(data[index].color),
),
],
),
],
),
);
},
positionSlideIcon: 0.8,
slideIconWidget: null,
onPageChangeCallback: pageChangeCallback,
waveType: WaveType.liquidReveal,
liquidController: liquidController,
fullTransitionValue: 880,
enableSideReveal: true,
preferDragFromRevealedArea: true,
enableLoop: false,
ignoreUserGestureWhileAnimating: true,
),
],
),
),
);
}
pageChangeCallback(int lpage) {
print('pageChangeCallback = $lpage');
if (lpage == 0) {
// index -= 1;
data.insert(
0,
ItemData(_getRandomColor(), 'assets/1.png', '${lpage - 1}'),
);
} else if (lpage == data.length - 1) {
data.add(
ItemData(_getRandomColor(), 'assets/1.png', '${lpage + 1}'),
);
}
setState(() {});
}
}
extension ColorExtension on Color {
Color get lightColor {
return Color.fromARGB(
alpha,
255 - red,
255 - green,
255 - blue,
);
}
}
Hey, Thanks for creating the first issue. I will respond in a day or two. If doesn't, feel free to ping me.
@iamSahdeep
Hi @Apach3Q Thanks for reminding me. For now it doesn’t have a capability to add item dynamically. I can work on it for sure but cant commit any timeline.
@iamSahdeep Thank you for your reply. I understand that the library currently doesn't support adding items dynamically. However, I would like to express my strong interest in having this feature added in the future. I appreciate your willingness to work on it and I completely understand that you cannot commit to a specific timeline at this point. I just wanted to let you know that I really like your library and I think it would be even better with the ability to dynamically add items. Thanks again for your contribution to the community, and I look forward to any updates on this matter.🙏