vedartm / paginate_firestore

A flutter package to simplify pagination with firestore data 🗃
https://pub.dev/packages/paginate_firestore
MIT License
113 stars 138 forks source link

Work with Sliver(NestedScrollView) scroll with SliverAppBar not working #36

Closed Pro-A closed 3 years ago

Pro-A commented 4 years ago

hello .. I love your packages but my project need to tab . when I use this package on NestedScrollView but scroll with SliverAppBar not working . if I fixed that by SliverChildListDelegate or any widget has scroll I have another problem with paginate firestore it's get all document in once . how I fixed that ? thank u ...

saifedding commented 4 years ago

i delate the scroll controller from the _buildListView in the class PaginateFirestore and it's work

Pro-A commented 4 years ago

i delate the scroll controller from the _buildListView in the class PaginateFirestore and it's work

how did u do that ? can give me example ? thank u ..

saifedding commented 4 years ago

give me any contact to send you example

azazadev commented 3 years ago

@excogitatr any update about this issue ? @saifedding please share your workaround here

saifedding commented 3 years ago

hi i use extended_nested_scroll_view to save the place when scrolling and dealte the scroll controller from the _buildListView
sdfsd and this is the class sddssd

azazadev commented 3 years ago

hi i use extended_nested_scroll_view to save the place when scrolling and dealte the scroll controller from the _buildListView sdfsd and this is the class sddssd

Thanks for the quick answer !!!! will try

azazadev commented 3 years ago

@saifedding : I'm not able to figure out what is the exact change in _buildListView, anyway I have try to fix the problem by using NestedScrollView instead of CustomScrollView without changing the paginate_firestore package

This is an example of my old implementation using CustomScrollView -> scroll NOT WORK ( anybody can import this main class and try to find a solution, you can reproduce the issue by adding some docs and restart app )

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(),
      title: 'My Flutter App',
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _HomeState();
  }
}

class _HomeState extends State<Home> {
  int _currentIndex = 0;
  final List<Widget> _children = [
    PlaceholderWidget(),
    PlaceholderWidget(),
    PlaceholderWidget()
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _children[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        onTap: onTabTapped,
        currentIndex: _currentIndex,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            title: Text('Search'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            title: Text('Profile'),
          ),
        ],
      ),
    );
  }

  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }
}

class PlaceholderWidget extends StatelessWidget {
  PlaceholderWidget();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      // No appbar provided to the Scaffold, only a body with a
      // CustomScrollView.
      body: CustomScrollView(
        physics: const BouncingScrollPhysics(
            parent: AlwaysScrollableScrollPhysics()),
        slivers: <Widget>[
          // Add the app bar to the CustomScrollView.
          SliverAppBar(
            leading: IconButton(
              iconSize: 30.0,
              icon: const Icon(CupertinoIcons.bars),
              onPressed: () {},
            ),
            actions: <Widget>[
              IconButton(
                iconSize: 30.0,
                icon: const Icon(CupertinoIcons.search),
                onPressed: () {},
              ),
              IconButton(
                iconSize: 30.0,
                icon: const Icon(CupertinoIcons.plus),
                onPressed: () async {
                  await FirebaseFirestore.instance
                      .collection('users2')
                      .add({'name': 'user', 'timestamp': Timestamp.now()});
                },
              ),
            ],
            // Provide a standard title.
            expandedHeight: 100.0,
            flexibleSpace: FlexibleSpaceBar(
              centerTitle: false,
              titlePadding: EdgeInsets.only(top: 15, bottom: 10, left: 15),
              title: Text('Home'),
            ),
            floating: true,
          ),
          CupertinoSliverRefreshControl(
            onRefresh: () async {},
          ),
          SliverList(
            delegate: SliverChildListDelegate(
              <Widget>[
                Container(
                  child: RefreshIndicator(
                    child: PaginateFirestore(
                      shrinkWrap: true,
                      scrollDirection: Axis.vertical,
                      emptyDisplay: Center(child: Text('No Users')),
                      itemsPerPage: 20,
                      //item builder type is compulsory.
                      itemBuilderType: PaginateBuilderType.listView,
                      //Change types accordingly
                      itemBuilder: (index, context, documentSnapshot) =>
                          GestureDetector(
                        child: Text(
                          documentSnapshot.data()['name'],
                          style: TextStyle(fontSize: 30),
                        ),
                      ),
                      // orderBy is compulsory to enable pagination
                      query: FirebaseFirestore.instance.collection('users2'),
                      listeners: [],
                    ),
                    onRefresh: () async {},
                  ),
                )
              ],
            ),
          ),
        ],
      ),
    );
  }
}

This is an example of my new implementation using NestedScrollView -> scroll WORK without package change ( any comment are welcome )

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/cupertino.dart';
import "package:flutter/material.dart";
import 'package:paginate_firestore/bloc/pagination_listeners.dart';
import 'package:paginate_firestore/paginate_firestore.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(),
      title: 'My Flutter App',
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _HomeState();
  }
}

class _HomeState extends State<Home> {
  int _currentIndex = 0;
  final List<Widget> _children = [
    PlaceholderWidget(),
    PlaceholderWidget(),
    PlaceholderWidget()
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _children[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        onTap: onTabTapped,
        currentIndex: _currentIndex,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            title: Text('Search'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            title: Text('Profile'),
          ),
        ],
      ),
    );
  }

  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }
}

class PlaceholderWidget extends StatelessWidget {
  PlaceholderWidget();

  @override
  Widget build(BuildContext context) {
    PaginateRefreshedChangeListener refreshChangeListener =
        PaginateRefreshedChangeListener();
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (context, innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              leading: IconButton(
                iconSize: 30.0,
                icon: const Icon(CupertinoIcons.bars),
                onPressed: () {},
              ),
              actions: <Widget>[
                IconButton(
                  iconSize: 30.0,
                  icon: const Icon(CupertinoIcons.search),
                  onPressed: () {},
                ),
                IconButton(
                  iconSize: 30.0,
                  icon: const Icon(CupertinoIcons.plus),
                  onPressed: () async {
                    await FirebaseFirestore.instance
                        .collection('users2')
                        .add({'name': 'user', 'timestamp': Timestamp.now()});
                  },
                ),
              ],
              // Provide a standard title.
              expandedHeight: 100.0,

              flexibleSpace: FlexibleSpaceBar(
                centerTitle: false,
                titlePadding: EdgeInsets.only(top: 15, bottom: 10, left: 15),
                title: Text('Home'),
              ),

              floating: true,
            ),
            CupertinoSliverRefreshControl(
              onRefresh: () async {},
            ),
          ];
        },
        body: RefreshIndicator(
          child: PaginateFirestore(
            shrinkWrap: true,
            scrollDirection: Axis.vertical,
            emptyDisplay: Center(child: Text('No Users')),
            itemsPerPage: 20,
            //item builder type is compulsory.
            itemBuilderType: PaginateBuilderType.listView,
            //Change types accordingly
            itemBuilder: (index, context, documentSnapshot) => GestureDetector(
              child: Text(
                documentSnapshot.data()['name'],
                style: TextStyle(fontSize: 30),
              ),
            ),
            // orderBy is compulsory to enable pagination
            query: FirebaseFirestore.instance.collection('users2'),
            listeners: [refreshChangeListener],
          ),
          onRefresh: () async {
            refreshChangeListener.refreshed = true;
          },
        ),
      ),
    );
  }
}
vedartm commented 3 years ago

@Pro-A try using the header attribute.

vedartm commented 3 years ago

I am closing this hoping the issue is solved. Feel free to reopen this if you face any similar issues. Thanks for using the package.