• Stars
    star
    171
  • Rank 222,266 (Top 5 %)
  • Language
    Dart
  • License
    MIT License
  • Created almost 4 years ago
  • Updated 3 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A Very Good Infinite List Widget created by Very Good Ventures. Great for activity feeds, news feeds, and more. πŸ¦„

Very Good Infinite List

Very Good Ventures Very Good Ventures

Developed with πŸ’™ by Very Good Ventures πŸ¦„

ci coverage pub package License: MIT style: very good analysis


A library for easily displaying paginated data, created by Very Good Ventures.

InfiniteList comes in handy when building features like activity feeds, news feeds, or anywhere else where you need to lazily fetch and render content for users to consume.

Example

Usage

The InfiniteList API is very similar to that of ListView.builder. A basic implementation requires four parameters:

  • An itemCount that represents the amount of items that should be rendered using the itemBuilder.
  • An itemBuilder that is responsible for returning a widget for every index of the itemCount.
  • A hasReachedMax flag that indicates if any more data is available.
  • An onFetchData callback that's triggered whenever new data should be fetched.

Example

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

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var _items = <String>[];
  var _isLoading = false;

  void _fetchData() async {
    setState(() {
      _isLoading = true;
    });

    await Future.delayed(const Duration(seconds: 1));

    if (!mounted) {
      return;
    }

    setState(() {
      _isLoading = false;
      _items = List.generate(_items.length + 10, (i) => 'Item $i');
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Simple Example'),
      ),
      body: InfiniteList(
        itemCount: _items.length,
        isLoading: _isLoading,
        onFetchData: _fetchData,
        separatorBuilder: (context, index) => const Divider(),
        itemBuilder: (context, index) {
          return ListTile(
            dense: true,
            title: Text(_items[index]),
          );
        },
      ),
    );
  }
}

Customizations

InfiniteList

InfiniteList has multiple optional parameters which allow you to customize the loading and error behavior.

InfiniteList<String>(
  itemCount: 3,
  hasReachedMax: false,
  onFetchData: () => _fetchData(),
  itemBuilder: (context, index) => ListTile(title: Text('$index')),

  // An optional [ScrollController] this [InfiniteList] will attach to.
  // It's used to detect when the list has scrolled to the appropriate position
  // to call [onFetchData].
  //
  // Is optional and mostly used only for testing. If set to `null`, an
  // internal [ScrollController] is used instead.
  scrollController: _scrollController,

  // Indicates if new items are currently being loaded.
  //
  // While set to `true`, the [onFetchData] callback will not be triggered
  // and the [loadingBuilder] will be rendered.
  //
  // Is set to `false` by default and cannot be `null`.
  isLoading: false,

  // Indicates if an error has occurred.
  //
  // While set to `true`, the [onFetchData] callback will not be triggered
  // and the [errorBuilder] will be rendered.
  //
  // Is set to `false` by default and cannot be `null`.
  hasError: false,

  // Indicates if the list should be reversed.
  //
  // If set to `true`, the list of items, [loadingBuilder] and [errorBuilder]
  // will be rendered from bottom to top.
  reverse: false,

  // The duration with which calls to [onFetchData] will be debounced.
  //
  // Is set to a duration of 100 milliseconds by default and cannot be `null`.
  debounceDuration: const Duration(milliseconds: 100),

  // The offset, in pixels, that the [scrollController] must be scrolled over
  // to trigger [onFetchData].
  //
  // This is useful for fetching data _before_ the user has scrolled all the
  // way to the end of the list, so the fetching mechanism is more well hidden.
  //
  // For example, if this is set to `400.0` (the default), [onFetchData] will
  // be called when the list is scrolled `400.0` pixels away from the bottom
  // (or the top if [reverse] is `true`).
  //
  // This value must be `0.0` or greater, is set to `400.0` by default and
  // cannot be `null`.
  scrollExtentThreshold: 400.0,

  // The amount of space by which to inset the list of items.
  //
  // Is optional and can be `null`.
  padding: const EdgeInsets.all(16.0),

  // An optional builder that's shown when the list of items is empty.
  //
  // If `null`, nothing is shown.
  emptyBuilder: (context) => const Center(child: Text('No items.')),

  // An optional builder that's shown at the end of the list when [isLoading]
  // is `true`.
  //
  // If `null`, a default builder is used that renders a centered
  // [CircularProgressIndicator].
  loadingBuilder: (context) => const Center(child: CircularProgressIndicator()),

  // An optional builder that's shown when [hasError] is not `null`.
  //
  // If `null`, a default builder is used that renders the text `"Error"`.
  errorBuilder: (context) => const Center(child: Text('Error')),

  // An optional builder that, when provided, is used to show a widget in
  // between every pair of items.
  //
  // If the [itemBuilder] returns a [ListTile], this is commonly used to render
  // a [Divider] between every tile.
  //
  // Is optional and can be `null`.
  separatorBuilder: (context, index) => const Divider(),
);

