How to Show Colorful Emojis on Flutter Web

Flutter web is a fantastic way to build cross-platform applications, but emojis appear in monochrome instead of their colourful versions. If you’ve encountered this and want to add vibrant, colourful emojis to your Flutter web project, this guide will walk you through the steps.

Step 1: Create a Custom flutter_bootstrap.js File

Flutter uses a JavaScript bootstrap file to initialize the app on the web. To enable colourful emojis, we’ll modify this initialization process.

1. Inside your Flutter project, navigate to the web folder.
2. Create a new file named flutter_bootstrap.js.
3. Add the following code to flutter_bootstrap.js:

{{flutter_js}}
{{flutter_build_config}}

_flutter.loader.load({
    onEntrypointLoaded: async function(engineInitializer) {
        const appRunner = await engineInitializer.initializeEngine({
            useColorEmoji: true
        });

        await appRunner.runApp();
    }
});

This script initializes the Flutter engine with the useColorEmoji: true flag, enabling colourful emoji rendering in your app.

Step 2: Update Your index.html

Make sure your index.html references the new flutter_bootstrap.js file.

1. Open the web/index.html file.
2. Replace the existing script tag with:

<script src="flutter_bootstrap.js" async></script>

This ensures that your custom bootstrap script is used when the app runs.

Step 3: Clean and Rebuild the Project

After updating the bootstrap file, a simple hot reload won’t apply the changes. Follow these steps to rebuild the project from scratch:

1. Close the app if it is currently running.
2. Run the following commands in your terminal:

flutter clean
flutter pub get
flutter run

Note: Hot reload will not apply these changes. You must perform a full restart by stopping and rerunning the app.

Final Thoughts

After following these steps, your Flutter web app should now display colourful emojis beautifully. This simple tweak can significantly enhance the visual appeal of your application, especially if you’re building chat apps, social platforms, or any app where emojis play a big role!