Promptless AI is here soon - Production-ready contextual code. Don't just take our word for it. Know more
Know More
Education

Exploring the Power of Flutter WebAssembly: What You Need to Know

logo

Kesar Bhimani

Engineering
logo

Nidhi Sorathiya

Engineering
logo

August 18, 2023
image
Author
logo

{
August 18, 2023
}

In the ever-evolving world of web development, we are constantly on the lookout for tools that can enhance our coding experience. Two such tools that have made a significant impact are Flutter and WebAssembly (Wasm). Flutter, a UI toolkit developed by Google, has revolutionized the way we build natively compiled applications for mobile, web, and desktop from a single codebase. On the other hand, WebAssembly, a binary instruction format, provides a new way to run code written in multiple languages on the web at near-native performance.

The combination of Flutter and WebAssembly, known as Flutter WebAssembly, opens up a world of possibilities for developers. It allows us to compile Dart code, the language used in Flutter, into a Wasm module. This Wasm module can then be loaded and executed in the browser, providing a more efficient and faster way to run web applications.

WebAssembly modules, or Wasm modules, are binary files that contain a series of instructions that can be executed by a Wasm runtime. These modules are created by compiling source code written in languages such as C, C++, Rust, and now, Dart. The compiled Wasm module can then be loaded into a web platform, such as a browser, where it can interact with JavaScript code and the browser's APIs.

The ability to compile Dart code into a Wasm module is a significant advancement for Flutter developers. It allows us to leverage the power of WebAssembly in our Flutter apps, leading to more efficient code execution and improved performance.

Understanding WebAssembly (Wasm)

Wasm, or WebAssembly, is a binary instruction format for a stack-based virtual computer. It is intended to be a portable target for the compilation of high-level languages such as C, C++, Rust, and now Dart, allowing client and server programs to be deployed on the web.

What is WebAssembly?

WebAssembly is a low-level binary format that is closer to machine code than JavaScript. This means that a Wasm module, once compiled, can execute at near-native performance. Unlike JavaScript, which is a text-based language that needs to be parsed and interpreted, Wasm files are delivered in a binary format that is much smaller and faster to decode and execute.

Why Use WebAssembly?

The need for WebAssembly in web development arises from the limitations of JavaScript. While JavaScript has been the de facto language of the web, it was not designed to handle the performance requirements of modern web applications. JavaScript code can be slow to download, parse, and execute, especially on mobile devices with limited resources.

This is where WebAssembly comes in. With Wasm, we can write our code in languages like C, C++, Rust, and Dart, compile it into a Wasm module, and run it in the browser at near-native speed. This allows us to build web applications that are faster, more efficient, and more responsive.

Advantages of Using WebAssembly

There are several advantages to using WebAssembly in our web applications:

  1. Performance: Wasm modules are delivered in a binary format that is faster to decode and execute than JavaScript. This can lead to significant performance improvements, especially for computationally intensive tasks.
  2. Language Flexibility: With Wasm, we are not limited to JavaScript for web development. We can write our code in languages like C, C++, Rust, and Dart, and compile it into a Wasm module that can be executed in the browser.
  3. Security: WebAssembly is designed with a strong focus on security. Each Wasm module executes within a sandboxed environment, isolated from the rest of the system.
  4. Portability: WebAssembly is designed to be a portable target for the compilation of high-level languages. This means that a Wasm module can be run on any platform that has a Wasm runtime, regardless of the source language or the underlying hardware.

Flutter: A Quick Recap

Flutter is an open-source UI toolkit developed by Google. It's used for building natively compiled applications for mobile, web, and desktop from a single codebase. Flutter is known for its fast development, expressive and flexible UI, and native performance.

What is Flutter?

Flutter allows developers to build beautiful, fast UIs for mobile, web, and desktop applications. It's powered by the Dart language, which is easy to learn and offers robust tooling and libraries.

Why Use Flutter?

