Flutter: Text overflow ellipsis with three dots in the middle of the text

Question

Is there any way to set the overflow dots to middle of the text in Flutter?

A normal use case is displaying filenames where the file extension is also visible to the user.

i.e., Currently, by using Text widget with overflow parameter as TextOverflow.ellipsis, we are getting the following

Text(
    "IMG_100232321321312312312312312321321312321343024.PNG",
    maxLines: 1,
    overflow: TextOverflow.ellipsis,
    style: Theme.of(context).textTheme.caption,
);

The result will be something like:

IMG_10023232132131...

Is there any way can we get a result like this:

IMG_10023...3024.PNG

Answer 1

Could do something like this..

Row(
      children: <Widget>[
        Spacer(),
        Expanded(
          child: Text(
            fileName.length > 8 ? fileName.substring(0, fileName.length - 8) : fileName,
            maxLines: 1,
            textAlign: TextAlign.end,
            overflow: TextOverflow.ellipsis,
          ),
        ),
        Expanded(
          child: Text(
            fileName.length > 8 ? fileName.substring(fileName.length - 8) : '',
            maxLines: 1,
            textAlign: TextAlign.start,
          ),
        ),
        Spacer(),
      ],
)

Answer 2

You can use path library like this:

import 'package:path/path.dart' as path;

   var data = "IMG_100232321321312312312312312321321312321343024.PNG";


          Row(
              children: <Widget>[
                Flexible(
                  child: Text(
                    data.split(path.extension(data))[0],
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: Theme.of(context).textTheme.caption,
                  ),
                ),
                Text(
                  path.extension(data),
                  style: Theme.of(context).textTheme.caption,
                ),
              ],
            )