Infinite List (Infinite Scrolling/Pagination) With Raw BLoC Pattern in Flutter

main.dart

import 'dart:async';
import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.blueGrey),
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  @override
  createState() => _HomeState();
}

class _HomeState extends State<Home> {
  ScrollController _controller;  
  final _suggestionBloc = SuggestionBloc(); // In production, a provider should be used instead of initializing here
  
  @override
  void initState() {
    super.initState();
    _suggestionBloc.fetchSuggestions();
    _controller = ScrollController()..addListener(_scrollListener);
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
    _suggestionBloc.dispose();
  }

  void _scrollListener() {
    if (_controller.position.pixels == _controller.position.maxScrollExtent) {
      _suggestionBloc.fetchSuggestions();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          "Infinite Scroll Async",
          style: TextStyle(color: Colors.white),
        ),
      ),
      body: _buildSuggestions(),
    );
  }

  Widget _buildRow(WordPair pair) {
    return Column(
      children: <Widget>[
        ListTile(
          title: Text(
            pair.asPascalCase,
          ),
        ),
        Divider(),
      ],
    );
  }

  Widget _buildSuggestions() {
    return StreamBuilder<List<WordPair>>(
      stream: _suggestionBloc.suggestionStream,
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          return ListView.builder(
            padding: EdgeInsets.all(16.0),
            controller: _controller,
            itemCount: snapshot.data.length + 1,
            itemBuilder: (context, index) {
              return index >= snapshot.data.length
                        ? MyLoader(25, 25) // the reason why snapshot.data.length + 1
                        : _buildRow(snapshot.data[index]);
          });
        } else {
          return MyLoader(45, 45);
        }
      }
    );
  }
}

class MyLoader extends StatelessWidget {
  final double width;
  final double height;

  MyLoader(this.width, this.height);

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      child: Center(
        child: SizedBox(
          width: width,
          height: height,
          child: CircularProgressIndicator(
            strokeWidth: 3.0,
          ),
        ),
      ),
    );
  }
}

class SuggestionBloc {
  final _suggestions = <WordPair>[];

  final StreamController<List<WordPair>> _suggestionController = StreamController<List<WordPair>>();

  Stream<List<WordPair>> get suggestionStream => _suggestionController.stream;

  void fetchSuggestions() async {
    await Future.delayed(Duration(seconds: 2));
    _suggestions.addAll(generateWordPairs().take(20));
    _suggestionController.sink.add(_suggestions);
  }
  
  void dispose() {
    _suggestionController.close();
    _suggestions.clear();
  }
}

pubspec.yaml

dependencies:
  ...
  ...
  english_words: ^3.1.0

@yeszao Use Provider.of with context

Just out of curiosity, with this approach the entire list of components will be recreated, right?

_suggestions.addAll(generateWordPairs().take(20));
_suggestionController.sink.add(_suggestions);