I want to display an emoji within a text widget, using Flutter.
When I copy an example emoji from the internet, some of them shows up with 2 characters in my IDE.
E.g:
static String dualCharEmoji = "⚔️";static String singleCharEmoji = "🗡";
When I use this variable in the text widget, both of them work fine:
Text("⚔️",)Text("🗡",)
However, only when first running the app, the dual character emoji shows up as its first character only.
i.e. Only when first opening the app, the sword icon shows up as ⚔
instead of as ⚔️
After it gets reloaded it gets fixed, and hot reloading/hot restarting does not makes it bug again.
My question is:
Is this a bug? Am I missing some detail here? Why does it only happen when first opening the app?
How can I show a 2 sized emoji from the start?
I'm using the following Flutter version:
>flutter --versionFlutter 1.9.1+hotfix.4 • channel stable • https://github.com/flutter/flutter.gitFramework • revision cc949a8e8b (9 weeks ago) • 2019-09-27 15:04:59 -0700Engine • revision b863200c37Tools • Dart 2.5.0
See the minimum reproducible example below:
import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget { Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', home: MyHomePage(), ); }}class MyHomePage extends StatefulWidget { MyHomePage({Key key}) : super(key: key); @override _MyHomePageState createState() => _MyHomePageState();}class _MyHomePageState extends State<MyHomePage> { static String dualCharEmoji = "⚔️"; static String singleCharEmoji = "🗡"; String text = dualCharEmoji; int count = 0; void swapText() { setState(() { if (count % 2 == 0) text = singleCharEmoji; else text = dualCharEmoji; count++; }); } @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( text, style: TextStyle(fontSize: 50), ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: swapText, ), ); }}