liquid_swipe_flutter icon indicating copy to clipboard operation
liquid_swipe_flutter copied to clipboard

I would like to dynamically load data

Open Guo8a opened this issue 1 year ago • 4 comments

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,
    );
  }
}

Guo8a avatar May 29 '23 08:05 Guo8a

Hey, Thanks for creating the first issue. I will respond in a day or two. If doesn't, feel free to ping me.

github-actions[bot] avatar May 29 '23 08:05 github-actions[bot]

@iamSahdeep

Guo8a avatar Jun 15 '23 03:06 Guo8a

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 avatar Jun 17 '23 07:06 iamSahdeep

@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.🙏

Guo8a avatar Jun 19 '23 09:06 Guo8a