cached_listview 2.0.0

🧾 Flutter widget allowing easy cache-based data display in a ListView featuring pull-to-refresh and error banners.

example/lib/main.dart

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:cached_listview/cached_listview.dart';
import 'package:list_diff/list_diff.dart';

import 'cached_raw_builder.dart';
import 'cached_builder.dart';

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

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

class _MyAppState extends State<MyApp> {
  List<int> inMemoryCache;
  CacheController<List<int>> controller;

  @override
  void initState() {
    super.initState();

    var random = Random();
    controller = CacheController<List<int>>(
      // The fetcher just waits and then either crashes or returns a list of
      // random numbers.
      fetcher: () async {
        await Future.delayed(Duration(seconds: 2));
        if (random.nextDouble() < 0.8) {
          return List.generate(random.nextInt(100), (i) => random.nextInt(10));
        }
        if (random.nextDouble() < 0.1) {
          return [];
        }
        throw UnsupportedError('Oh no! Something terrible happened.');
      },
      loadFromCache: () async {
        if (inMemoryCache == null) {
          throw StateError('Nothing saved in cache.');
        }
        return inMemoryCache;
      },
      saveToCache: (data) async => inMemoryCache = data,
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Cached ListView examples')),
        body: Builder(
          builder: (context) {
            return ListView(
              children: <Widget>[
                ListTile(
                  title: Text('CachedBuilder demo'),
                  onTap: () => Navigator.of(context).push(MaterialPageRoute(
                    builder: (_) => CachedBuilderDemo(
                      controller: controller,
                    ),
                  )),
                ),
                ListTile(
                  title: Text('CachedRawBuilder demo'),
                  onTap: () => Navigator.of(context).push(MaterialPageRoute(
                    builder: (_) => CachedRawBuilderDemo(
                      controller: controller,
                    ),
                  )),
                ),
                ListTile(
                  title: Text('Example demo'),
                  onTap: () => Navigator.of(context).push(MaterialPageRoute(
                    builder: (_) => ExampleDemo(),
                  )),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

class ExampleDemo extends StatefulWidget {
  @override
  _ExampleDemoState createState() => _ExampleDemoState();
}

class _ExampleDemoState extends State<ExampleDemo> {
  final _listKey = GlobalKey<AnimatedListState>();
  List<int> data = [1, 2, 3];

  var sizeTween = Tween<double>(begin: 0, end: 1);

  void initState() {
    super.initState();
  }

  Future<void> setData() async {
    final random = Random();
    final operations =
        await diff(data, List.generate(10, (_) => random.nextInt(10)));
    setState(() {
      for (var operation in operations) {
        operation.applyTo(data);
        if (operation.isInsertion) {
          _listKey.currentState.insertItem(operation.index);
        } else if (operation.isDeletion) {
          _listKey.currentState.removeItem(operation.index,
              (context, animation) {
            return SizeTransition(
              sizeFactor: animation.drive(sizeTween),
              child: ListTile(title: Text('${operation.item}')),
            );
          });
        }
      }
    });
    print(data);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Numbers')),
      body: RefreshIndicator(
        onRefresh: setData,
        child: AnimatedList(
          key: _listKey,
          initialItemCount: 3,
          itemBuilder: (context, index, animation) {
            return SizeTransition(
              sizeFactor: animation.drive(sizeTween),
              child: ListTile(title: Text('${data[index]}')),
            );
          },
        ),
      ),
    );
  }
}