Flutter - Text inside an Expanded Widget within a Column overflowing

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))
                              ],
                            )
                          ],
                        ))))
              ]))),
        ),
      ),
    );
  }
}

score 39 · Answer 1 · answered Oct 21 '18 at 14:58

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'),
                ),
              ],
            ),
          ),
        ),

score 1 · Answer 2 · answered Sep 07 '18 at 12:48

1

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

answered Sep 07 '18 at 12:48

Max Lambertini

3,583
1
19
24

score 1 · Answer 3 · answered Dec 28 '22 at 17:46

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))
  ],
)

Flutter - Text inside an Expanded Widget within a Column overflowing

3 Answers3

Linked