Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

I would like to dynamically load data #88

Open
Guo8a opened this issue May 29, 2023 · 4 comments
Open

I would like to dynamically load data #88

Guo8a opened this issue May 29, 2023 · 4 comments

Comments

@Guo8a
Copy link

Guo8a commented May 29, 2023

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

@github-actions
Copy link

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

@Guo8a
Copy link
Author

Guo8a commented Jun 15, 2023

@iamSahdeep

@iamSahdeep
Copy link
Owner

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.

@Guo8a
Copy link
Author

Guo8a commented Jun 19, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants