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.
The main advantage of NestedScrollView is that the pinned SliverAppBar works in a NestedScrollView exactly as it would in another scroll view, like CustomScrollView.
When we use SliverAppBar.pinned true, the SliverAppBar remains visible at the top of the scroll view.
As the user scrolls, it contracts and adjusts its size and finally it remains at the top. Since in our code, we’ve also used AppBar, it remains just down below the AppBar.
To recognize that property, let’s take a brief look at that part of the above code.
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
expandedHeight: 200.0,
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,
),
),
),
];
},As the user scrolls, the pinned SliverAppBar doesn’t move out of the scroll view. However, to make it scroll out of the viewport, we should make the floating parameter true.
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
expandedHeight: 200.0,
forceElevated: innerBoxIsScrolled,
floating: true,
// pinned: true,Since we’ve made the floating parameter true and pinned parameter has been commented out, the SliverAppBar shrinks as the user scrolls down further.
As a result, the SliverAppBar that acts as a collapsing toolbar is collapsing indeed and scrolling out of the view.
Finally, it will disappear completely as the user scrolls and reaches the bottom part of the screen.
Now, at the top, only the AppBar remains. The SliverAppBar completely disappears.
As we’ve noticed that when we use NestedScrollView headerSliverBuilder, we can use not only a SliverAppBar, but other slivers as well. Consequently, we can take advantage of this along with the body part where we can use CustomScrollView.
Leave a Reply