CODEWITHSUNDEEP
flutterdartflutter-layout
user10539074
user10539074

Reputation:

How to remove extra space on right side of Text when using TextOverflow.ellipsis

Here is a code:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: Home()));
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          width: 200,
          color: Colors.green[200],
          child: Text(
            'https://someurl.com/4792479008289298462374623746723457',
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
          ),
        ),
      ),
    );
  }
}

the result is not exactly what I expected:
enter image description here

but I need something like this:
enter image description here

softWrap doesn't help in this case

Upvotes: 3

Views: 1805

Answers (1)

timilehinjegede
timilehinjegede

Reputation: 14053

Following the Github issue: Text overflow with ellipsis is weird and ugly by design

Here is a quick fix for it:

  1. The TextOverflow.ellipsis uses a regex pattern \u2026, you can apply a regex pattern[\u{200B}] on the Text data

Code :

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          width: 200,
          color: Colors.green[200],
          child: Text(
            'https://someurl.com/479247900828929846'.replaceAll("", "\u{200B}"),
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
          ),
        ),
      ),
    );
  }
}

OUTPUT:

enter image description here

  1. Use the flutter package which gives you the ability to do this Assorted Layout Widgets

Upvotes: 15

Related Questions