How to Use Skia or CanvasKit In Flutter Web ??

• General

Skia is used by flutter. flutter does not yet have a roller, so developers must manually perform rolls. flutter uses DEPS to specify third-party dependencies. So in this article, we will go through how to Use Skia or CanvasKit In Flutter Web.

How to Use Skia or CanvasKit In Flutter Web??

You can enable CanvasKit / Skia in Flutter Web by supplying a Dart environment constant:

flutter run -d chrome --dart-define=FLUTTER_WEB_USE_SKIA=true

The flutter tools now have a good shortcut for it:

flutter run -d chrome --web-renderer canvaskit

The –dart-define=FLUTTER_WEB_USE_SKIA=true parameter will set the constant to use Skia. You will also need to supply it to flutter build web:

flutter build web --web-renderer canvaskit

Options

So there are three options for –web-renderer:

• auto (default) – automatically chooses which renderer to use. This option chooses the HTML renderer when the app is running in a mobile browser, and the CanvasKit renderer when the app is running in a desktop browser.
• html – always use the HTML renderer.
• canvaskit – always use the CanvasKit renderer.

Alternatives

What I described above can be found in the flutter/engine/initialization.dart file. Make sure to check the master branch to see if the information is still up-to-date.

In there, you can see other options of configuring flutter web to use CanvasKit:

FLUTTER_WEB_AUTO_DETECT

--dart-define=FLUTTER_WEB_AUTO_DETECT=true

So this can now also be done using

--web-renderer auto

Supplying this constant will enable auto-detect for the renderer detection:

• CanvasKit will be used on desktop devices.
• HTML will be used on mobile devices.

So this only holds true if you do not specify window.flutterWebRenderer.

window.flutterWebRenderer If you enable auto-detect (see above), you can specify the renderer in your JavaScript code / HTML file dynamically:

...

<script>
  window.flutterWebRenderer = 'canvaskit';
</script>

<script src="main.dart.js" type="application/javascript"></script>
...

To run locally with skia

flutter run -d Chrome --dart-define=FLUTTER_WEB_USE_SKIA=true --release

with canvas kit

flutter run -d Chrome --dart-define=FLUTTER_WEB_CANVASKIT_URL=true --release

flutter run -d Chrome --dart-define=FLUTTER_WEB_CANVASKIT_FORCE_CPU_ONLY=true --release

So it is as described as shown below.

flutter run -d chrome --web-renderer canvaskit

So these are the valid commands to build/run web in canvaskit mode:

flutter build web --web-renderer canvaskit

The –web-renderer command-line option takes one of three values, auto, HTML, or canvas kit.

• auto (default) – automatically chooses which renderer to use. This option chooses the HTML renderer when the app is running in a mobile browser, and the CanvasKit renderer when the app is running in a desktop browser.
• html – always use the HTML renderer.
• canvaskit – always use the CanvasKit renderer.

Conclusion:

So today we learned how to Use Skia or CanvasKit In Flutter Web.

Also, here is a quick guide to Send Data From Child Widget to its parent In Flutter. Don’t miss out 😉

Keep Learning !!! Keep Fluttering !!!

Do let us know in the comments if you are still confused in flutter!! We would love to help 🙂

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Written by Nirali Patel

Nirali Patel is a dedicated Flutter developer with over two years of experience, specializing in creating seamless mobile applications using Dart. With a passion for crafting user-centric solutions, Nirali combines technical proficiency with innovative thinking to push the boundaries of mobile app development.