How to create custom background for text and emoji in flutter?

Question

I'm looking to create text with a background like this

I have referred to this and this to come up with the following

As you can see, the background behind the emoji is larger. Is there a way to create a custom background to treat both the emoji and text similarly?

Any suggestion is appreciated! :)

Below is my code snippet:

Text(
  "I'm happiest  when",
  textAlign: TextAlign.center,
  style: TextStyle(
    color: Colors.white,
    fontSize: 18,
    height: 1.35,
    fontWeight: FontWeight.w600,
    background: Paint()
      ..color = Colors.black
      ..strokeWidth = 22.5
      ..strokeJoin = StrokeJoin.round
      ..strokeCap = StrokeCap.round
      ..style = PaintingStyle.stroke,
  ),
),

score 1 · Answer 1 · answered Jul 27 '22 at 07:21

I came up with a workaround. I first replace the emoji with text, then I make the text transparent to create the custom background. I then stack the actual text on the custom background.

Below is my code:

Stack(
  children: [
    Text(
      formatText("the text with emoji"),
      textAlign: TextAlign.center,
      style: TextStyle(
        color: Colors.transparent,
        fontSize: 18,
        height: 1.35,
        fontWeight: FontWeight.w600,
        background: Paint()
          ..color = Colors.black
          ..strokeWidth = 22.5
          ..strokeJoin = StrokeJoin.round
          ..strokeCap = StrokeCap.round
          ..style = PaintingStyle.stroke,
      ),
    ),
    Text(
      "the text with emoji",
      textAlign: TextAlign.center,
      style: TextStyle(
        color: Colors.white,
        fontSize: 18,
        height: 1.35,
        fontWeight: FontWeight.w600,

      ),
    ),
  ],
)

this is how i formatted my text

String formatText(String str) {
    final RegExp regExp = RegExp(r'(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|\ud83c[\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|\ud83c[\ude32-\ude3a]|\ud83c[\ude50-\ude51]|\u203c|\u2049|[\u25aa-\u25ab]|\u25b6|\u25c0|[\u25fb-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9-\u23f3]|[\u23f8-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190-\u21ff])');
    if(str.contains(regExp)){
      str = str.replaceAll(regExp,'w');
    }
    return str; }

Hope it help!

thanks for sharing this. I'm facing the same issue but your solution is not completely matching my case. Replacing emoji by 'w' in text which could have multiple emoji, bigger size, different font, and with multiple lines, it will be totally a mess. Do you have improved your code since you posted this ? Or with a new workaround? — nicover, Dec 31 '22 at 14:40

score 0 · Answer 2 · answered Jul 27 '22 at 09:13

With this code, you can get the expected output.

Container(
          padding: EdgeInsets.all(10),
          decoration: BoxDecoration(
              color: Colors.black, borderRadius: BorderRadius.circular(5)),
          child: const Text(
            "I'm happiest  when",
            textAlign: TextAlign.center,
            style: TextStyle(
              color: Colors.white,
              fontSize: 10,
              fontWeight: FontWeight.w600,
            ),
          ),
        )

Screenshot of iOS Emulator

How to create custom background for text and emoji in flutter?

2 Answers2