scroll_infinity 0.1.1

Infinite scrolling package.

Scroll Infinity

Installation

Run this command:

flutter pub add scroll_infinity

Usage Example

Here are some examples of how to use the package to create a list with infinite scrolling:

Vertical:

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:scroll_infinity/scroll_infinity.dart';

class Example extends StatefulWidget {
  const Example({super.key});

  @override
  State<Example> createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  static const maxItems = 20;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ScrollInfinity(
        maxItems: maxItems,
        loadData: (pageKey) async {
          await Future.delayed(
            const Duration(
              seconds: 2,
            ),
          );

          return List.generate(maxItems, (index) {
            return maxItems * pageKey + index + 1;
          });
        },
        itemBuilder: (value) {
          return ListTile(
            title: Text('Item $value'),
            subtitle: const Text('Subtitle'),
            trailing: const Icon(
              Icons.keyboard_arrow_right_rounded,
            ),
          );
        },
      ),
    );
  }
}

Horizontal:

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:scroll_infinity/scroll_infinity.dart';


class Example extends StatefulWidget {
  const Example({super.key});

  @override
  State<Example> createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  static const maxItems = 6;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          height: 64.0,
          child: ScrollInfinity(
            scrollDirection: Axis.horizontal,
            maxItems: maxItems,
            loadData: (pageKey) async {
              await Future.delayed(
                const Duration(
                  seconds: 2,
                ),
              );
        
              return List.generate(maxItems, (index) {
                return maxItems * pageKey + index + 1;
              });
            },
            itemBuilder: (value) {
              return Center(
                child: SizedBox(
                  width: MediaQuery.sizeOf(context).width * 0.5,
                  child: ListTile(
                    onTap: () {},
                    title: Text('Item $value'),
                    subtitle: const Text('Subtitle'),
                    trailing: const Icon(
                      Icons.keyboard_arrow_right_rounded,
                    ),
                  ),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

Properties

• scrollDirection: Defines the scrolling direction of the list. Can be Axis.vertical or Axis.horizontal.

scrollDirection: Axis.vertical,

• scrollbars: Shows scrollbars if true. Default is false.

scrollbars: true,

• padding: Specifies the internal padding of the list.

padding: EdgeInsets(8.0),

• disableInitialRequest: Disables the initial data request if set to true. Default is false.

disableInitialRequest: true,

• initialPageIndex: Initial page index. Default is 0.

initialPageIndex: 1,

• initialItems: Specifies the initial items to be displayed in the list.

initialItems: [
  // items
],

• loading: Allows passing a custom loading component.

loading: CustomLoadingWidget(),

• loadingStyle: Defines the style of the CircularProgressIndicator. Use this property to customize the appearance of the default loading indicator.

loadingStyle: CircularProgressIndicator(
  color: Colors.blue,
  strokeWidth: 8.0,
),

• maxItems: Specifies the maximum number of items per request. This will be used to determine when the list reaches the end.

maxItems: 20,

• loadData: Function responsible for loading the data. It should return a list of items.

loadData: (pageKey) async {
  // Logic to load the data
},

• separatorBuilder: Builds the separator component between the items in the list. Use this property to add custom dividers between the items.

separatorBuilder: (context, index) {
  return Divider(
    color: Colors.grey,
    height: 1.0,
  );
},

• itemBuilder: Builds the items in the list. This function should return the widget that represents each item in the list.

itemBuilder: (context, index) {
  final item = items[index];

  return ListTile(
    title: Text(item.title),
    subtitle: Text(item.subtitle),
  );
},

Author

This Flutter package was developed by Dário Matias.

Donations

Help maintain the project with donations.