Flutter offers several advantages for cross-platform development:

  • Fast Development: With Flutter's hot reload, you can experiment, build UIs, add features, and fix bugs faster.
  • Expressive and Flexible UI: Quickly ship features with a focus on native end-user experiences. The layered architecture allows full customization, resulting in incredibly fast rendering and expressive, flexible designs.
  • Native Performance: Flutter code is compiled to native ARM machine code using Dart's native compilers. This ensures that your Flutter app will have native performance on both iOS and Android.

The Connection Between Flutter and WebAssembly

The connection between Flutter and WebAssembly is a fascinating one. With the recent announcement from the Dart team about the support for WebAssembly as a compilation target, this connection has become even stronger. Now, we can compile our Dart code into a Wasm module, which can then be executed in the browser. This opens up a world of possibilities for Flutter web applications.

How Flutter and WebAssembly Work Together

The process of integrating Flutter with WebAssembly begins with the Dart code that makes up a Flutter application. This Dart code is then compiled into a Wasm module using the tools provided by the Dart team. The compiled Wasm module can then be loaded and executed in the browser, just like any other JavaScript code.

This integration allows us to leverage the power of WebAssembly in our Flutter web applications, resulting in improved performance and efficiency. It also opens up the possibility of using other languages that can be compiled into WebAssembly, providing even more flexibility in our development process.

The Potential of Combining Flutter and WebAssembly

The combination of Flutter and WebAssembly has the potential to revolutionize web development. With the performance benefits of WebAssembly and the expressive UI of Flutter, we can create web applications that are not only beautiful but also incredibly fast and efficient.

Furthermore, the support for WebAssembly in Flutter allows us to write our code in Dart, a language that is easy to learn and use, yet powerful enough to build complex applications. This makes the development process more enjoyable and productive, while still delivering high-performance applications.

WebAssembly Support in Flutter: The Current State

The support for WebAssembly in Flutter is a recent development, announced by the Dart team. It's an exciting step forward for Flutter web development, but it's important to note that it's still in the early stages of development.

Current State of WebAssembly Support in Flutter

As of now, the support for WebAssembly in Flutter is available in the master channel. This means that it's still under active development and might undergo frequent changes. However, the Dart team is committed to making WebAssembly a first-class citizen in the Dart ecosystem, and they are working hard to improve the support and add new features.

Currently, the Wasm compilation is only available on the master channel. To verify that you have set your environment to the master channel, you can run flutter build web --help. If you see the --wasm flag in the experimental options, it means that you are on the right track.

Ongoing Development of WebAssembly Support for Dart and Flutter

The Dart and Flutter teams are excited about the potential of WebAssembly and are actively working on improving its support. They are focusing on several areas, including improving the performance of Wasm modules, adding support for more Dart features, and making the development process easier and more streamlined.

One of the key areas of focus is the support for WebAssembly garbage collection (WasmGC). This is a crucial feature for languages like Dart, which rely on garbage collection for memory management. The Dart team is working closely with the teams behind the Chromium V8 and Firefox engines to bring WasmGC to life.

Building a Flutter Web Application with WebAssembly

Building a Flutter web application with WebAssembly involves a few steps. Let's walk through the process using a simple Flutter web application as an example.

Choosing a Simple Flutter Web Application

When starting with WebAssembly in Flutter, it's best to choose a simple Flutter web application without platform-specific packages or JavaScript interop code. These known limitations can cause issues with Wasm.

Building a Web Application with Wasm

To build a web application with Wasm, add a --wasm flag to the existing flutter build web command. This command sends its output to the build/web_wasm directory relative to the package root.

Serving the Output Locally with an HTTP Server

Once you've built your Flutter web application with Wasm, you can serve the output locally with an HTTP server. If you don’t have a local HTTP server installed, you can use the dhttpd package. Then change to the build/web_wasm directory and run the server.

The server starts on port 8080. You can then open localhost:8080 in your browser to view the app.

Loading the Application in a Browser

Once you've built your Flutter web application with WebAssembly and served it locally with an HTTP server, the next step is to load the application in a browser. However, there are certain requirements for running Flutter/Wasm content in a browser.

Requirements for Running Flutter/Wasm Content in a Browser

