SliverList widget and Attributes

SliverList widget and Attributes

ยท

2 min read

The SliverList widget in Flutter is used to create a scrollable list of children within a CustomScrollView. It's typically used in scenarios where you need to create a list of items that can be scrolled infinitely or when you want to customize the scroll behavior.

Attributes:

  1. delegate (SliverChildDelegate):

    • The delegate that controls the list of children. It can be either a SliverChildBuilderDelegate or a SliverChildListDelegate.
  2. semanticIndexCallback (IndexedSemanticsCallback):

    • An optional callback that provides the semantic index for each child in the list. This is useful for accessibility purposes.
  3. semanticIndexOffset (int):

    • An optional offset to be added to the semantic indexes provided by the semanticIndexCallback. This can be used to ensure unique semantic indexes across multiple SliverList widgets.
  4. itemExtent (double):

    • An optional fixed extent for each item in the list. If specified, all items will have the same height, and the scrolling performance may be improved.

Example:

import 'package:flutter/material.dart';

class SliverListExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SliverList Widget Example'),
      ),
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            title: Text('SliverList Example'),
            floating: true,
            expandedHeight: 200,
            flexibleSpace: FlexibleSpaceBar(
              background: Image.network(
                'https://via.placeholder.com/600x200',
                fit: BoxFit.cover,
              ),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return ListTile(
                  leading: Icon(Icons.circle),
                  title: Text('Item $index'),
                );
              },
              childCount: 50,
            ),
          ),
        ],
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: SliverListExample(),
  ));
}

Explanation:

  • In this example, a SliverList widget is used to create a scrollable list of items within a CustomScrollView.

  • The SliverList widget is added as a sliver within the CustomScrollView.

  • The delegate attribute of the SliverList is set to a SliverChildBuilderDelegate, which generates list items dynamically based on a builder function.

  • The builder function within the SliverChildBuilderDelegate creates a ListTile for each item in the list with a leading icon and a title.

  • The childCount attribute of the SliverChildBuilderDelegate specifies the total number of items in the list.

  • As a result, you'll see a scrollable list of 50 items with leading icons and titles when you run this code.

Did you find this article valuable?

Support Vinit Mepani by becoming a sponsor. Any amount is appreciated!

ย