How To Overflow Ellipsis Text In Flutter Android App

admin_img Posted By Bajarangi soft , Posted On 10-09-2020

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.

How To Overflow Ellipsis Text In Flutter Android App

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

You Can Add Overflow Ellipsis Text Code:
Column(
    children :[
      Container(
          padding: EdgeInsets.fromLTRB(20, 20, 20, 0),
          child :Text(
            "In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate.",
            style: TextStyle(fontSize: 22),
            overflow: TextOverflow.ellipsis,
            textAlign: TextAlign.center,
          )),

      Container(
          padding: EdgeInsets.fromLTRB(20, 20, 20, 0),
          child :Text(
            "The visual form of a document or a typeface without relying on meaningful content.",
            style: TextStyle(fontSize: 22),
            overflow: TextOverflow.clip,
            textAlign: TextAlign.center,
            maxLines: 1,
            softWrap: false,
          )),
    ])

Complete Code For Overflow Ellipsis Text In Flutter:
Main.dart
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
        home: Scaffold(
            appBar: AppBar(
              centerTitle: true,
                backgroundColor: Colors.white,
                title: Text('OverFlow Ellipsis Text',style: TextStyle(color: Colors.black),)
            ),
            body: Column(
                children :[
                  Container(
                      padding: EdgeInsets.fromLTRB(20, 20, 20, 0),
                      child :Text(
                        "In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate.",
                        style: TextStyle(fontSize: 22),
                        overflow: TextOverflow.ellipsis,
                        textAlign: TextAlign.center,
                      )),

                  Container(
                      padding: EdgeInsets.fromLTRB(20, 20, 20, 0),
                      child :Text(
                        "The visual form of a document or a typeface without relying on meaningful content.",
                        style: TextStyle(fontSize: 22),
                        overflow: TextOverflow.clip,
                        textAlign: TextAlign.center,
                        maxLines: 1,
                        softWrap: false,
                      )),
                ])
        )
    );
  }
}

Related Post