[Solved] Text Overflow Not Working in Flutter

In this post, we will show you how to solve if text overflow is not working in Flutter. This error happens when the Text widget is placed in the Row widget. See the example below to solve if text overflow is not working in your app.

Row(
  children: [
    Text(
        "Lorem ipsum dolor sit amet. Et officia expedita sed quas dolorem",
        overflow: TextOverflow.ellipsis,
    ) 
  ]
)

Here, the Row established the unbounded width, and inside it, Text has unlimited width, therefore the text-overflow doesn't work. The output screen will look like the below:

To solve this issue, wrap Text() widget with Expanded() or Flexible() widget.

Expanded(
  child:Text(
    "Lorem ipsum dolor sit amet. Et officia expedita sed quas dolorem",
    overflow: TextOverflow.ellipsis,
  )
)

OR, wrap with Flexible() widget:

Flexible(
  child:Text(
    "Lorem ipsum dolor sit amet. Et officia expedita sed quas dolorem",
    overflow: TextOverflow.ellipsis,
  )
)

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      appBar: AppBar( 
          title: Text("Text Overflow"),
          backgroundColor: Colors.deepPurpleAccent,
      ),
      body: Container(
        padding: EdgeInsets.all(30),
        child: Row(
            children: [
                Expanded(
                  child:Text(
                    "Lorem ipsum dolor sit amet. Et officia expedita sed quas dolorem",
                    overflow: TextOverflow.ellipsis,
                  )
                ),  
            ]
        ),
      ),
    );
  }
}

In this way, you can solve the issue if text overflow is not working in your Flutter app.

No any Comments on this Article


Please Wait...