Comment/Code - How to load and display pages of network data.

loading_and_displaying_pages_of_data.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: App(),
    );
  }
}

class ChatMessage {
  final int senderId;
  final String text;
  final bool isMine;
  final DateTime timeStamp;

  ChatMessage({this.senderId, this.text, this.isMine, this.timeStamp});
}
class App extends StatefulWidget {
  @override
  _AppState createState() => _AppState();
}

class _AppState extends State<App> {
  GlobalKey<AnimatedListState> chatListViewKey = GlobalKey<AnimatedListState>();
  List<ChatMessage> messages = [];
  ScrollController _controller = ScrollController();
  /// should be coming service layer
  User currentUser;
  bool isLoading = false;

  @override
  void initState() {
    loadMessage();
    _controller.addListener(_scrollListener);
    super.initState();
  }

  void _scrollListener() {
    /// if (At the end of the list) {
    ///   loadMessage();
    ///}   
  }

  Future<void> loadMessage() async {
    setState(() {
      isLoading = true;
    });
    /// query your api
    /// if (success) {
    ///   Deserialize your data into dart objects [List<ChatMessage>] e.g
    ///   var conversations = res['data']['chatMessages']['data'] as List;
    ///   var newMessage = conversations.map((item) => ChatMessage.fromJSON(item)).toList();
    ///   ## Update the messages list in state
    ///   messages.addAll(newMessages);
    ///   ## You can notify with setState() call
    ///
    /// } otherwise {
    ///   handle Errors
    /// }
    ///
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Conversation'),),
      body: Container(
        child: Column(
          children: [
            /// Some Widget if you wish
            Expanded(
              child: ListView.builder(
                controller: _controller,
                key: chatListViewKey,
                reverse: true,
                itemCount: messages.length,
                itemBuilder: (context, index) {
                  var message = messages.elementAt(index);
                  /// Skip this message
                  if (message.text == null) return SizedBox();

                  return ChatBubble(
                    text: message.text,
                    isMine: message.isMine,
                    messageTime: message.timeStamp,
                  );
                },
              ),
            ),

            /// Some Other Widgets if you wish
          ],
        ),
      ),
    );
  }
}

class ChatBubble extends StatelessWidget {
  final String text;
  final DateTime messageTime;
  final bool isMine;

  ChatBubble({
    @required this.text,
    @required this.messageTime,
    @required this.isMine});

  @override
  Widget build(BuildContext context) {
    return Container(
      /// break-a-leg
      child: Text(text),
    );
  }
}

class User {
  int userId;
  String username;
  String profileUrl;
  /// etc

  User({this.userId, this.username, this.profileUrl});
}