Skip to content

Instantly share code, notes, and snippets.

@sgon00
Last active April 30, 2022 13:06
Show Gist options
  • Save sgon00/8f635992f7613abe33c2373704d21c28 to your computer and use it in GitHub Desktop.
Save sgon00/8f635992f7613abe33c2373704d21c28 to your computer and use it in GitHub Desktop.
Infinite List (Infinite Scrolling/Pagination) With Raw BLoC Pattern in Flutter
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();
}
}
dependencies:
...
...
english_words: ^3.1.0
@rmontemayor-kezar
Copy link

@yeszao Use Provider.of with context

@fbelluco
Copy link

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);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment