Request more articles from server beyond page 1

Author: jmolins

lib/main.dart

@@ -17,7 +17,9 @@ class MyApp extends StatelessWidget {
   Widget build(BuildContext context) {
     SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
 
-    ArticleBloc bloc = ArticleBloc(api: Api());
+    Api api = new Api();
+    ArticleBloc bloc = ArticleBloc(api: api);
+
     bloc.getArticles();
 
     return ArticleBlocProvider(
@@ -45,6 +47,7 @@ class HomePage extends StatelessWidget {
           itemStream: ArticleBlocProvider.of(context).articles,
           itemBuilder: (context, article, onBackFlip, height) =>
               ArticlePage(article, onBackFlip, height),
+          getItemsCallback: ArticleBlocProvider.of(context).getArticles,
           height: height,
         ),
       ),

lib/service/api.dart

@@ -1,36 +1,24 @@
 import 'dart:async';
-import 'dart:convert';
 
 import 'package:flutter_board/keys.dart';
-import 'package:flutter_board/model/article.dart';
 import 'package:http/http.dart' as http;
+import 'package:meta/meta.dart';
 
 class Api {
   final String _baseUrl = "https://newsapi.org/v2/top-headlines?sources=";
 
-  Future<List<Article>> getArticles() async {
-    String url = Uri.encodeFull(_baseUrl + 'cnn,bbc-news');
+  Future<String> getArticles({
+    @required int page,
+    @required int pageSize,
+  }) async {
+    String url = Uri.encodeFull(_baseUrl + 'cnn,bbc-news&pageSize=$pageSize&page=$page');
     try {
       http.Response response = await http.get(url, headers: _headers());
-
       if (response.statusCode == 200) {
-        var localData = json.decode(response.body);
-        if (localData != null && localData["articles"] != null) {
-          List<Article> articles = (localData["articles"] as List<dynamic>)
-              .map((article) => Article(
-                    article['source']['name'],
-                    article['author'],
-                    article['title'],
-                    article['description'],
-                    article['url'],
-                    article['urlToImage'],
-                  ))
-              .toList();
-          return articles;
-        }
+        return response.body;
       }
     } on Exception {}
-    return [];
+    return null;
   }
 
   Map<String, String> _headers() {

lib/service/article_bloc.dart

@@ -1,4 +1,5 @@
 import 'dart:async';
+import 'dart:convert';
 
 import 'package:flutter_board/model/article.dart';
 import 'package:flutter_board/service/api.dart';
@@ -9,13 +10,33 @@ import 'package:rxdart/rxdart.dart';
 class ArticleBloc {
   final Api api;
 
+  static const int _pageSize = 10;
+  int _nextPage = 1;
+
+  // Assume there is at least one article in the server
+  int _totalItemsForRequestedSources = 1;
+
   final _articlesController = PublishSubject<List<Article>>();
 
-  ArticleBloc({@required this.api}) {}
+  ArticleBloc({@required this.api});
 
   // Inputs
-  void getArticles() async {
-    _articlesController.add(await api.getArticles());
+  Future<void> getArticles({bool refresh = false}) async {
+    List<Article> articles;
+    if (refresh) {
+      articles = await _getArticles();
+      // Send a null list prior to the real list to allow the flip panel to reset
+      _articlesController.add(null);
+      _articlesController.add(articles);
+      _nextPage++;
+    } else {
+      if (_totalItemsForRequestedSources > (_nextPage - 1) * _pageSize) {
+        articles = await _getArticles(page: _nextPage);
+        _articlesController.add(articles);
+        _nextPage++;
+      } else
+        print("No more items");
+    }
   }
 
   // Outputs
@@ -24,4 +45,29 @@ class ArticleBloc {
   void close() {
     _articlesController.close();
   }
+
+  Future<List<Article>> _getArticles(
+      {int page = 1, int pageSize = _pageSize}) async {
+    String jsonString = await api.getArticles(page: page, pageSize: pageSize);
+    if (jsonString != null) {
+      var data = json.decode(jsonString);
+      if (data != null &&
+          data["totalResults"] != null &&
+          data["articles"] != null) {
+        _totalItemsForRequestedSources = data["totalResults"];
+        List<Article> articles = (data["articles"] as List<dynamic>)
+            .map((article) => Article(
+                  article['source']['name'],
+                  article['author'],
+                  article['title'],
+                  article['description'],
+                  article['url'],
+                  article['urlToImage'],
+                ))
+            .toList();
+        return articles;
+      }
+    }
+    return null;
+  }
 }

lib/ui/article_page.dart

@@ -108,7 +108,6 @@ class ArticlePage extends StatelessWidget {
               padding: EdgeInsets.all(10.0),
               child: new LayoutBuilder(
                   builder: (BuildContext context, BoxConstraints constraints) {
-                print(constraints);
                 return new Text(
                   article.description,
                   overflow: TextOverflow.ellipsis,

lib/ui/my_flip_panel.dart

@@ -5,6 +5,10 @@ import 'dart:math' as math;
 
 typedef Widget ItemBuilder<T>(BuildContext, T, VoidCallback, double);
 
+// Callback that allows to request for more items to the server or to refresh
+// the list if refresh is true.
+typedef void GetItems({bool refresh});
+
 enum FlipDirection { up, down, none }
 
 enum LastFlip { none, previous, next }
@@ -16,15 +20,19 @@ class FlipPanel<T> extends StatefulWidget {
   final Duration duration;
   final double height;
   final Stream<List<T>> itemStream;
+  final GetItems getItemsCallback;
 
   FlipPanel({
     Key key,
     @required this.itemBuilder,
     @required this.itemStream,
-    this.height,
+    @required this.getItemsCallback,
+    @required this.height,
     this.duration = const Duration(milliseconds: 100),
   })  : assert(itemBuilder != null),
         assert(itemStream != null),
+        assert(getItemsCallback != null),
+        assert(height != null),
         super(key: key);
 
   @override
@@ -55,6 +63,10 @@ class _FlipPanelState<T> extends State<FlipPanel>
   // depending on the user flipping.
   int _availableItems = 0;
 
+  // Number of items between the _currentIndex and _availableItemns below which
+  // we launch a request to server for more items (next page).
+  int _updateThreshold = 5;
+
   Widget _prevChild, _currentChild, _nextChild;
   Widget _upperChild1, _upperChild2;
   Widget _lowerChild1, _lowerChild2;
@@ -70,6 +82,8 @@ class _FlipPanelState<T> extends State<FlipPanel>
 
   LastFlip _lastFlip = LastFlip.none;
 
+  bool _shouldShowNoMoreItemsMessage = false;
+
   @override
   void initState() {
     super.initState();
@@ -97,6 +111,11 @@ class _FlipPanelState<T> extends State<FlipPanel>
                   : _lastFlip == LastFlip.previous && _currentIndex > 0
                       ? _currentIndex - 1
                       : _currentIndex;
+              // Avoid going beyond max. items of widgets list
+              if (_lastFlip == LastFlip.next &&
+                  _currentIndex == _availableItems - _updateThreshold) {
+                widget.getItemsCallback();
+              }
             }
           })
           ..addListener(() {
@@ -245,10 +264,10 @@ class _FlipPanelState<T> extends State<FlipPanel>
       if (_direction == FlipDirection.down && _currentIndex == 0) {
         _dragExtent = 0.0;
       }
-      // Avoid going beyond max. items of widgets list
       if (_direction == FlipDirection.up &&
           _currentIndex == widgets.length - 1) {
         _dragExtent = 0.0;
+        _shouldShowNoMoreItemsMessage = true;
       }
       if (_dragExtent.abs() < _flipExtent) {
         _controller.value = (_dragExtent / _flipExtent).abs();
@@ -263,7 +282,13 @@ class _FlipPanelState<T> extends State<FlipPanel>
   void _handleDragEnd(DragEndDetails details) {
     _dragging = false;
 
-    if (_dragExtent == 0.0) return;
+    if (_dragExtent == 0.0) {
+      if (_shouldShowNoMoreItemsMessage) {
+        _showNoMoreItemsMessage();
+        _shouldShowNoMoreItemsMessage = false;
+      }
+      return;
+    }
 
     final double velocity = details.primaryVelocity;
     final bool fast = velocity.abs() > _kFastThreshold;
@@ -437,4 +462,12 @@ class _FlipPanelState<T> extends State<FlipPanel>
       child: content,
     );
   }
+
+  void _showNoMoreItemsMessage() {
+    Scaffold.of(context).showSnackBar(
+          SnackBar(
+            content: Text("No more articles for selected sources"),
+          ),
+        );
+  }
 }