Nested Scroll View -Flutter

In Flutter, you can use a NestedScrollView widget to build a scrollable view with multiple scrolling parts that can move independently. This is typically used when you want a header to stay visible as the material below it scrolls. In this tutorial, we will look at how to use the NestedScrollView widget.

In this article, you will learn how to create your NestedScrollview in Flutter. So let’s take one example of the NestedScrollview  in Flutter of Mobile application. 

Step-by-Step Implementation


Step 1: Create a New Project in Android Studio (File >new flutter project).


Step 2: Adding material package 

Import method the runApp method in the main function call first while run the application.

 import 'package:flutter/material.dart';

 void main() {

     runApp(RunMyApp());

 }

Step 3: Creating a stateless widget

We can create a stateless widget that contains MaterialApp widget,AppBar,etc.

 class RunMyApp extends StatelessWidget {

     const RunMyApp({super.key});  

    @override

    Widget build(BuildContext context) {

    return MaterialApp(home);

     }

 }

Step 4: Below code write Nested scroll view in a flutter.
 NestedScrollView(
   headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
     return <Widget>[
       SliverAppBar(
         expandedHeight: 200.0,
         floating: false,
         pinned: true,
         backgroundColor: Colors.blue,
         flexibleSpace: FlexibleSpaceBar(
        ),
       ),
     ];
   },
  body: ListView.builder(
    itemCount: 20,
    itemBuilder: (BuildContext context, int index) {
      return ListTile();
     },
   ),
 )
Step 5: Final code of Nested scroll view.
 import 'package:flutter/material.dart';
 void main() {
   runApp(NestedScrollview());
 }

 class NestedScrollview extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
       theme: ThemeData(
         primarySwatch: Colors.blue,
       ),
       debugShowCheckedModeBanner: false,
       home: MyNestedScrollView(),
     );
   }
 }

 class MyNestedScrollView extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       body: NestedScrollView(
         headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
           return <Widget>[
            SliverAppBar(
              expandedHeight: 200.0,
              floating: false,
              pinned: true,
              backgroundColor: Colors.blue,
              flexibleSpace: FlexibleSpaceBar(
                title: Text(
                  'Nested Scroll View Example',
                  style: TextStyle(fontSize: 14, color: Colors.white),
                ),
              ),
            ),
          ];
        },
        body: ListView.builder(
          itemCount: 20,
          itemBuilder: (BuildContext context, int index) {
            return ListTile(
               title: Text('Item $index'),
             );
           },
         ),
       ),
     );
   }
 }
Step 6: Output of above example.


Happy coding!

365Bloggy June 13, 2024
Share this post
Tags
SUBSCRIBE THIS FORM

Subscribe Thanks

Recent Posts
How to add a Snackbar in Android
0 540
Zoom In and Out to TextView in Android
0 183
How to underline text in textview
0 152
Shine Effect in Android
0 136
How to Create Marquee Text in Android?
0 116
Our blogs
Archive