ui: Kinda implement scroll to bottom

This commit is contained in:
PapaTutuWawa 2022-01-02 21:34:52 +01:00
parent b6509c7e8e
commit 1621c6cc0d
3 changed files with 42 additions and 11 deletions

View File

@ -1,5 +1,4 @@
import "dart:async"; import "dart:async";
import "package:flutter/material.dart";
import "package:moxxyv2/ui/widgets/topbar.dart"; import "package:moxxyv2/ui/widgets/topbar.dart";
import "package:moxxyv2/ui/widgets/chatbubble.dart"; import "package:moxxyv2/ui/widgets/chatbubble.dart";
@ -14,6 +13,9 @@ import "package:moxxyv2/ui/pages/conversation/arguments.dart";
import "package:moxxyv2/ui/constants.dart"; import "package:moxxyv2/ui/constants.dart";
import "package:moxxyv2/ui/helpers.dart"; import "package:moxxyv2/ui/helpers.dart";
import "package:flutter/material.dart";
import "package:flutter/scheduler.dart";
import "package:scrollable_positioned_list/scrollable_positioned_list.dart";
import "package:flutter_speed_dial/flutter_speed_dial.dart"; import "package:flutter_speed_dial/flutter_speed_dial.dart";
import "package:flutter_redux/flutter_redux.dart"; import "package:flutter_redux/flutter_redux.dart";
import "package:redux/redux.dart"; import "package:redux/redux.dart";
@ -62,18 +64,26 @@ class _MessageListViewModel {
_MessageListViewModel({ required this.conversation, required this.showSendButton, required this.sendMessage, required this.setShowSendButton, required this.showScrollToEndButton, required this.setShowScrollToEndButton, required this.closeChat, required this.messages, required this.resetCurrentConversation }); _MessageListViewModel({ required this.conversation, required this.showSendButton, required this.sendMessage, required this.setShowSendButton, required this.showScrollToEndButton, required this.setShowScrollToEndButton, required this.closeChat, required this.messages, required this.resetCurrentConversation });
} }
class ConversationPage extends StatelessWidget { class ConversationPage extends StatefulWidget {
ConversationPage({ Key? key }) : super(key: key);
@override
_ConversationPageState createState() => _ConversationPageState();
}
class _ConversationPageState extends State<ConversationPage> {
TextEditingController controller = TextEditingController(); TextEditingController controller = TextEditingController();
ItemScrollController itemScrollController = ItemScrollController();
ItemPositionsListener itemPositionsListener = ItemPositionsListener.create();
ValueNotifier<bool> _isSpeedDialOpen = ValueNotifier(false); ValueNotifier<bool> _isSpeedDialOpen = ValueNotifier(false);
bool _shouldScroll = true;
// TODO // TODO
/*
@override @override
void dispose() { void dispose() {
this.controller.dispose(); this.controller.dispose();
super.dispose(); super.dispose();
} }
*/
void _onMessageTextChanged(String value, _MessageListViewModel viewModel) { void _onMessageTextChanged(String value, _MessageListViewModel viewModel) {
// Only dispatch the action if we have to // Only dispatch the action if we have to
@ -94,6 +104,7 @@ class ConversationPage extends StatelessWidget {
// NOTE: Calling clear on the controller does not trigger a onChanged on the // NOTE: Calling clear on the controller does not trigger a onChanged on the
// TextField // TextField
this._onMessageTextChanged("", viewModel); this._onMessageTextChanged("", viewModel);
this._shouldScroll = true;
} }
} }
@ -148,6 +159,16 @@ class ConversationPage extends StatelessWidget {
); );
}, },
builder: (context, viewModel) { builder: (context, viewModel) {
SchedulerBinding.instance!.addPostFrameCallback((_) {
if (this._shouldScroll) {
this.itemScrollController.scrollTo(
index: viewModel.messages.length - 1,
duration: Duration(milliseconds: 300),
curve: Curves.easeInOutCubic
);
this._shouldScroll = false;
}
});
return WillPopScope( return WillPopScope(
onWillPop: () async { onWillPop: () async {
viewModel.resetCurrentConversation(); viewModel.resetCurrentConversation();
@ -205,9 +226,11 @@ class ConversationPage extends StatelessWidget {
Expanded( Expanded(
child: Stack( child: Stack(
children: [ children: [
ListView.builder( ScrollablePositionedList.builder(
itemCount: viewModel.messages.length, itemCount: viewModel.messages.length,
itemBuilder: (context, index) => this._renderBubble(viewModel.messages, index, maxWidth) itemBuilder: (context, index) => this._renderBubble(viewModel.messages, index, maxWidth),
itemScrollController: this.itemScrollController,
itemPositionsListener: this.itemPositionsListener
), ),
Positioned( Positioned(
bottom: 64.0, bottom: 64.0,

View File

@ -683,6 +683,13 @@ packages:
url: "https://pub.dartlang.org" url: "https://pub.dartlang.org"
source: hosted source: hosted
version: "1.0.2" version: "1.0.2"
scrollable_positioned_list:
dependency: "direct main"
description:
name: scrollable_positioned_list
url: "https://pub.dartlang.org"
source: hosted
version: "0.2.3"
shelf: shelf:
dependency: transitive dependency: transitive
description: description:

View File

@ -46,6 +46,7 @@ dependencies:
cryptography: ^2.0.5 cryptography: ^2.0.5
basic_utils: ^3.9.4 basic_utils: ^3.9.4
saslprep: ^1.0.2 saslprep: ^1.0.2
scrollable_positioned_list: ^0.2.3
#flutter_local_notifications: ^9.1.5 #flutter_local_notifications: ^9.1.5
#qr_code_scanner: ^0.6.1 #qr_code_scanner: ^0.6.1
#unifiedpush: ^3.0.1 #unifiedpush: ^3.0.1