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.
|
1 |
import 'package:flutter/material.dart'; |
2. Create void main runApp() method and call our main MyApp class here.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main class named as MyApp extends with State less widget.
|
1 2 3 4 |
class MyApp extends StatelessWidget { } |
4. Create a Column widget in body section of Scaffold widget.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Flutter Ellipsis Text Example') ), body: Column( children :[ ]) ) ); } |
5. Create a Text widget wrap in Container widget with overflow: TextOverflow.ellipsis property.
|
1 2 3 4 5 6 7 8 |
Container( padding: EdgeInsets.fromLTRB(20, 20, 20, 0), child :Text( "This is a sample long text line we are using in our example.", style: TextStyle(fontSize: 22), overflow: TextOverflow.ellipsis, textAlign: TextAlign.center, )), |
6. Create another Text widget with overflow: TextOverflow.clip property in Column widget.
|
1 2 3 4 5 6 7 8 9 10 |
Container( padding: EdgeInsets.fromLTRB(20, 20, 20, 0), child :Text( "This is a sample long text line we are using in our example.", style: TextStyle(fontSize: 22), overflow: TextOverflow.clip, textAlign: TextAlign.center, maxLines: 1, softWrap: false, )), |
7. Create another Text widget with overflow: TextOverflow.fade property.
|
1 2 3 4 5 6 7 8 9 10 |
Container( padding: EdgeInsets.fromLTRB(20, 20, 20, 0), child :Text( "This is a sample long text line we are using in our example.", style: TextStyle(fontSize: 22), overflow: TextOverflow.fade, textAlign: TextAlign.center, maxLines: 1, softWrap: false, )) |
8. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Flutter Ellipsis Text Example') ), body: Column( children :[ Container( padding: EdgeInsets.fromLTRB(20, 20, 20, 0), child :Text( "This is a sample long text line we are using in our example.", style: TextStyle(fontSize: 22), overflow: TextOverflow.ellipsis, textAlign: TextAlign.center, )), Container( padding: EdgeInsets.fromLTRB(20, 20, 20, 0), child :Text( "This is a sample long text line we are using in our example.", style: TextStyle(fontSize: 22), overflow: TextOverflow.clip, textAlign: TextAlign.center, maxLines: 1, softWrap: false, )), Container( padding: EdgeInsets.fromLTRB(20, 20, 20, 0), child :Text( "This is a sample long text line we are using in our example.", style: TextStyle(fontSize: 22), overflow: TextOverflow.fade, textAlign: TextAlign.center, maxLines: 1, softWrap: false, )) ]) ) ); } } |
Screenshot:
