How to Create a Stunning Splash Screen in Flutter

Поділитися
Вставка
  • Опубліковано 24 кві 2023
  • In this Flutter tutorial, I'll show you how to create a beautiful splash screen that will captivate your users and give your app a professional look. I'll take you through the process of building a customized splash screen, complete with a gradient background, icons, and text.
    You'll learn how to use Flutter widgets to design the UI and Flutter functions to add functionality to your splash screen. I'll also walk you through the code and explain how it works, so you can understand every detail of the process.
    Whether you're new to Flutter or an experienced developer, this tutorial is for you. By the end of this video, you'll have a stunning splash screen that will make your app stand out from the rest. So, let's dive in and create a beautiful splash screen in Flutter!
    🛡️Join this channel to get access to perks: www.youtube.com/@Spellthorn/join
    Help me reach my sub goal by subscribing youtube.com/@Spellthorn?sub_c...
    ||||||||||||||| 233% ||||||||||||||| 4.66K/2K
    Most recent subscriber: jtcdarkstar darkstar
    @Spellthorn is a talented web/mobile developer who is dedicated to helping others improve their coding skills. Through their UA-cam channel, they create informative and engaging videos that cover a wide range of programming topics. - spellthorn.com/
  • Навчання та стиль

КОМЕНТАРІ • 66

  • @Masda.X
    @Masda.X 7 місяців тому +26

    But it is general decorative splash screen, not real one. For real splash screen, one should determine what platform he/she wants to arrange it since it is so different for every platform on flutter.

  • @BitByBit1808
    @BitByBit1808 7 місяців тому

    Wow man! You explained very well!!! You gained another subscriber !!!

    • @Spellthorn
      @Spellthorn  5 місяців тому

      I appreciate it thank you

  • @dslkgjsdlkfjd
    @dslkgjsdlkfjd Рік тому +1

    I don’t know how these don’t have hella views, very good content

    • @Spellthorn
      @Spellthorn  Рік тому

      Appreciate it 😁 glad you liked it

  • @sicemshooters
    @sicemshooters 8 місяців тому

    Took a minute but finally got it, thank you so much!

  • @zaknamony8815
    @zaknamony8815 2 місяці тому

    Thanks so much
    🙏🏾

  • @thushankalana4940
    @thushankalana4940 9 місяців тому

    Great Job❤ Thank you so much sir🙂🤟

    • @Spellthorn
      @Spellthorn  2 місяці тому

      Thanks. Glad you found it useful

  • @bajishaik7805
    @bajishaik7805 Рік тому

    really helpful, thanks a lot :)

    • @Spellthorn
      @Spellthorn  Рік тому

      You're welcome! Glad it was helpful

  • @crazyvolt1660
    @crazyvolt1660 11 місяців тому

    Really amazing teacher.

    • @Spellthorn
      @Spellthorn  11 місяців тому +1

      Thank you, glad I can help 😊

  • @mr.social.official
    @mr.social.official 4 місяці тому

    well explained, thank you for ur time doing the video

    • @Spellthorn
      @Spellthorn  4 місяці тому +1

      Glad it was helpful!

  • @blackPooint
    @blackPooint 5 місяців тому

    Wow thanks sir....

  • @abhishekbarkade5955
    @abhishekbarkade5955 10 місяців тому

    Thank you so much bro, I waste a lot of time doing this. Your video was on point. Thank you 😄🙏

    • @Spellthorn
      @Spellthorn  10 місяців тому +1

      Glad it helped 😁

    • @abhishekbarkade5955
      @abhishekbarkade5955 10 місяців тому

      @@Spellthorn Bro you didn't believe I spent about 2 hour's just for doing this, didn't found correct methods to do it, glad I found your video

    • @Spellthorn
      @Spellthorn  10 місяців тому

      Yea there are other ways to do it too like packages etc but this seemed like an easier approach 😁 glad I could end your struggle 🤣

  • @mzssolution9370
    @mzssolution9370 Рік тому

    good video, keep it up

    • @Spellthorn
      @Spellthorn  Рік тому

      Thanks, glad you enjoyed it 😁

  • @wekesabuyahi5854
    @wekesabuyahi5854 3 місяці тому

    thanks

  • @mohammedridazilat4114
    @mohammedridazilat4114 9 місяців тому +2

    thanks a lot for the video, but the default flutter splash screen still appear at first and after the custom one ,there is a way to fix this plz?

    • @Masda.X
      @Masda.X 7 місяців тому

      Every platform has its own splash screen settings. On Which platform did you encounter this issue ?

  • @derlisruizdiaz
    @derlisruizdiaz Місяць тому

    Liked !

  • @vitaliyrealkeks
    @vitaliyrealkeks 6 місяців тому

    Great guide! Thx

  • @agustinmolina1027
    @agustinmolina1027 Рік тому

    great video!, can you make a video teaching it in a simple and practical way, provider? saludos amigo!

    • @Spellthorn
      @Spellthorn  Рік тому

      This way is pretty simple already. What did you have in mind?

  • @beqaks8878
    @beqaks8878 Рік тому

    i did this with lottie animations, and it brings up bunch of errors like "setstate() called after dispose(). any ideas for a fix? overall a great video!

    • @Spellthorn
      @Spellthorn  Рік тому +1

      Thanks. I haven't used lottie animations, so not sure would be causing it, sorry.

  • @jesschil266
    @jesschil266 3 місяці тому

    Hi, is there a reason to use stateful widget rather than stateless?

    • @Spellthorn
      @Spellthorn  3 місяці тому

      Umm. Stateful may not be needed unless your change state on the splashscreen

  • @user-fo6pm6wc4d
    @user-fo6pm6wc4d 5 місяців тому

    ありがとう

  • @mikemwangi849
    @mikemwangi849 10 місяців тому

    There is an issue with android 12 it leaves a black or white area on the status bar. How can this be solved?

    • @Spellthorn
      @Spellthorn  10 місяців тому +1

      Hmm, it should be hiding the status bars, I don't know of that code being specific to any version.

    • @mikemwangi849
      @mikemwangi849 10 місяців тому

      @@Spellthorn i found out you need to add shortEdges to both styles.xml

  • @collinsmarra
    @collinsmarra 9 місяців тому

    what do you think of `flutter_native_splash`?

    • @JohnnyFantaOrange
      @JohnnyFantaOrange 2 місяці тому

      It's not great a lot of issues with it.

    • @Spellthorn
      @Spellthorn  2 місяці тому +1

      Never used it so not sure. I feel it's better to do stuff yourself if you can rather than installing a lot of packages

  • @user-ot7fn4cz7d
    @user-ot7fn4cz7d 8 місяців тому

    source code please

  • @Moxerra01
    @Moxerra01 11 місяців тому

    I have a question please
    This splash is open when i click back in app
    I want to fix that

    • @Spellthorn
      @Spellthorn  11 місяців тому

      Hmm, so when you minimize app but then come back to it it shows the splashscreen?

    • @Moxerra01
      @Moxerra01 11 місяців тому

      @@Spellthorn yes , I want to see him just when I open the app not when I click the button back for closing the app

    • @Spellthorn
      @Spellthorn  11 місяців тому

      Hmm ill have to look into this for you as I'm not sure what would be causing that

    • @darkhumor6917
      @darkhumor6917 4 місяці тому

      @@Moxerra01 This is because when you open the app everytime, it will rebuild again, in this video, he just do inside the flutter, so it will load the flutter (include this "Splash Screen")

  • @Amankumar_Raone
    @Amankumar_Raone 11 місяців тому

    How to remove flutter default splash screen with flutter icon and white background

    • @Spellthorn
      @Spellthorn  11 місяців тому

      Someone else has mentioned this but I'm not sure whats causing that to display as there is no default splash screen, have you added anything to make a splash screen before that could be causing that

  • @jasmeetsinghchawla3755
    @jasmeetsinghchawla3755 Рік тому

    Buddy i am getting a default splash screen on testing my app

    • @Spellthorn
      @Spellthorn  Рік тому +1

      When you say default splash screen what do you mean? Are you calling the splash screen first then showing your main app screen after

    • @jasmeetsinghchawla3755
      @jasmeetsinghchawla3755 Рік тому

      Bro I mean at first I am getting a white screen with flutter logo then my splash screen and then home page i tried every thing but unable to remove the default splash screen 😐

    • @Spellthorn
      @Spellthorn  Рік тому

      There shouldn't be a default splashscreen. Have you added a splash screen another way?

    • @jasmeetsinghchawla3755
      @jasmeetsinghchawla3755 Рік тому

      Nope i just followed this

    • @Spellthorn
      @Spellthorn  Рік тому +2

      I understand what you mean. In your main.dart file add this before run-up
      WidgetsFlutterBinding.ensureInitialized();
      runApp(MyApp());