fluttercandies / flutter_scrollview_observer

A widget for observing data related to the child widgets being displayed in a ScrollView. Maintainer: @LinXunFeng
https://pub.dev/packages/scrollview_observer
MIT License
440 stars 46 forks source link

Chat room feature #28

Closed ringoswy closed 1 year ago

ringoswy commented 1 year ago

Hi,

I have tried to create a chat room with your library but I am failed to make it works (e.g. keep current position) , is there anything wrong in my coding?

Thanks a lot

class _MessageScreen2State extends State<MessageScreen2>  {
  var scaffoldKey = GlobalKey<ScaffoldState>();
  final ScrollController _scrollController = ScrollController();
  late ListObserverController observerController;
  late ChatScrollObserver chatObserver;

  final List<String> _messages = <String>[];

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(scrollControllerListener);
    observerController = ListObserverController(controller: _scrollController)
      ..cacheJumpIndexOffset = false;
    chatObserver = ChatScrollObserver(observerController)
      ..fixedPositionOffset = 5
      ..toRebuildScrollViewCallback = () {
        setState(() {});
      };

    for (int i = 0; i < 20; i++) {
      _messages.add(i.toString());
    }
  }

  @override
  void dispose() {
    observerController.controller?.dispose();
    _scrollController.dispose();
    super.dispose();
  }

  scrollControllerListener() {}

  add() {
    chatObserver.standby();
    setState(() {
      for (int i = 0; i < 20; i++) {
        _messages.insert(0, (int.parse(_messages.first)-1).toString());
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key:scaffoldKey,
      appBar: AppBar(
        leading: Padding(
          padding: const EdgeInsets.fromLTRB(6, 14, 0, 14),
          child: GestureDetector(
            child: Image.asset(assetImagePath("back.png")),
            onTap: () {
              Navigator.of(context).pop();
            },
          ),
        ),
      ),
      body: Column(
        children: [
          Expanded(
            child: _buildListView(),
          ),
          SafeArea(
            top: false,
            child: GestureDetector(
              child: Image.asset(GlobalFunc().assetImagePath("send.png"),
                  width: 28),
              onTap: () {
                add();
              },
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildListView() {
    Widget resultWidget = ListView.builder(
      physics: ChatObserverClampingScrollPhysics(observer: chatObserver),
      padding: const EdgeInsets.only(left: 10, right: 10, top: 15, bottom: 15),
      shrinkWrap: chatObserver.isShrinkWrap,
      reverse: true,
      controller: _scrollController,
      itemBuilder: ((context, index) {
        return SizedBox(height: 50, child: Text(_messages.elementAt(index)));
      }),
      itemCount: _messages.length,
    );

    resultWidget = ListViewObserver(
      controller: observerController,
      child: resultWidget,
    );
    resultWidget = Align(
      child: resultWidget,
      alignment: Alignment.topCenter,
    );
    return resultWidget;
  }
}
LinXunFeng commented 1 year ago

You should call chatObserver.standby(); before inserting a message, this package temporarily does not support to keep current position when inserting multiple messages at once.

Do you have a scene where multiple messages are inserted at once?

LinXunFeng commented 1 year ago

Please update to version 1.11.0 which supports inserting multiple messages at once. And jump to 3.1、Basic usage to see usage and precautions.