Thursday, June 21, 2018

Splash screen in flutter with basic animation(without vocal)



Let's create a splash screen with flutter framework for IOS and Android with Scale, Slide, Fade transition.

Content:

How to overlay widget using Stack.
How to add color with opacity.
Add logo and add scale animation.
Layout widget using Column and Row.
Add margin for widget using SizedBox or Container.
Material circular buttons with splash color and highlight color.

How to stop rotate widget or screen in flutter.
how to hide debug banner

How to use AnimationController and Animation classes.
How to use ScaleTransition, SlideTransition, FadeTransition widgets.
How to add  and use different fonts.

How to use GestureDetector and InkWell widgets.

Do not contain:

How to respond to different devices screens(add space between logo, description, buttons and signWith). So, if you want to do this, you have few options: easy method is to without adding SizedBox widget to get space in between widgets, wrap those widgets with padding widget and add paddings that you want and in the Column widget use MainAxisAlignment.spaceBetween or there is some other elements read them here:

https://docs.flutter.io/flutter/rendering/MainAxisAlignment-class.html , https://stackoverflow.com/questions/50430991/center-a-raisedbutton-in-flutter/50432353#50432353

and the boring way to get the screen height using MediaQuery and without removing SizedBox subtract or divide space that you want from device height. Also, you can try this source code:

https://gist.github.com/Blasanka/39b7a78dee922ac681a8af73568d2b1a

Got the initial idea from:
https://graphicriver.net/item/laundry-app-ui-kit/14930436

Source codes:


Download OpenSans font here.

Images:

Note: I got the background image only for learning purposes.
Logo image is created by me(free to use):













Learn more:

https://docs.flutter.io/flutter/animation/AnimationController-class.html
https://flutter.io/tutorials/animation/
https://docs.flutter.io/flutter/services/SystemChrome-class.html
https://flutter.io/widgets-intro/
https://flutter.io/widgets/animation/
https://flutter.io/gestures/

Flutter basics for beginners tutorial series with vocal video series:

https://www.youtube.com/playlist?list=PLurs4YIXZ79Cy-8GZc0Y3MAYGRvZNxiVe

2 comments:

  1. Did you know there's a 12 word sentence you can communicate to your man... that will induce deep emotions of love and instinctual appeal to you deep within his chest?

    Because hidden in these 12 words is a "secret signal" that triggers a man's impulse to love, idolize and protect you with his entire heart...

    ===> 12 Words That Trigger A Man's Love Instinct

    This impulse is so hardwired into a man's brain that it will drive him to work harder than ever before to make your relationship the best part of both of your lives.

    In fact, fueling this all-powerful impulse is absolutely mandatory to achieving the best possible relationship with your man that the second you send your man one of these "Secret Signals"...

    ...You will instantly find him expose his mind and soul for you in a way he never experienced before and he'll perceive you as the only woman in the world who has ever truly appealed to him.

    ReplyDelete
  2. How to center column and row item using flutter for android and ios

    How to center column and row item using flutter for android and ios.

    For More Info:- How to center column and row item in Flutter

    ReplyDelete