flutterflutter-text

Combine AutoSizeText with custom Text Widget


I was using the AutoSizeText package which works fine. But now I want to embed emojis from a custom font into my text. Hence I use the wonderful solution of codingedward. My problem is, that now I have an EmojiText widget, which can show custom emojis from my font but it can't be autosized anymore as AutoSizeText can only take a String as an Input.

Is there another solution, some alternative to AutoSizeText? Or do I have to somehow measure my screenwidth and render my font and check for overflow and make the font smaller until there is no overflow anymore? If this is the only solution, does someone know how to do this?

Thanks a lot.

With AutoSizeText but without emoji

AutoSizeText(
    widget.title,
    textAlign: TextAlign.center,
    style: TextStyle(
      color: Colors.white,
      fontWeight: FontWeight.bold,
      fontSize: 42,
    ),
    maxLines: 1,
  ),

enter image description here

With EmojiText Widget:

EmojiText(
    text: widget.title,
    style: TextStyle(
      color: dragState.onDrag
          ? Colors.white.withValues(alpha: magnifierOpacity)
          : Colors.white,
      fontWeight: FontWeight.bold,
      fontSize: 42,
    ),
  ),

enter image description here


Solution

  • Check out AutoSizeText.rich which allows you to have multiple text spans with different TextStyles (and hence font families).