How to Use Skia or CanvasKit In Flutter Web

How to Use Skia or CanvasKit In Flutter Web ??

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 GuideFlutter ProjectsCode 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.

Nirali Patel

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.

Leave a comment

Your email address will not be published. Required fields are marked *


ready to get started?

Fill out the form below and we will be in touch soon!

"*" indicates required fields

✓ Valid number ✕ Invalid number
our share of the limelight

as seen on