6 Things you can improve RIGHT NOW in Flutter Web

let me show you six steps that will take you from this terrible boring and mediocre first impression to this awesome splash screen loader and smooth transition into your website number one is to make sure your Splash green color matches your flutter app color flutter app starts out as completely white we want a dark app so we'll change the background to color match you can open the index.html file and above your script tag will add a new style tag in there we'll set the background color to 080a0a and you have to make sure that you're scaffold in the first view is also set to the same color number two is to add an image to your HTML when you create your flutter app and run it on web you see this so let's give the users something to look at by adding an image to the center we're going to add an image into the web folder we'll open up the index.html and under the script tag in your body add a div with a class main content and inside an image with a source set to the path of the image that you just added now to send to the image we'll set the body width to 100 view widths and the body height to 100 view heights then add a new CSS class main content where we set 100 width and height and to Center we'll use display flex and we'll align the item Center and justify the content Center number three is we want to remove this jump going from the HTML to the flutter canvas it's a small jump but first impressions lost this feels low quality luckily for us the fix is quite easy in your index HTML set the margin to 0 pixels on the body class now the next three tips is what solidifies that premium feel for your flutter first loading experience before we go through them if you are enjoying this web series are making a full course sign up for the pre-sale waitlist with the link below number four is to do a smooth transition from your HTML to the flutter canvas this one is a little more complex than the others but it only requires a few steps we're going to start by adding a transition property to the main content class we want the opacity to transition out for 0.4 seconds using the ease out curve this tells CSS to animate our change in the opacity value the second thing we'll do is to give the doveworthy main content an ID called loader content now to a bit more complex things the flutter loader gives us callbacks for two key events after the entry point is loaded in the service worker and after the flutter engine is initialized this is where we'll do our CSS animation magic this is the plan when the engine is initialized we Fade Out our logo wait for 400 milliseconds and then run the flat app so we'll start off by creating the delay function helper this can go directly into the body of the script tag then we get the loader content used using the query selector on the document once we have that we can execute our plan we'll set the opacity to zero wait for 400 milliseconds and then run the app and if you refresh now the image nicely Fades out before the flutter app crashes through the door with a jarring pop which takes us to our next step number five a smooth introduction of the flutter app the flutter app still jumps in so let's fix that by using Mr G Skinner's awesome flutter animate package we'll run flutter Pub add flutter animate then in the main file we will fade in the entire material app using anime.fadein this makes the intro loading much better now let's make the weight feel shorter with tip number six which is done using a pure CSS loader since this is not a CSS tutorial I've linked the code below to the CSS that you have to copy it's only a few classes copy the CSS and paste it under your main content class then in the main content div put the loader it's a dove with a class loader and four spans inside and if you refresh now you should see a great looking loader and a nice premium introduction into your flutter app and if you want to build a production ready flutter website watch this video next

Channel: FilledStacks

Views: 11,132

Keywords: flutter web, flutter web tutorial, flutter web 2023, flutter web performance, flutter web app, flutter tutorial, quick tips, flutter performance

Id: ZFx9leiFlvM

Length: 3min 54sec (234 seconds)

Published: Tue Mar 21 2023