Splash Screen Magic in FlutterFlow: A Step-by-Step Guide

Welcome Friends what can I say except you're  welcome to this new tutorial on how to implement   a splash screen in your FlutterFlow apps I  also introduce a software which I personally   use to create animated Splash screens in your  mobile apps as well so stick around for that   all right as you can see I have a very simple  FlutterFlow project loaded up here so how do I   make a splash screen well all you have to do  is go to this left hand column over here and   you click on this settings and Integrations  and then you will go to app assets over here   and as you can see there's this option for  Splash and initial Splash image this is where   we'll be uploading our Splash image so we can  just click on upload image and we can choose   any image that we want let's say I want this  image so as you can see there's this preview   of my new splash screen in my app now however  you can see that the image is slightly cut off   I want to see the full Majestic body of this  buff Pikachu so how can I do that I can well   I can just go to image fit and I like to choose  this option which is contain and basically what   this option does is that it shrinks your image  down such that is it be able to be contained   within the screen itself and so no part of it  will be cut off so if I click on that you can   now see that the Pikachu is completely contained  within the screen and I also want to change the   background color and pre-loading color of the  splash screen so instead of transparent I wanted   to match this completely white background  of my image so I'll just choose a white color I also do the same for the  pre-loading color I'll change that to White and if some of you are wondering what is a  preloading color well as you can see here   it is when the app initially loads there's a  short a very short amount of time where there   will be an empty screen in FlutterFlow as the  engine loads up so you can just change this I   typically like to change this pre-loading color  to the same as my background color over here   so that there is consistency within the app  itself all right so now that we have set up   our FlutterFlow screen over here let's go and  try and test it out as you can see there was a   very brief splash screen if we want to make  our splash screen longer we can also change   this minimum duration over here so let's say  we want to set it to 2 seconds which is 2,000   milliseconds we just save it wait for it  to save and now we can try to reload our   our app again to see the splash screen and  now it should appear for a longer period of time yeah as you can see we we saw the  splash screen for a longer period of time   as well so now into the resource that  lets you create animated Splash screens   extremely easily well we can just go  to this website called LottieFiles so basically LottieFiles is a website which gives  you a lot of free animations to use in your splash   screen and as you can see there are lots of  animations over here this cat for subscribe   that's so cute there's this be token thingy  there's even Bitcoin here but this is paid so   you can't use it and what do you know there's  a Pikachu running and that's exactly what I   want so I just want to click on this and do not  that you need to create your accounts but that   is completely free so I just want to click on  this and I want to download my Pikachu GIF over   here so I just want to click on download and I'll  save it to my workspace in order to download this animation so you can see I've added this  animation to my workspace and now I can   just download and Export the animation  over here the file format that we want   to export it as is not a lottie  Json but we want to export it as   a gif so that we can import it into our  FlutterFlow app so we just can export it so now we can go back to our dashboard and   now instead of this Splash image of  this buff Pikachu we can upload a new image and we can upload our new gif animation over here you can see that's this Pikachu running  so we'll just click on contain again since   it's a bit cut off right now you can see that the  Pikachu is running so let's just try and test it out all right so we can just test out if  our animated splash screen works now one   eternity later H all right as you can  see this there was the splash screen of   a Pikachu running which was also animated  as well so it was successful in setting up   the animated splash screen all right so that's  the end of the video if you like to learn more   FlutterFlow check out this playlist on how  to implement essential and key FlutterFlow   functionality within your app thank you and  have a nice day see you in the next video

Channel: just xolotl

Views: 311

Keywords: flutterflow app builder, flutterflow, flutterflow tutorial, no code app, no code, flutterflow tutorial for beginners, splash screen flutterflow, splash screen, flutter splash screen, splash screen animation, ui, app development, nocode tutorial for beginners, flutterflow animated splash screen, how to make a custom splash screen in flutterflow, Splash Screen Magic in FlutterFlow: A Step-by-Step Guide, just_xolotl

Id: xyDwn5w8KyE

Length: 6min 0sec (360 seconds)

Published: Tue Mar 12 2024