Wrapping long text into a container, causes overflow Flutter - flutter

Question

I'm creating a notification center for my application, and it contains a bit of long strings for the title and the body, and it always causes overflow, I've tried using Expanded widgets, and these following stack over flow questions: Question 1, Question 2 But I cannot apply it to my code, here is what it looks like right now:
I get the text from my firebase cloud firestore, and I'm outputting the texts using a listview.
The title text is this: "Allen Indefenzo has rescinded consent for you to access his/her data"
The body text is this : "He/she has removed all your access and you will no longer be able to view / change his data, to have access again ask for the user to give you his/her special code again."
Here is my code:
Container(
color: Colors.white,
child: StreamBuilder(
stream: db
.collection('users')
.document(userData.userID)
.collection('notifications')
.snapshots(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (!snapshot.hasData) {
return Center(
child: CircularProgressIndicator(),
);
}
if (snapshot.data.documents.length != 0) {
return ListView.builder(
itemCount: snapshot.data.documents.length,
itemBuilder: (BuildContext context, int index) {
return Container(
child: Row(
children: <Widget>[
Container(
height: 150,
width: 100,
child: Image(
image: NetworkImage(
snapshot.data.documents[index]['dpURL']), fit: BoxFit.contain,
),
),
Column(
children: <Widget>[
Container(
height: 50,
width: MediaQuery.of(context).size.width * 0.8,
child:
Text(snapshot.data.documents[index]['title']),
),
Container(
height: 50,
width: MediaQuery.of(context).size.width * 0.8,
child:
Text(snapshot.data.documents[index]['body']),
),
],
),
],
),
);
},
);
}
},
),
),
Any help is appreciated and if you can explain it would be amazing! Thank you so much!

Answer 1

try to wrap your Column inside Expanded,
Container(
child: Row(
children: <Widget>[
Container(
height: 150,
width: 100,
child: Image(
image: NetworkImage(
'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQLBtBU3nUOK7osT41ZsQhP4VBV7fd9euqXvXVKQH0Q7bl4txeD'),
fit: BoxFit.contain,
),
),
Expanded(
child: Column(
children: <Widget>[
Text(
'Reallly looooooooooooooooooooooooooooooong textttttttttttttttttttttttttttttttttttttttttttttttt'),
Text(
'Reallly looooooooooooooooooooooooooooooong textttttttttttttttttttttttttttttttttttttttttttttttt'),
],
),
),
],
),
);
output:
Additionally if you want to limit lines of Text use,
Text(
'Reallly looooooooooooooooooooooooooooooongtextttttttttttttttttttttttttttttttttttttttttttttttt',
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
Output:

Answer 2

Just wrap your column inside expanded widget
Expanded(child:
Column(
children: <Widget>[
Container(
height: 50,
width: MediaQuery.of(context).size.width * 0.8,
child:
Text(snapshot.data.documents[index]['title']),
),
Container(
height: 50,
width: MediaQuery.of(context).size.width * 0.8,
child:
Text(snapshot.data.documents[index]['body']),
),
],
),
),
Expanded widget is useful when you want to fill all the remaining space when a column or row widget have 2 or more child widgets. so wrapping a child inside an expanded widget will fill up the remaining space accordingly.

Answer 3

return Container(child: Row(
children: <Widget>[
Container(
height: 150,
width: 100,
child: Image(
image: NetworkImage(snapshot.data.documents[index]['dpURL']), fit: BoxFit.contain,
),
),
new Expanded(
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: TitleText(
text:snapshot.data.documents[index]['title'] ,
maxLine: 5,
),
),
Container(
height: 50,
width: MediaQuery.of(context).size.width * 0.8,
child: TitleText(
text:snapshot.data.documents[index]['body']),
),
],
),
),
],
),
);