skip to Main Content

Flutter Splash Screen

Pubspec.YAML code-

flutter_native_splash: ^2.0.1+1

flutter_native_splash:
  image: assets/images/splashScreen.png
  color: "#c988be"

Styles.xml –

style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
    <!-- Show a splash screen on the activity. Automatically removed when
         Flutter draws its first frame -->
    <item name="android:windowBackground">@drawable/launch_background</item>
    <item name="android:windowFullscreen">true</item>
</style>

5

Answers


  1. if you want to hide the action bar you need to go to app manifests and then set the theme of the splash screen layout to no action bar as so:

    android:theme="@style/Theme.AppCompat.NoActionBar"
    

    if you want also to hide the status bar you use flags in the splash screen activity as so:

    @Suppress("DEPRECATION")
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
            window.insetsController?.hide(WindowInsets.Type.statusBars())
        }else{
            window.setFlags(
                WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_FULLSCREEN
            )
        }
    
    Login or Signup to reply.
  2. You have to check this package flutter_native_splash, in this package you just need to set your splash screen image path.

    Add this code into your pubspec.yaml file

    flutter_native_splash:
      background_image: "assets/images/splash_bg.png"
    

    Make sure to run this command:

    flutter pub run flutter_native_splash:create
    
    Login or Signup to reply.
  3. Unfortunately Android does not have good support for filling the screen without distorting the image. One way you can fix this problem is to make the splash screen image larger than it needs to be, set it as centered, and then the splash image will be clipped by the size of the screen.

    Login or Signup to reply.
  4. When you config flutter_native_splash like this:
    enter image description here

    After run command: "flutter pub run flutter_native_splash:create", flutter_native_splash package will generate some drawable files on android/ios folder like below:

    enter image description here

    In android, to display that image in fullscreen. open generated launch_background file and change gravity="center" to gravity="fill"

    enter image description here

    After modify gravity, run your app again, you will see splash screen displayed as full screen.

    enter image description here

    Login or Signup to reply.
  5. hello Vietnamese compatriot Trung Đoan, in my case just leave the "image: assets/splash.png" is fine, add

    <item>
      <bitmap android:gravity="center" android:src="@drawable/splash"/>
    </item>
    

    in launch_background.xml file, and do the rest as you said, thank you <3

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search