fix: handle overflows for users with a long name

This commit is contained in:
Freek van de Ven 2024-06-14 15:47:24 +02:00
parent d13a8013ac
commit d46c83e847
3 changed files with 39 additions and 58 deletions

View file

@ -3,6 +3,7 @@
- fix bug where you could make multiple groups quickly by routing back to the previous screen
- fix bug where you would route back to the user selection screen insterad of routing back to the chat overview screen
- Add onPopInvoked callback to the userstory to add custom behaviour for the back button on the chatscreen
- Handle overflows for users with a long name.
## 3.0.0

View file

@ -46,6 +46,8 @@ class _ChatDetailRowState extends State<ChatDetailRow> {
@override
Widget build(BuildContext context) {
var theme = Theme.of(context);
var isNewDate = widget.previousMessage != null &&
widget.message.timestamp.day != widget.previousMessage?.timestamp.day;
var isSameSender = widget.previousMessage == null ||
@ -54,7 +56,6 @@ class _ChatDetailRowState extends State<ChatDetailRow> {
widget.message.timestamp.minute ==
widget.previousMessage?.timestamp.minute;
var hasHeader = isNewDate || isSameSender;
var theme = Theme.of(context);
return Padding(
padding: EdgeInsets.only(
top: isNewDate || isSameSender ? 25.0 : 0,
@ -69,8 +70,7 @@ class _ChatDetailRowState extends State<ChatDetailRow> {
),
child: Padding(
padding: const EdgeInsets.only(left: 10.0),
child: widget.message.sender.imageUrl != null &&
widget.message.sender.imageUrl!.isNotEmpty
child: widget.message.sender.imageUrl?.isNotEmpty ?? false
? ChatImage(
image: widget.message.sender.imageUrl!,
)
@ -92,27 +92,24 @@ class _ChatDetailRowState extends State<ChatDetailRow> {
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
if (isNewDate || isSameSender)
if (isNewDate || isSameSender) ...[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
if (widget.usernameBuilder != null)
widget.usernameBuilder!(
widget.message.sender.fullName ?? "",
)
else
Text(
widget.message.sender.fullName ??
widget.translations.anonymousUser,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w800,
color: Theme.of(context)
.textTheme
.labelMedium
?.color,
),
),
Expanded(
child: widget.usernameBuilder?.call(
widget.message.sender.fullName ?? "",
) ??
Text(
widget.message.sender.fullName ??
widget.translations.anonymousUser,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w800,
color: theme.textTheme.labelMedium?.color,
),
),
),
Padding(
padding: const EdgeInsets.only(top: 5.0),
child: Text(
@ -129,6 +126,7 @@ class _ChatDetailRowState extends State<ChatDetailRow> {
),
],
),
],
Padding(
padding: const EdgeInsets.only(top: 3.0),
child: widget.message is ChatTextMessageModel
@ -141,10 +139,7 @@ class _ChatDetailRowState extends State<ChatDetailRow> {
(widget.message as ChatTextMessageModel).text,
style: TextStyle(
fontSize: 16,
color: Theme.of(context)
.textTheme
.labelMedium
?.color,
color: theme.textTheme.labelMedium?.color,
),
),
),

View file

@ -167,6 +167,12 @@ class _ChatDetailScreenState extends State<ChatDetailScreen> {
future: widget.service.chatOverviewService.getChatById(widget.chatId),
builder: (context, AsyncSnapshot<ChatModel> snapshot) {
var chatModel = snapshot.data;
var chatTitle = (chatModel is GroupChatModel)
? chatModel.title
: (chatModel is PersonalChatModel)
? chatModel.user.firstName ?? widget.translations.anonymousUser
: "";
return Scaffold(
backgroundColor: theme.colorScheme.surface,
appBar: AppBar(
@ -184,36 +190,12 @@ class _ChatDetailScreenState extends State<ChatDetailScreen> {
),
title: GestureDetector(
onTap: () => widget.onPressChatTitle.call(context, chatModel!),
child: Row(
mainAxisSize: MainAxisSize.min,
children: chat == null
? []
: [
Padding(
padding: (chatModel is GroupChatModel)
? const EdgeInsets.only(left: 15.5)
: EdgeInsets.zero,
child: widget.chatTitleBuilder != null
? widget.chatTitleBuilder!.call(
(chatModel is GroupChatModel)
? chatModel.title
: (chatModel is PersonalChatModel)
? chatModel.user.firstName ??
widget.translations.anonymousUser
: "",
)
: Text(
(chatModel is GroupChatModel)
? chatModel.title
: (chatModel is PersonalChatModel)
? chatModel.user.firstName ??
widget.translations.anonymousUser
: "",
style: theme.appBarTheme.titleTextStyle,
),
),
],
),
child: widget.chatTitleBuilder?.call(chatTitle) ??
Text(
chatTitle,
style: theme.appBarTheme.titleTextStyle,
overflow: TextOverflow.ellipsis,
),
),
),
body: Stack(
@ -251,7 +233,7 @@ class _ChatDetailScreenState extends State<ChatDetailScreen> {
reverse: detailRows.isNotEmpty,
padding: const EdgeInsets.only(top: 24.0),
children: [
if (detailRows.isEmpty && !showIndicator)
if (detailRows.isEmpty && !showIndicator) ...[
Center(
child: Text(
(chatModel is GroupChatModel)
@ -262,12 +244,13 @@ class _ChatDetailScreenState extends State<ChatDetailScreen> {
style: theme.textTheme.bodySmall,
),
),
],
...detailRows,
],
),
),
),
if (chatModel != null)
if (chatModel != null) ...[
ChatBottom(
chat: chatModel,
messageInputBuilder: widget.options.messageInputBuilder,
@ -277,12 +260,13 @@ class _ChatDetailScreenState extends State<ChatDetailScreen> {
iconColor: widget.iconColor,
iconDisabledColor: widget.iconDisabledColor,
),
],
SizedBox(
height: widget.textfieldBottomPadding,
),
],
),
if (showIndicator)
if (showIndicator) ...[
widget.loadingWidgetBuilder?.call(context) ??
const Column(
children: [
@ -295,6 +279,7 @@ class _ChatDetailScreenState extends State<ChatDetailScreen> {
),
],
),
],
],
),
);