🧥 emoji not showing in Flutter application

Question

I'm trying to show emojis based on the user's current location and weather. All my emojis are shown correctly except for the coat emoji (🧥)

I am using the "SpartanMB-Black.otf" font

Here's my code

class WeatherModel {
  String getWeatherIcon(int condition) {
    if (condition < 300) {
      return '🌩';
    } else if (condition < 400) {
      return '🌧';
    } else if (condition < 600) {
      return '☔️';
    } else if (condition < 700) {
      return '☃️';
    } else if (condition < 800) {
      return '🌫';
    } else if (condition == 800) {
      return '☀️';
    } else if (condition <= 804) {
      return '☁️';
    } else {
      return '🤷‍';
    }
  }

  String getMessage(int temp) {
    if (temp > 25) {
      return 'It\'s 🍦 time';
    } else if (temp > 20) {
      return 'Time for shorts and 👕';
    } else if (temp < 10) {
      return 'You\'ll need 🧣 and 🧤';
    } else {
      return 'Bring a 🧥 just in case';
    }
  }
}

Screenshot

Any reason why?

Answer 1

Instead of using a hardcoded emoji of ?, try to use the unicode of each emoji's. For ?, the code is U+1F9E5 as listed here. This is how you handle it in Flutter:

String coat = '\u{1F9E5}';

Sample implementation:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        fontFamily: 'SpartanMB',
      ),
      home: const MyHomePage(title: 'Emoji'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String coat = '\u{1F9E5}'; // U+1F9E5

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Center(
              child: Text(
                coat,
                style: TextStyle(
                  fontSize: 200,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Note: I've set SpartanMB to be used as a custom font.

Sample output in different platforms:

Android

iOS

web

As you can observed, the output of each emoji is different depending on the platform used. I think using this approach is safer for cross-platform app.

As of to date, Flutter uses the default Emojis supported on a given platform. Therefore, when building a cross-platform app you may face issues of Emojis showing on certain devices and not on others.