Flutter Web shows emojis in black&white

Question

In ios/android apps emojis are shown correctly. But using any web-browser (e.g. Chrome) the emoji appears in black and white. I also tried different Font-Families but with the same result.

class _MyHomePageState extends State<MyHomePage> {
      @override
      Widget build(BuildContext context) {
        return const Scaffold(
          body: Center(
            child: Text('Enjoy! 🥳 If there\'s any question')
          ),
        );
      }
    }

Answer 1

Due to the large size of the color emoji font (~24MB), the Flutter team made color emojis an opt-in feature in Flutter 3.10.0 (ref).

To enable it, set the useColorEmoji flag to true when initializing the engine in your index.html file:

engineInitializer.initializeEngine({
  // other config...
  useColorEmoji: true,
});