CustomScrollView Widget – Flutter Widget Guide By Flutter Agency

· 5 min read
Custom-ScrollView
Custom-ScrollView

What is CustomScrollView Widget in Flutter?

CustomScrollView Widget is basically a ScrollView with some effects. With CustomScrollView Widget, you can create various scrolling effects like grids, lists, and expanding headers.

CustomScrollView constructor will look like below :

 CustomScrollView({
    Key key,
    Axis scrollDirection: Axis.vertical,
    bool reverse: false,
    ScrollController controller,
    bool primary,
    ScrollPhysics physics,
    bool shrinkWrap: false,
    Key center,
    double anchor: 0.0,
    double cacheExtent,
    List<Widget> slivers: const [],
    int semanticChildCount,
    DragStartBehavior dragStartBehavior: DragStartBehavior.start,
  });

In the Above constructor, all fields marked with @required must not be empty.

How to use CustomScrollView Widget in Flutter?

The following code snippet tells us how to implement CustomScrollView Widget in Flutter.

CustomScrollView(
      slivers: <Widget>[
        // Place sliver widgets here
      ],
    );

Here in the above code, we have used slivers, in which you can pass a collection of widgets. Each widget in slivers must have RenderSliver objects. Example of compatible widgets include SliverAppBar, SliverToBoxAdapter,SliverList, and SliverGrid.

The SliverAppBar is a material design app bar that’s compatible with CustomScrollView. Basically it’s an app bar with dynamic height and scroll effects. It’s usually used as the first widget in the slivers list.

Below is an example of SliverAppBar

 slivers: <Widget>[
        SliverAppBar(
          title: Text("SliverAppBar Title"),
        )
      ],

With SliverAppBar, User can create an app bar whose height adapt automatically when the user scrolls the page.

SliverToBoxAdapter :

SliverToBoxAdapter is a sliver containing a single box widget.

slivers: <Widget>[
    SliverToBoxAdapter(
      child: SizedBox(
        height: 1000,
        child: Center(
          child: Text('Main content here'),
        ),
      ),
    ),
  ],

If you want to have multiple SliverToBoxAdapter Widgets, it’s better to consider using more suitable slivers such as SliverList, SliverFixedExtentList, SliverPrototypeExtentList or SliverGrid. The reason is those slivers only instantiate its visible children – which leads to better performance.

Sliver

SliverToBoxAdapter

  • SliverList :

SliverList is a sliver that holds multiple box children in a linear array along the main axis. Below is a simple SliverList that renders a collection of 50 Text widgets.

  slivers: <Widget>[
    SliverList(
      delegate: new SliverChildListDelegate(_buildList(50))
    ),
  ],

_buildList implementation will look like below :

  List _buildList(int count) {
    List<Widget> listItems = List();
 
    for (int i = 0; i < count; i++) {
      listItems.add(new Padding(padding: new EdgeInsets.all(20.0),
          child: new Text(
              'Item ${i.toString()}',
              style: new TextStyle(fontSize: 25.0)
          )
      ));
    }
 
    return listItems;
  }

We will get output like below:

Sliver-List

  • SliverGrid :

If SliverList places its elements in a one-dimensional array, SliverGrid arranges its elements in a two-dimensional array.

 SliverGrid(
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 5,
    ) ,
    delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
      return new Container(
        color: _randomColor(index),
        height: 200.0
      );
    }),
  ),

Below is _randomColor() Code Snippet :

  Color _randomColor(int index) {
    if (index % 3 == 0) {
      return Colors.pink;
    } else if (index % 3 == 1) {
      return Colors.blueAccent;
    }
 
    return Colors.amber;
  }

Conclusion:

In this article, we have been through What is CustomScrollView Widget in Flutter along with how to implement it in a Flutter.

Thanks for reading !!!
Do Let us know if you need further assistance !!!

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply