Как реализовать разбиение на страницы с использованием Flutter и Firebase? - PullRequest
Новая
       91

Как реализовать разбиение на страницы с использованием Flutter и Firebase?

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

Ответ на предыдущий вопрос стека - Пагинация Firebase во флаттере - был довольно скудным, потому что он не go по сравнению с реальной логикой c нумерации страниц, поэтому я открываю новый вопрос.

Это мой код: 


import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class MainList extends StatefulWidget {
  @override
  _ListState createState() => _ListState();
}

class _ListState extends State<MainList> {
  ScrollController _scrollController = new ScrollController(
    initialScrollOffset: -50,
  );


  _scrollToEnd() async {
    _scrollController.animateTo(_scrollController.position.minScrollExtent,
        duration: Duration(milliseconds: 400), curve: Curves.ease);
  }


  @override
  Widget build(BuildContext context) {

    WidgetsBinding.instance.addPostFrameCallback((_) => _scrollToEnd());
    return Stack(children: <Widget>[
      StreamBuilder(
          //this sorts by timestamp
          stream: Firestore.instance
              .collection('mainlist')
              .orderBy("time", descending: true)
              .limit(7)
              .snapshots(),
          builder: (context, snapshot) {


            //this is listening to see if the list is scrolled to the top, and then it will add more elements
            _scrollController..addListener(() {
              if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent) {
                setState(() {
                  print("hi"); //right now it just prints hi
                });
              }
            });

            if (!snapshot.hasData) return const Text("Loading...");
            return ListView.builder(
                reverse: true,
                controller: _scrollController,
                itemCount: snapshot.data.documents.length,
                padding: EdgeInsets.only(left: 8, right: 8, top: 50),
                itemBuilder: (BuildContext context, int index) {
                  return new Container(
                    child: getCard(context, snapshot.data.documents[index]), //don't worry about this in your answer
                  );
                });
          }),

      Column(children: <Widget>[
        Padding(
          padding: EdgeInsets.only(
              top: MediaQuery.of(context).size.height -
                  240), //240 with no padding, 270 with padding
        ),
        Row(children: <Widget>[
          Padding(
            padding:
                EdgeInsets.only(left: MediaQuery.of(context).size.width - 90),
          ),
          Stack(children: <Widget>[
            GestureDetector(
              onTap: () {
                //this is the scroll state
                setState(() {
                  _scrollController.animateTo(
                    _scrollController.position.maxScrollExtent,
                    curve: Curves.easeOut,
                    duration: const Duration(milliseconds: 300),
                  );
                });
              },
              child: Container(
                height: 70,
                width: 70,
                decoration: BoxDecoration(
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black54,
                      blurRadius: 12.5,
                      // has the effect of softening the shadow
                      spreadRadius: 4.0,
                      // has the effect of extending the shadow
                      offset: Offset(
                        5.0, // horizontal, move right 10
                        5.0, // vertical, move down 10
                      ),
                    )
                  ],
                  color: Colors.purpleAccent,
                  shape: BoxShape.circle,
                ),
                child: Icon(
                  Icons.arrow_downward,
                  //size: 20,
                ),
              ),
            ),
          ])
        ])
      ]),

}

В этом коде я ссылаюсь на список документов из Cloud Firestore (Firebase) под названием «mainlist», и я Я строю его с помощью StreamBuilder. Мой вопрос, как мне разбить на страницы с помощью StreamBuilder и Firebase? Документация для этого довольно скудная. Я просто хочу прокрутить вверх и получить список загрузки нескольких новых элементов (сейчас он просто печатает «привет» в консоли) после последнего загруженного в данный момент элемента.

Я проверил страницу пагинации Firebase, но у них есть решения только для сети, Swift, et c. Это может помочь в вашем ответе: https://www.c-sharpcorner.com/article/pagination-in-flutter-using-firebase-cloud-firestore/ или https://blog.solutelabs.com/paginate-your-data-in-flutter-7744995febd1

Скажите, пожалуйста, что мне нужно сделать, чтобы лениво загрузить следующие элементы и добавить их в текущий загруженный список! Спасибо!

(Если бы вы могли предоставить код, который был бы великолепен!)

...