Question 366213 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – how to implement infinite scrolling when scrolling up

I’m using https://pub.dev/packages/infinite_scroll_pagination for a messaging app I’m developing. It works well, but I’m showing the latest message on the top, and the oldest on the bottom: by scrolling the older messages are loaded.
In order to make it more UX friendly, I would like to sort the messages the other way, like a normal IM one: I want to load the latest messages sorted by time ASC, and load the previous messages when scrolling up.

Is there a library that could me help out with this? How could I develop this?

Tags:

2

Answers


  1. 0

    Would highly recommend using the ListView widget and Streams with the position.maxScrollExtent and position.pixels attributes from the ScrollController class

    You can try setting the reverse flag to true into the ListView widget (which is false by default), or manually reverse your array by using list.reversed.toList();

    Find more about Streams and ListView widget on:

    https://dart.dev/tutorials/language/streams

    https://api.flutter.dev/flutter/widgets/ListView-class.html

    Login or Signup to reply.
  2. 0

    Yes, indeed, it sounds like the dash_chat_2 package could be a great fit for your needs.

    It is a comprehensive chat UI package for Flutter with lots of customization options. You can easily configure the message collection to load in descending order, from the most recent to older ones, giving your users that expected messaging experience. When the user scrolls up, previous messages are loaded.

    It also includes features such as quick reply suggestions and attachment support.

    #Installation:

    With Flutter:

    flutter pub add dash_chat_2

    This will add a line like this to your package’s pubspec.yaml (and run an implicit flutter pub get ):

    dependencies:
  dash_chat_2: ^0.0.20

    Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

    #Implementation:

    import 'package:dash_chat_2/dash_chat_2.dart';
import 'package:flutter/material.dart';

class Basic extends StatefulWidget {
  @override
  _BasicState createState() => _BasicState();
}

class _BasicState extends State<Basic> {
  ChatUser user = ChatUser(
    id: '1',
    firstName: 'Charles',
    lastName: 'Leclerc',
  );

  List<ChatMessage> messages = <ChatMessage>[
    ChatMessage(
      text: 'Hey!',
      user: user,
      createdAt: DateTime.now(),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Basic example'),
      ),
      body: DashChat(
        currentUser: user,
        onSend: (ChatMessage m) {
          setState(() {
            messages.insert(0, m);
          });
        },
        messages: messages,
      ),
    );
  }
}

    For more detail you can visit dash_chat_2

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search