flutter splash screen is blurry on physical device

user_9878404 0
Viewed 700

My goal is to show a splash screen while app initializes.

So I used this package : flutter_native_splash: 0.1.9

And as per flutter_native_splash documentation on pub.dev, I created this file as required:

flutter_native_splash:
  image: assets/images/splash.png
  color: "#ffffff"
  fill: true
  # android_disable_fullscreen: true

and in terminal i ran this command:

flutter pub run flutter_native_splash:create

the package generated me the images in drawable-hdpi, drawable-mdpi, drawable-xdpi, drawable-xxdpi, drawable-xxxhdpi

now i am able to use this splash screen successfully but the problem is that the generated image is very blurry on physical device when i test...

is there any guidelines on how to draw this image from the start?

its just a simple black image with centered text...lets say for examle "Splash Screen"

i use figma for drawing and i export the file as SVG.

so my questions are:

  1. should i specify width and height for the canvas that i draw inside?!

  2. should i specify a fixed font size for the text...if so...suppose that there are two texts...centered one...and a subtitle beneath it.

i manipulated the font size many times but every time the generated image is blurry...

any help would be much appreciated.

Edit:

this is screenshot from figma while i am drawing the image:

figma screenshot

dart flutter
1 Answers

1.) Make a splash screen background image of size 1080*1920, add it into the drawable folder (android/app/src/main/res/drawable).

2.) Add below code into your android's styles.xml

<resources>
    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <item name="android:windowBackground">@drawable/splash</item>
    </style>
    <style name="NormalTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <item name="android:windowBackground">@drawable/splash</item>
    </style>
</resources>

3.) Add below code in AndroidManifest.xml inside tag

        android:name="io.flutter.app.FlutterApplication"

4.) Add meta-data in your first activity.

        <meta-data
                android:name="io.flutter.embedding.android.NormalTheme"
                android:resource="@style/NormalTheme" />
user_119512440
Related