How to choose your Flutter Web Renderer

if your flutter web website is currently laggy then you might be thinking on how to optimize it well flutter has tweeted recently that you're able to choose web renderers for your flutter web projects they are html and canvas kit so this information was shared in advance in the sliver newsletter a flutter weekly newsletter where i have shared that flutter web auto detect can be set to true so that you're able to use skier or canvas kit in your flutter web if you want to know more the link in the description so before i show you how you can choose your web renderer you have to know the difference between the two web renderers html versus canvas gate so let's start with html so html renderer will use a combination of you guessed it html elements css canvas elements and svg elements so you guys know what's html and css the basic building blocks of our website so what are canvas and svg so canvas elements are used to draw graphics on a web page like the painter class in flutter and for svg it's also used to draw graphics on a web page so is there any difference yes there is so the difference between canvas and svg is that canvas use javascript to draw the graphics and svg is a language to describe 2d graphics in xml or extensible markup language therefore html renderer uses basic elements which would then have a smaller download size that allows us to have a faster loading time now we know what's html let's go to canvas kit for canvas kit you are going to use skier which is then compiled to web assembly and then it will be rendered in web gl so i'm going to explain this three different technologies so the first one is skier so skier as you guys know is a graphics engine for flutter google chrome firefox browser and many more then this will be converted to web assembly which is a binary that allows us to run in a web browser at fast speed then with web assembly binary it will be rendered to web gl or graphics library which is a javascript api for rendering interactive 2d and 3d graphics this will mean that it will give you a faster performance than html and it will have very similar performance across the browsers however this means that it will add 2 megabytes in download size which also gives a additional eight seconds of loading time so this eight seconds loading time is just a ballpark figure but you know the longer the website loads the more the user will bounce or not visit the website so now you know what html and canvas kit are therefore what renderer should you use for your flutter web project well if you were to have a web project that has only static pages such as a landing page or a developer portfolio where it does not require performance but small size and fast loading time then using the html renderer is recommended however if your project has some interactive pages such as internal tools or a design tool like figma then i would recommend you to use canvas kit renderer as it has canvas kit api that helps boost performance so you don't want any laggy interaction such as resizing this image however if you think that you need a html renderer for fast downloading on your mobile platform and fast performance using canvas kit on the desktop platform great news by default your web project automatically have these configuration inside your flutter web project so now you have a clearer idea which renderer to choose i will show you a demo on how to use the command line options so if you were to go to the flutter documentation and so if you were to go to the flutter documentation under the web renderers over here you could see the command line options you have to pass in the command line options which is the web renderer and it only takes three values which is the automatic html and canvas kit which i have explained earlier so in order for you to run or build your web project these are the different commands so let's go to your terminal in your vs code or any ide so i have with me here a flutter developer portfolio that is mobile responsive i have created a course on how to create this the link in the description so let's start with the automatic if you type in flutter run d chrome it is going to run the default or the automatic renderer so once it has finished downloading it will look something like this so now this is currently in canvas kit and then if i were to make it into a mobile platform it is now rendering as the html renderer so currently the debug mode is pretty laggy so you want to run it in profile so that you can see how well it performs so what you can do is you can type in the flutter run d chrome command and then we are going to use the web renderer and then we are going to choose the html renderer and then we are going to make it run in the profile mode if you press enter you could see that it launches it inside chrome in profile mode so currently my flutter developer portfolio if i were to scroll up and down it is actually very very smooth so we are going to do the same command line instead of html we are going to use canvas kit press enter and now it has rendered in canvas kit do you see any difference in terms of the ui for this developer portfolio as you can see over here the fonts is a little bit different and then if i were to like hover over the contact me button you could see that it is actually very smooth so once you are satisfied then what you need to do is you need to build your flutter web project ready for release mode or for production so what you can do is you can type in flutter build web and then we are going to make it on release mode and then you can choose which web renderer you want it to render on both the mobile and desktop view so you can put it as html or you can put it as canvas kits or you can put it as auto but this is the default value for your flutter web project so if i were to choose html press enter then it will build our web project according to our configurations over here so once it's done you can release it to any web hosting services like firebase or github pages so that's about it if you like this video give it a thumbs up and if you want more of this kind of video subscribe down below isn't it cool that the subscribe is like 58k which i hopefully can achieve this year and if you want me to go through any topics you can comment down below so that's about it stay safe and all the best bye bye

Channel: Learn App Code

Views: 19,916

Keywords: flutter, learn flutter, learn flutter code, flutter code

Id: 3hmj0sS0MDQ

Length: 8min 39sec (519 seconds)

Published: Sun Jan 03 2021