Trendlist: [New post] NestedScrollView in flutter

Sunday, November 21, 2021

[New post] NestedScrollView in flutter

Respond to this post by replying above this line

NestedScrollView in flutter

by Sanjib Sinha

Photo by Jean-Baptiste Charrat on Unsplash

Want to nest other scrolling views inside a scrolling widget?

The answer is - NestedSCrollView.

As the name suggests the NestedScrollView in flutter is nothing but a scrolling view at first sight. However, it has many advantages. And the main advantage is we can nest other scrolling views inside it.

Talking off scrolling views reminds us that in a common use case in any flutter app, we often use SliverAppBar containing a TabBar in the header and TabBarView in the body, inside NestedScrollView.

But we're not going to use that example here.

Because we have a plan to discuss TabBar and TabBarView in a separate flutter article. They deserve it.

Therefore let us concentrate on how we can use NestedScrollView widget in a different way. While doing so, we'll keep AppBar in our Scaffold widget, and SliverAppBar in NestedScrollView.

Besides we will also use CustomScrollView in the body of the NestedScrollView.

By the way, we must keep in mind that there are other scroll view widgets that help us to scroll. For instance, we can name ScrollView, which we'll definitely discuss in a separate post.

To start with, firstly let's get the full code snippet and start watching the screenshots, so that we can discuss the parts of the code along with the image of our flutter app.

 import 'package:flutter/material.dart';  class NestedScrollViewSampleOne extends StatelessWidget {   const NestedScrollViewSampleOne({Key? key}) : super(key: key);    @override   Widget build(BuildContext context) {     return MaterialApp(       title: 'NestedScrollView first sample',       home: NestedScrollViewFirstHome(),     );   } }  class NestedScrollViewFirstHome extends StatelessWidget {   const NestedScrollViewFirstHome({Key? key}) : super(key: key);    @override   Widget build(BuildContext context) {     return Scaffold(       appBar: AppBar(         title: Text('NestedScrollView Sample'),       ),       body: NestedScrollView(         headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {           return <Widget>[             SliverAppBar(               expandedHeight: 200.0,               //forceElevated: innerBoxIsScrolled,               //floating: true,                pinned: true,               flexibleSpace: FlexibleSpaceBar(                 centerTitle: true,                 title: Container(                   color: Colors.blue,                   child: const Text(                     "The Collapsing Toolbar",                     style: TextStyle(                       color: Colors.white,                       fontSize: 25.0,                     ),                   ),                 ),                 background: Image.network(                   'https://cdn.pixabay.com/photo/2016/09/10/17/18/book-1659717_960_720.jpg',                   fit: BoxFit.cover,                 ),               ),             ),           ];         },         body: CustomScrollView(           slivers: <Widget>[             SliverGrid(               delegate: SliverChildBuilderDelegate(                 (context, index) {                   return Container(                     alignment: Alignment.center,                     color: Colors.orange[100 * (index % 9)],                     child: Text('grid item $index'),                   );                 },                 childCount: 30,               ),               gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(                 crossAxisCount: 3,                 mainAxisSpacing: 15,                 crossAxisSpacing: 15,                 childAspectRatio: 2.0,               ),             ),           ],         ),       ),     );   } }

In the above code we've set SliverAppBar pinned parameter true. As a result, we get these two screenshots when we run the app and after that when we scroll down to the down below.

Next, we scroll down to the end of the bottom screen and our SliverAppBar has collapsed totally, adjusts its size and the image disappears keeping only the text.

NestedScrollView with collapsing toolbar

The main advantage of NestedScrollView is that the pinned SliverAppBar works in a NestedScrollView exactly as it would in another scroll view, like CustomScrollView.