Refer to the example to see both basic and complex usage of InfiniteList.

More Repositories

1

very_good_cli

A Very Good Command-Line Interface for Dart created by Very Good Ventures πŸ¦„
Dart
2,149
star
2

dart_frog

A fast, minimalistic backend framework for Dart 🎯
Dart
1,830
star
3

formz

A unified form representation in Dart used at Very Good Ventures πŸ¦„
Dart
378
star
4

very_good_analysis

Lint rules for Dart and Flutter used internally at Very Good Ventures πŸ¦„
Dart
357
star
5

very_good_workflows

Reusable GitHub workflows used at Very Good Ventures πŸ¦„
CSS
292
star
6

very_good_coverage

GitHub Action which helps enforce code coverage threshold using lcov created by Very Good Ventures πŸ¦„
JavaScript
159
star
7

very_good_core

A Very Good Flutter Starter Project created by the Very Good Ventures Team πŸ¦„
C++
131
star
8

mockingjay

A package that makes it easy to mock, test, and verify navigation in Flutter. Created by Very Good Ventures πŸ¦„
Dart
112
star
9

awesome_dart_frog

An awesome repo with Dart Frog articles, tutorials, plugins, and more! Created by Very Good Ventures.
105
star
10

very_good_flame_game

A Very Good Flutter Starter Flame Game created by the Very Good Ventures Team πŸ¦„
Dart
85
star
11

very_good_performance

Utility on top of the Flutter Driver API that facilitates measuring the performance of your app in an automated way created by Very Good Ventures πŸ¦„
C++
81
star
12

very_good_ranch

A very good Flame game built by Very Good Ventures πŸ¦„
Dart
75
star
13

r13n

Regionalization support for Flutter. Built by Very Good Ventures πŸ¦„
Dart
72
star
14

flutter_web_preloader

A brick that creates a smart web entrypoint for Flutter and preloads any type of asset before starting an app.
JavaScript
71
star
15

very_good_wear_app

A Very Good Flutter Wear OS App Starter Project created by the Very Good Ventures Team πŸ¦„
Dart
65
star
16

flame_behaviors

An implementation of the behavioral composition pattern for Flame. Built by Very Good Ventures πŸ¦„
Dart
64
star
17

very_good_templates

Collection of open-source templates created and maintained by Very Good Ventures.
Dart
61
star
18

pub_updater

A Dart package which supports checking if a current package is up-to-date.
Dart
55
star
19

cli_completion

Completion functionality for Dart Command-Line Interfaces built using CommandRunner. Built by Very Good Ventures. πŸ¦„
Dart
49
star
20

very_good_flutter_package

A Very Good Flutter Package Template created by the Very Good Ventures Team πŸ¦„
Dart
42
star
21

very_good_dart_cli

A Very Good Dart CLI Template created by the Very Good Ventures Team πŸ¦„
Dart
33
star
22

very_good_flutter_plugin

A Very Good Flutter Federated Plugin created by the Very Good Ventures Team πŸ¦„
Dart
29
star
23

very_good_test_runner

A test runner for Flutter and Dart created by Very Good Ventures πŸ¦„
Dart
18
star
24

very_good_hub

An end-to-end example of Flutter+Dart Frog application, using authentication
Dart
15
star
25

very_good_docs_site

A Very Good Documentation Site created by the Very Good Ventures Team πŸ¦„
JavaScript
15
star
26

very_good_dart_package

A Very Good Dart Package Template created by the Very Good Ventures Team πŸ¦„
Dart
14
star
27

flame_steering_behaviors

Flame behaviors used to organically manage the movement of an entity. Built by Very Good Ventures πŸ¦„
Dart
10
star
28

.github

7
star
29

changelogs

Changelogs for open source tools maintained by Very Good Ventures.
TypeScript
5
star
30

very_good_dictionaries

Custom cspell dictionaries used at Very Good Ventures πŸ¦„
4
star
31

flutter_and_friends_tic_tac_toe

Flutter and Friend workshop about Tic Tac Toe
Dart
1
star