As of now, there are two known browser types that should run Flutter/Wasm content:

  1. Chromium-based browsers: You need to run version 113 or greater and set the enable-webassembly-garbage-collection flag.
  2. Firefox: You need to run the nightly channel build (verified on v.115.0a1) and set two additional preferences in about:config:
  3. javascript.options.wasm_function_references
  4. javascript.options.wasm_gc

Loading the Application in a Browser

If your configured browser meets the requirements stated earlier, you can open localhost:8080 in the browser to view the app.

If the application doesn’t load, you can check the developer console for errors and validate a successful build with the typical JavaScript output.

Known Limitations of Using WebAssembly with Flutter

While the integration of WebAssembly with Flutter opens up exciting possibilities, there are some known limitations and challenges that developers should be aware of. Understanding these limitations can help us find possible solutions or workarounds.

Known Limitations

  1. Browser Support: To run Flutter web apps compiled to Wasm, you need to use Chrome 113 or later or a Firefox nightly build with experimental flags enabled. This limits the range of browsers that can run Flutter/Wasm content.
  2. Platform-Specific Packages and JavaScript Interop: Dart code that uses dart:html or package:js cannot be compiled to Wasm. Most platform-specific packages, like package:url_launcher, use these libraries. This can limit the functionality of your Flutter web apps.
  3. Development Support: Currently, neither flutter run nor DevTools support Wasm. This can make the development and debugging process more challenging.

Possible Solutions or Workarounds

While these limitations present challenges, there are potential solutions or workarounds:

  1. Browser Support: Keep an eye on the updates from the Dart and Flutter teams. As the support for WebAssembly improves, we can expect more browsers to run Flutter/Wasm content.
  2. Platform-Specific Packages and JavaScript Interop: Avoid using these APIs for now. The Dart and Flutter teams are expected to provide documentation on the replacements to these APIs later in 2023, including updates to the packages they own.
  3. Development Support: Use the master channel for development as it provides the latest updates and improvements for Wasm support.

Conclusion

In conclusion, the integration of Flutter and WebAssembly, known as Flutter WebAssembly, is a promising development in the realm of web development. It brings together the power of Flutter's fast, expressive, and flexible UI toolkit and the near-native performance of WebAssembly. This combination allows developers to compile Dart code into a Wasm module, leading to more efficient code execution and improved performance of web applications.

However, it's important to note that the support for WebAssembly in Flutter is still in its early stages and has known limitations, such as specific browser requirements and a lack of support for platform-specific packages and JavaScript interop. Nevertheless, the Dart and Flutter teams are actively working on improving their support and overcoming these limitations.

The potential of combining Flutter and WebAssembly is immense. It not only opens up a world of possibilities for creating faster, more efficient, and more responsive web applications but also provides more flexibility in the development process. As the support for WebAssembly in Flutter continues to evolve, we can look forward to an even more powerful and efficient web development experience.

Frequently asked questions

Can Dart compile to Wasm?

Yes, Dart can compile to WebAssembly (Wasm). This is a recent development announced by the Dart team. The support for WebAssembly in Dart allows Dart code to be compiled into a Wasm module, which can then be executed in the browser.

How do you use Wasm in Flutter?

To use WebAssembly in Flutter, you need to compile your Dart code into a Wasm module using the tools provided by the Dart team. Once compiled, the Wasm module can be loaded and executed in the browser. The command to build a web application with Wasm is:

Can I use Dart for web development?

Yes, you can use Dart for web development. Dart is a versatile language that is not only used for building mobile applications with Flutter but also for creating high-quality, mission-critical web applications.

What is the meaning of Wasm?

Wasm is an abbreviation for WebAssembly. It is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable target for the compilation of high-level languages like C, C++, Rust, and Dart, enabling deployment on the web for client and server applications.

What is Dart compiled to?

Dart code can be compiled into ARM and x86 machine code for mobile applications, JavaScript for web applications, and now, with the recent support for WebAssembly, Dart can also be compiled into Wasm modules.

Frequently asked questions

No items found.