Estou usando ListView.builder
para exibir as mensagens. É basicamente um Row
e eu mudo o mainAxisAlignment
, se é o usuário atual ou não. Basicamente, se for o usuário atual, a mensagem será exibida à direita, caso contrário, à esquerda. Porém, o problema é que se a mensagem for muito longa, ela transborda a tela.
Tentei adicionar overflow: TextOverflow.visible
ao Text
widget, mas não resolveu meu problema.
Este é meu Widget build
:
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: true,
appBar: AppBar(
backgroundColor: Colors.white,
elevation: 0.0,
title: Text(
'Chat',
style: TextStyle(
fontFamily: 'Chalet',
fontWeight: FontWeight.w300,
fontSize: widget.deviceWidth * 0.06),
),
),
backgroundColor: whitePrimary,
body: Column(
children: [
Expanded(
child: ListView.builder(
controller: _scrollController,
itemCount: _messages.length,
itemBuilder: (BuildContext context, int index) {
final message = _messages[index];
final isCurrentUser =
message.username == _currentUserUsername;
return ListTile(title: _chatRow(isCurrentUser, message));
}),
),
],
),
);
}
Widget _chatRow(bool isCurrentUser, MessageResponse message) {
// Positions the message depending on if the current user sent it or not
if (isCurrentUser) {
return SingleChildScrollView(
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text(
message.message,
overflow: TextOverflow.visible,
),
const SizedBox(width: 5),
Text(
message.username,
style: const TextStyle(color: orangePrimary),
overflow: TextOverflow.visible,
)
],
),
);
} else {
return SingleChildScrollView(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [Text(message.username), Text(message.message)],
),
);
}
}
As mensagens mostradas devem ser exibidas à direita. A mensagem em várias linhas e na primeira linha deve constar o nome de usuário.
Use Wrap em vez de Row