Flutter NeverScrollableScrollPhysics pagenation not work
3,060
Oh! finally I have solved this problem using CustomScrollView
instead of NestedScrollview
.
In addition, I wraped the CustomScrollView
as LayoutBuilder
.
Hense the final code of the body part of Scaffold
is following:
LayoutBuilder(
builder: (BuildContext context, BoxConstraints viewportConstraints) {
return ConstrainedBox(
constraints: BoxConstraints(
minHeight: viewportConstraints.maxHeight,
),
child: CustomScrollView(
// physics: AlwaysScrollableScrollPhysics(),
controller: _scrollController,
slivers: <Widget>[
SliverList(
delegate: SliverChildListDelegate([
_buildHeader()
])),
SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
childAspectRatio: 1.0,
mainAxisSpacing: 1.0,
crossAxisSpacing: 1.0),
delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
return _buildListItem(context, products[index]);
},
childCount: products.length,
),
)
]
)
);
}),
I hope it would be helpful for you!
Author by
byeonghwajeong
Updated on December 18, 2022Comments
-
byeonghwajeong over 1 year
I am trying to bind
NestedScrollView
andGridView
with pagenation.However, I put
NeverScrollableScrollPhysics()
in theGridView
, the pagenation function does not work.I guess it is caused by scrollcontroller.
How can I solve this problem?
I will attach my code.
class HomePage extends StatefulWidget { @override _HomePageState createState() => _HomePageState(); } class _HomePageState extends State<HomePage> with TickerProviderStateMixin { //infinite scroll List<DocumentSnapshot> products = []; // stores fetched products bool isLoading = false; // track if products fetching bool hasMore = true; // flag for more products available or not int documentLimit = 20; // documents to be fetched per request DocumentSnapshot lastDocument; // flag for last document from where next 10 records to be fetched ScrollController _scrollController = ScrollController(); // listener for listview scrolling @override void initState() { getProducts(); _scrollController.addListener(() { double maxScroll = _scrollController.position.maxScrollExtent; double currentScroll = _scrollController.position.pixels; double delta = MediaQuery.of(context).size.height * 0.20; if (maxScroll - currentScroll <= delta) { getProducts(); } }); } @override void dispose() { _scrollController?.dispose(); super.dispose(); } getProducts() async { //... //get items from firebase //... } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( backgroundColor: Theme.of(context).colorScheme.backgroundwhite, title: Image( width: 132.0, height: 40.0, image: AssetImage('images/logo_horiz.png'), ), ), body: NestedScrollView( headerSliverBuilder: (context, isScrolled) { return <Widget>[ SliverList( delegate: SliverChildListDelegate([ Padding( padding: const EdgeInsets.all(18.0), child: Column( mainAxisAlignment: MainAxisAlignment.start, mainAxisSize: MainAxisSize.max, crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text( "다른 유저가 키우는", style: TextStyle( fontSize: 24.0, color: Colors.black, fontWeight: FontWeight.w200, fontFamily: "Roboto"), ), Padding(padding: EdgeInsets.fromLTRB(0, 0, 0, 5.0)), Row( children: <Widget>[ Text( "율마", style: new TextStyle( fontSize: 24.0, color: Colors.black, fontWeight: FontWeight.bold, fontFamily: "Roboto"), ), Text( "가 궁금하신가요?", style: new TextStyle( fontSize: 24.0, color: Colors.black, fontWeight: FontWeight.w200, fontFamily: "Roboto"), ), ], ), Padding(padding: EdgeInsets.fromLTRB(0, 0, 0, 25.0)), Container( color: Colors.transparent, width: double.infinity, height: 46, child: FlatButton( color: Theme.of(context).colorScheme.lightGrey, onPressed: () { Navigator.push( context, MaterialPageRoute( builder: (context) => SearchPage()), ); }, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10.0)), child: Row( children: <Widget>[ Icon(Icons.search, size: 30.0, color: Colors.black12), Padding( padding: const EdgeInsets.only(right: 10.0), ), Text( "율마", style: new TextStyle( fontSize: 20.0, color: Theme.of(context) .colorScheme .textBlack, fontWeight: FontWeight.w200, fontFamily: "Roboto"), ) ], ))), ]), ), ])) ]; }, body: LayoutBuilder( builder:(BuildContext context, BoxConstraints viewportConstraints) { return ConstrainedBox( constraints: BoxConstraints( minHeight: viewportConstraints.maxHeight, ), child: IntrinsicHeight( child: Column(children: <Widget>[ Flexible( // this will host our Tab Views child: GridView.builder( // physics: NeverScrollableScrollPhysics(), gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 3, childAspectRatio: 1.0, mainAxisSpacing: 1.0, crossAxisSpacing: 1.0), controller: _scrollController, itemCount: products.length, itemBuilder: (context, index) { return _buildListItem(context, products[index]); }, )), ]))); }), )); } Widget _buildListItem(BuildContext context, item) { return Hero( tag: item.documentID, child: Material( child: InkWell( onTap: () { Navigator.push( context, MaterialPageRoute(builder: (context) => DetailPostPage(item)), ); }, child: Image.network(item['imageUrls'][0]['url'], fit: BoxFit.cover), ), ), ); } }
Thank you so much