Exploring Different Types of ScrollViews in Flutter : A Complete Guide

• General

Most of the time, we want to implement scroll options in Flutter. Sometimes it will be hard to implement that in a column or a listview. Flutter provides easy ways for Flutter developers to implement scroll for the application, like CustomScrollView and NestedScrollView. We can achieve lots of scroll effects with this.

Let’s Begin:-

So we can talk about each of the Scrollveiw:_

• CustomScrollView
• NestedScrollView

CustomScrollView

CustomScrollView is a scroll view that uses slivers to produce custom scroll effects. You may get CustomScrollEffects with Silvers like SilverList and SilverGrid from it.

It has a sliver property where we can pass a list of widgets, including SliverAppBar, SliverToBoxAdapter, SliverList, and SliverGrid.

Let’s go through each of one:-

1. SliverAppBar

With the help of the SliverAppBar widget in the CustomScrollView, we can design a scrollable app bar. It serves as the first child of CustomScrollView most frequently. So that, it can adjust its height up to a specific extendable limit, the app bar can integrate a scrolling effect.

Example:-

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: debugDisableShadows,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              backgroundColor: const Color.fromARGB(255, 18, 30, 45),
              expandedHeight: 200,
              pinned: true,
              flexibleSpace: FlexibleSpaceBar(
                title: const Text(
                  'SliverAppBar Example',
                  style: TextStyle(fontSize: 18),
                ),
                background: Image.asset(
                  'assets/light-logo.png',
                  fit: BoxFit.fitWidth,
                ),
              ),
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return ListTile(
                    title: Text('Item $index'),
                  );
                },
                childCount: 20,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Output

The floating parameter in the SliverAppbar help to create a floating app bar with a better animation provided.

2. SliverList

SliverList is a sliver that organizes the children into a one-dimensional or linear array. The list items must be provided with a delegate parameter to scroll into view. Therefore, the children’s list can be created using a SliverChildBuilderDelegate or stipulated using a SliverChildListDelegate.

Example :-

CustomScrollView(  
          slivers: <Widget>[  
            SliverAppBar(  
              actions: <Widget>[  
                Icon(Icons.person, size: 40,)  
            ],  
              title: Text("SliverList Example"),  
              leading: Icon(Icons.menu),  
              backgroundColor: Colors.green,  
              expandedHeight: 100.0,  
              floating: true,  
              pinned: true  
            ),  
            SliverList(  
              delegate: new SliverChildListDelegate(_buildList(20)),  
            ),// Place sliver widgets here  
          ],  
        ),  
      ),  
    );  
  }  
}  

CustomScrollView is help to Customize with the Scroll.

NestedScrollView

The scroll locations of scrolling views inside can be nested with one another because they are intrinsically linked.

Typically, a SliverAppBar with a TabView in the body and a TabBar widget in the header is used with a NestedScrollView. The TabView typically swings horizontally, though scrollable content may sometimes scroll vertically.

NestedScrollView: When to Use It?

If you wish to link together stacked scroll views so they function as a single, unified scrollable area, you should use NestedScrollView widget. This implies that you are limited to controlling them together through programming.

Example

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: debugDisableShadows,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: CustomScrollView(
          slivers: [
            SliverAppBar(
              backgroundColor: const Color.fromARGB(255, 18, 30, 45),
              expandedHeight: 200,
              flexibleSpace: FlexibleSpaceBar(
                title: const Text(
                  'NestedScrollView Example',
                  style: TextStyle(fontSize: 14),
                ),
                background: Image.asset(
                  'assets/light-logo.png',
                  fit: BoxFit.fitWidth,
                ),
              ),
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) => ListTile(
                  title: Text('Item $index'),
                ),
                childCount: 50,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Output

Conclusion

For a better user experience, we can use CustomScrollView and NestedScrollView for the scroll. It will help to maintain the scroll and good animation.

Therefore, the leading Flutter app development company like flutteragency.com would leverage these various ScrollView to create engaging and user-friendly interfaces for their applications. The choice of ScrollView depends on the application’s specific requirements and design goals and the skills of Flutter experts, who entirely utilize these components effectively to deliver high-quality and intuitive mobile apps.

Frequently Asked Questions (FAQs)

1. Define ScrollView in Flutter development.

A ScrollView that uses slivers that generate unique scroll effects is DraggableScrollableSheet. A scrollable container that responds to drag initiatives by compressing the scrollable up to a limit before scrolling.

2. What differentiates ScrollView from Scrollable?

A scrollbar is simply a bar that cannot be scrolled; it is just the bar itself. When necessary, scrollbars are shown in a scrollable location called a ScrollView.

3. What is the purpose of ScrollView?

We can scroll views that can be scrolled vertically using the view group called ScrollView. In a scroll view, there is only one direct child. You must use a horizontal ScrollView to create a view that can be scrolled horizontally because a ScrollView can only scroll vertically.

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.