Flutter - Text inside an Expanded Widget within a Column overflowing - flutter

Question

What I want to achieve is to have a text widget inside a Column of fixed height. When the text is long I want the overflow property which is set to TextOverflow.ellipsis to kick in. The Text widget has its maxLines property set to a high value to allow it to wrap down. But there are other widgets in the column too, both before and after the text widget. The text widget is in an Expanded widget so that it takes up as much room in the column. Full code is pasted below.
The problem with this setup is that the text is overflowing its container parent. I have a border decoration on the container that shows this happening. Why is this happening and how do I fix it.
import 'package:flutter/material.dart';
void main() {
runApp(App());
}
class App extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Overflow"),
),
body: Center(
child: Container(
width: 200.0,
height: 250.0,
child: Card(
child: Column(children: <Widget>[
Image.asset(
"assets/bereket.jpg",
width: double.infinity,
fit: BoxFit.cover,
),
Expanded(
child: Container(
padding: EdgeInsets.all(8.0),
child: (Column(
children: [
Text(
"በረከት ስምኦን፡ «ወይዘሮ አና ጎሜዝ፤ እርስዎ አያገባዎትም! አርፈው ይቀመጡ በልልኝ»",
maxLines: 2,
style: Theme.of(context)
.primaryTextTheme
.subhead
.copyWith(
color: Colors.black,
),
overflow: TextOverflow.ellipsis),
Expanded(
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.green, width: 2.0),
),
child: Text(
"""ባለፉት ሁለት አስርት ዓመታት በኢትዮጵያ ፖለቲካ ከፍተኛ ተጽእኖ ፈጣሪ የነበሩት አቶ በረከት ስምኦን በቅርቡ ከብአዴን ማእከላዊ ኮሚቴ አባልነት መታገዳቸው ይታወሳል።
አቶ በርከት የብአዴን ውሳኔን በተመለከተ እና የወደፊት የፖለቲካ ህይወታቸው ምን ሊሆን እንደሚችል ለቢቢሲ አጋርተዋል።""",
maxLines: 10,
style: Theme.of(context)
.primaryTextTheme
.caption
.copyWith(color: Colors.black),
overflow: TextOverflow.ellipsis,
))),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
width: 20.0,
height: 20.0,
child: Image.asset("assets/bbc.png"),
),
SizedBox(width: 8.0),
Text('ቢቢሲ - ከሁለት ሰአት በፊት',
style: Theme.of(context)
.textTheme
.caption
.copyWith(fontSize: 10.0))
],
)
],
))))
]))),
),
),
);
}
}

Answer 1

Try wrapping your column with 'Flexible' instead of expandable.
I had the same issue with text overflowing in column and wrapping column itself with 'flexible' allowed to make text smaller.
Flexible(
child: Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Text(
'Name',
style: CustomTextStyle.blueTitle14(context),
),
),
Padding(
padding: const EdgeInsets.only(bottom: 4.0),
child: Text('Long text'),
),
],
),
),
),

Answer 2

Based on my experiences, you should assign a fixed width to the Container containing the overflowing text, as per this post. Flutter- wrapping text .

Answer 3

In present version of flutter (presently 3.0) you dont have to use Flexible or Expanded as Column's child automatically expandes to fill the content of child .
For ellipses define the maxLine attribute.
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text(
"This is very very very very very very very very very very very very very very very very very long text in Row 1 of Column",
maxLines: 2,
style: TextStyle(
backgroundColor: Colors.green, overflow: TextOverflow.ellipsis),
),
Text("This is very very long text in Row 2 of Column",
style: TextStyle(
overflow: TextOverflow.ellipsis,
backgroundColor: Colors.yellow))
],
)