Как удалить лишнее пространство с правой стороны текста при использовании TextOverflow.ellipsis

Question

Вот код:

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,
          ),
        ),
      ),
    );
  }
}

результат не совсем то, что я ожидал:

but I need something like this:
введите описание изображения здесь

softWrap в этом случае не помогает

Answer 1

После проблемы с Github: Переполнение текста с многоточием - это странно и некрасиво по дизайну

Вот быстрое решение для этого:

1. В TextOverflow.ellipsis используется шаблон регулярного выражения \u2026, вы можете применить шаблон регулярного выражения [\u{200B}] к Text data

Код:

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,
          ),
        ),
      ),
    );
  }
}

ВЫХОД:

2. Используйте пакет flutter, который дает вам возможность сделать это Виджеты разных макетов