Flutter & Firebase streamBuilder paginantion - PullRequest
Новая
       66

Flutter & Firebase streamBuilder paginantion

4 голосов
/ 24 января 2020

, поэтому я искал способ добавить нумерацию страниц в мое приложение " Чат " уже более недели, но все равно не повезло: (

это мой код 

Widget build(BuildContext context) {
return StreamBuilder(
  //TODO add pagination later...

  stream: widget.messageDocRef
      .collection("Chat")
      .orderBy('timestamp', descending: true)
      .limit(15)
      .snapshots(),

  builder: (BuildContext context, AsyncSnapshot snapshot) {
    if (!snapshot.hasData) {
      return Center(
        child: circularProgress(),
      );
    }
    final messages = snapshot.data.documents;
    for (int i = 0; i < snapshot.data.documents.length; i++) {
      DocumentSnapshot doc = snapshot.data.documents.elementAt(i);
      print(doc.metadata.isFromCache
          ? "DATA FROM CACHE"
          : "DATA FROM INTERNET");
    }

    List<MessageBubble> messagesBubble = [];
    for (var message in messages) {
      final docId = message.documentID;

      final messageText = message.data['content'];

      final messageSender = message.data['from'];

      final messageType = message.data['type'];

      final messageBubble = MessageBubble(
        messageDocRef: widget.messageDocRef,
        docId: docId,
        type: messageType,
        text: messageText,
        isMe: widget.currentUser.id == messageSender,
      );
      messagesBubble.add(messageBubble);
    }
    return Expanded(
      child: ListView(
        physics: const AlwaysScrollableScrollPhysics(),
        reverse: true,
        controller: this._scrollController,
        padding: EdgeInsets.symmetric(vertical: 20.0, horizontal: 10.0),
        children: messagesBubble,
      ),
    );
  },
);}

Мое состояние инициализации 

void initState() {
super.initState();
_scrollController.addListener(() {
  double maxScroll = _scrollController.position.maxScrollExtent;
  double currentScroll = _scrollController.position.pixels;
  if (maxScroll == currentScroll) {
    print("get more products");
  }
});}

MessageBubble - это класс для отображения каждого сообщения в отдельном пузыре.

До теперь все работает отлично! .. но мне нужно реализовать разбиение на страницы и не потерять обновление StreamBuilder в реальном времени («Отображение нового сообщения», «Удаление удаленных сообщений» ... et c).

Я буквально не знаю, как мне это сделать, я попробовал , используя несколько запросов все еще не повезло.

Я хочу, чтобы пользователь быть в состоянии видеть старые сообщения , когда он прокручивает вверх и видеть новые сообщения , когда он прокручивает вниз .

HELP !!!

Ответы [ 2 ]

1 голос
/ 25 января 2020

Вы пробовали этот метод или этот один ?

Не ограничивайте документы, сделайте их переменными и можно обновлять каждый раз.

0 голосов
/ 15 апреля 2020

Сделайте ваш поток примерно таким ... 

int _limit = 20;
...
stream: widget.messageDocRef
      .collection("Chat")
      .orderBy('timestamp', descending: true)
      .limit(_limit)
      .snapshots(),

Затем добавьте этот слушатель в свой scrollController: 

final ScrollController _scrollController = new ScrollController();
...
void initState() {
   _scrollController.addListener(_scrollListener);
}
...
void _scrollListener() {
  if (_scrollController.offset >= _scrollController.position.maxScrollExtent &&
      !_scrollController.position.outOfRange) {
    print("at the end of list");
    setState(() {
        _limit +=20;
    });
  }
}

...
ListView(
   ...
   controller: _scrollController
   ...
)

Я до сих пор не понимаю, как поставить прогресс индикатор в конце экрана, но это лучшая работа, о которой я только могу подумать.

...