Set Text Overflow Ellipsis Text in Flutter Android iOS Example

The Text widget has a property named as Overflow, which is used to set how the text overflow should be handled in mobile application. The Overflow property supports multiple argument like Ellipsis, clip and fade. We are making this tutorial for explaining Text property Ellipsis. Using the Ellipsis property we can add multiple line of Text in flutter application without disturbing other content of screen. When the given width space is occupied by text then it will simply add …(3 dotes) after it and hide all the text from screen. So in this tutorial we would Set Text Overflow Ellipsis Text in Flutter Android iOS Example Tutorial.

Content in this project Set Text Overflow Ellipsis Text in Flutter Android iOS Example Tutorial:

1. Import material.dart package in your app’s main.dart file.

2. Create void main runApp() method and call our main MyApp class here.

3. Create our main class named as MyApp extends with State less widget.

4. Create a Column widget in body section of Scaffold widget.

5. Create a Text widget wrap in Container widget with overflow: TextOverflow.ellipsis property.

6. Create another Text widget with overflow: TextOverflow.clip property in Column widget.

7. Create another Text widget with overflow: TextOverflow.fade property.

8. Complete source code for main.dart file:

Screenshot:

Set Text Overflow Ellipsis Text in Flutter Android iOS Example

Leave a Reply

Your email address will not be published.