Flutter – Nested Scroll View
In Flutter, you can use a NestedScrollView widget to create a scrollable view with multiple scrolling sections that can scroll independently of each other. This is commonly used when you have a header that should remain visible while the content below it scrolls. In this article, we are going to implement the NestedScrollView widget. A sample video is given below to get an idea about what we are going to do in this article.
Basic Syntax of NestedScrollView Widget
NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
// SliverAppBar and/or other sliver widgets go here
return <Widget>[
// List of Sliver widgets
];
},
body: ListView(
// Body content goes here
),
)
Required Tools
To build this app, you need the following items installed on your machine:
- Visual Studio Code / Android Studio
- Android Emulator / iOS Simulator / Physical Device device.
- Flutter Installed
- Flutter plugin for VS Code / Android Studio.
Step By Step Implementation
Step 1: Create a New Project in Android Studio
To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.
Step 2: Import the Package
First of all import material.dart file.
import 'package:flutter/material.dart';
Step 3: Execute the main Method
Here the execution of our app starts.
Dart
void main() { runApp(MyApp()); } |
Step 4: Create MyApp Class
In this class we are going to implement the MaterialApp , here we are also set the Theme of our App.
Dart
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( primarySwatch: Colors.green, // Set the app's primary theme color ), debugShowCheckedModeBanner: false , home: MyNestedScrollView(), ); } } |
Step 5: Create MyNestedScrollView Class
In this class we are going to Implement the NestedScrollView widget that help to create scrollable view with a sticky header that remains visible while you scroll through the list of items. Comments are added for better understanding.
NestedScrollView(
// The headerSliverBuilder callback defines the sliver widgets in the header
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
// SliverAppBar is the header that remains visible while scrolling
SliverAppBar(
expandedHeight: 200.0,
floating: false,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
title: Text(
'Nested Scroll View Example',
style: TextStyle(fontSize: 16), // Customize the title's style
),
background: Image.network(
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSf9fG0XSXlw5HHtdVIhc1_gl4vzcKeCOAkoBD07BHiTAyvsVoKqvRbLkwuNSTheOd3Kk4&usqp=CAU',
fit: BoxFit.cover, // Ensure the image covers the entire area
),
),
),
];
},
// The body contains the scrollable content
body: ListView.builder(
itemCount: 20,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text('Item $index'), // Display a list of items
);
},
),
),
Dart
class MyNestedScrollView extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: NestedScrollView( // The headerSliverBuilder callback defines the sliver widgets in the header headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) { return <Widget>[ // SliverAppBar is the header that remains visible while scrolling SliverAppBar( expandedHeight: 200.0, floating: false , pinned: true , flexibleSpace: FlexibleSpaceBar( title: Text( 'Nested Scroll View Example' , style: TextStyle(fontSize: 16), // Customize the title's style ), background: Image.network( 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSf9fG0XSXlw5HHtdVIhc1_gl4vzcKeCOAkoBD07BHiTAyvsVoKqvRbLkwuNSTheOd3Kk4&usqp=CAU' , fit: BoxFit.cover, // Ensure the image covers the entire area ), ), ), ]; }, // The body contains the scrollable content body: ListView.builder( itemCount: 20, itemBuilder: (BuildContext context, int index) { return ListTile( title: Text( 'Item $index' ), // Display a list of items ); }, ), ), ); } } |
Here is the full Code of main.dart file
Dart
import 'package:flutter/material.dart' ; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( primarySwatch: Colors.green, // Set the app's primary theme color ), debugShowCheckedModeBanner: false , home: MyNestedScrollView(), ); } } class MyNestedScrollView extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: NestedScrollView( // The headerSliverBuilder callback defines the sliver widgets in the header headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) { return <Widget>[ // SliverAppBar is the header that remains visible while scrolling SliverAppBar( expandedHeight: 200.0, floating: false , pinned: true , flexibleSpace: FlexibleSpaceBar( title: Text( 'Nested Scroll View Example' , style: TextStyle(fontSize: 16), // Customize the title's style ), background: Image.network( 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSf9fG0XSXlw5HHtdVIhc1_gl4vzcKeCOAkoBD07BHiTAyvsVoKqvRbLkwuNSTheOd3Kk4&usqp=CAU' , fit: BoxFit.cover, // Ensure the image covers the entire area ), ), ), ]; }, // The body contains the scrollable content body: ListView.builder( itemCount: 20, itemBuilder: (BuildContext context, int index) { return ListTile( title: Text( 'Item $index' ), // Display a list of items ); }, ), ), ); } } |