Flutter TextOverflow not working, and causing RenderOverflow - flutter

Question

I'm trying to make a chat app UI, and thought of using TextOverflow to fix the problem where the last sent message exceedes the size of the screen and causes Render Overflow. So I simply modified my Text widget, adding these 3 lines-
Text(
widget.lastMessage,
overflow: TextOverflow.ellipsis,
maxLines: 1,
softWrap: true,
style: const TextStyle(
fontWeight: FontWeight.w200,
),
)
However, this made no difference-
Here's the code-
Main ListView-
import 'package:project_name/widgets/chat_preview_tile_widget.dart';
import 'package:flutter/material.dart';
class ChatPreviewTileCard extends StatefulWidget {
const ChatPreviewTileCard({Key? key}) : super(key: key);
#override
_ChatPreviewTileCardState createState() => _ChatPreviewTileCardState();
}
class _ChatPreviewTileCardState extends State<ChatPreviewTileCard> {
#override
Widget build(BuildContext context) {
return Expanded(
child: ListView.builder(
itemCount: 10,
itemBuilder: (context, n) {
//Individual List Tile
return const ChatPreviewTileWidget(
username: "Person",
imageUrl:
"https://www.nme.com/wp-content/uploads/2021/07/RickAstley2021.jpg",
time: "9:30PM",
hasUnreadMessage: true,
lastMessage:
"i am susssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssSSSSSSSSSSs",
);
},
),
);
}
}
Individual Tile Widget-
import 'package:airing/screens/chat_screen/user_chat/user_chat_screen.dart';
import 'package:airing/utils/color_themes.dart';
import 'package:flutter/material.dart';
class ChatPreviewTileWidget extends StatefulWidget {
final String username;
final String imageUrl;
final String time;
final bool hasUnreadMessage;
final String lastMessage;
const ChatPreviewTileWidget({
Key? key,
required this.username,
required this.imageUrl,
required this.time,
required this.hasUnreadMessage,
required this.lastMessage,
}) : super(key: key);
#override
_ChatPreviewTileWidgetState createState() => _ChatPreviewTileWidgetState();
}
class _ChatPreviewTileWidgetState extends State<ChatPreviewTileWidget> {
static int widgetsInScreen = 12;
static int pfpPadding = 10;
#override
Widget build(BuildContext context) {
return InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return UserChatScreen(
imageUrl: widget.imageUrl, username: widget.username);
},
),
);
},
child: Column(
children: [
Container(
width: double.infinity,
height: MediaQuery.of(context).size.height / widgetsInScreen,
padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 2.5),
//main row
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
//Pfp, username and last message row
Row(
mainAxisSize: MainAxisSize.min,
children: [
CircleAvatar(
backgroundColor: secondaryColor,
backgroundImage: NetworkImage(
widget.imageUrl,
),
radius: ((MediaQuery.of(context).size.height /
widgetsInScreen) -
(2 * pfpPadding)) /
2,
),
Padding(
padding: const EdgeInsets.only(
left: 10,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
widget.username,
style: TextStyle(
fontWeight: FontWeight.bold,
color: secondaryMainThemeColor),
),
Text( //Here is the text message widget.
widget.lastMessage,
overflow: TextOverflow.ellipsis,
maxLines: 1,
softWrap: true,
style: const TextStyle(
fontWeight: FontWeight.w200,
),
)
],
),
)
],
),
//sent and notification Column
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
widget.time,
style: TextStyle(
color: secondaryMainThemeColor,
fontWeight: FontWeight.w200),
),
Icon(
Icons.circle_rounded,
color: mainThemeColor,
size: 15,
)
],
)
],
),
),
const Divider()
],
));
}
}
How do I fix this? Thanks in advance!

Answer 1

Wrap your Text Column with Expanded widget like this:
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
widget.username,
style: TextStyle(
fontWeight: FontWeight.bold, color: secondaryMainThemeColor),
),
Text(
//Here is the text message widget.
widget.lastMessage,
overflow: TextOverflow.ellipsis,
maxLines: 1,
softWrap: true,
style: const TextStyle(
fontWeight: FontWeight.w200,
),
)
],
),
),
Hope It Works!

Answer 2

Change your code to this:
import 'package:airing/screens/chat_screen/user_chat/user_chat_screen.dart';
import 'package:airing/utils/color_themes.dart';
import 'package:flutter/material.dart';
class ChatPreviewTileWidget extends StatefulWidget {
final String username;
final String imageUrl;
final String time;
final bool hasUnreadMessage;
final String lastMessage;
const ChatPreviewTileWidget({
Key? key,
required this.username,
required this.imageUrl,
required this.time,
required this.hasUnreadMessage,
required this.lastMessage,
}) : super(key: key);
#override
_ChatPreviewTileWidgetState createState() => _ChatPreviewTileWidgetState();
}
class _ChatPreviewTileWidgetState extends State<ChatPreviewTileWidget> {
static int widgetsInScreen = 12;
static int pfpPadding = 10;
#override
Widget build(BuildContext context) {
return InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return UserChatScreen(
imageUrl: widget.imageUrl, username: widget.username);
},
),
);
},
child: Column(
children: [
Container(
width: double.infinity,
height: MediaQuery.of(context).size.height / widgetsInScreen,
padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 2.5),
//main row
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
//Pfp, username and last message row
Row(
mainAxisSize: MainAxisSize.min,
children: [
CircleAvatar(
backgroundColor: secondaryColor,
backgroundImage: NetworkImage(
widget.imageUrl,
),
radius: ((MediaQuery.of(context).size.height /
widgetsInScreen) -
(2 * pfpPadding)) /
2,
),
**//here is the changes**
Expanded(child: Padding(
padding: const EdgeInsets.only(
left: 10,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
widget.username,
style: TextStyle(
fontWeight: FontWeight.bold,
color: secondaryMainThemeColor),
),
Text( //Here is the text message widget.
widget.lastMessage,
overflow: TextOverflow.ellipsis,
maxLines: 1,
softWrap: true,
style: const TextStyle(
fontWeight: FontWeight.w200,
),
)
],
),),
)
],
),
//sent and notification Column
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
widget.time,
style: TextStyle(
color: secondaryMainThemeColor,
fontWeight: FontWeight.w200),
),
Icon(
Icons.circle_rounded,
color: mainThemeColor,
size: 15,
)
],
)
],
),
),
const Divider()
],
));
}
}

Answer 3

Nevermind! Wrapping my text widget with a SizedBox with a defined width fixed it-
SizedBox(
width: MediaQuery.of(context).size.width / 2,
child: Text(
widget.lastMessage,
overflow: TextOverflow.ellipsis,
maxLines: 1,
softWrap: true,
style: const TextStyle(
fontWeight: FontWeight.w200,
),
),
),