I want to shed some more light on the actual way of doing a Splash screen in Flutter.
I followed a little bit the trace here and I saw that things aren't looking so bad about the Splash Screen in Flutter.
Maybe most of the devs (like me) are thinking that there isn't a Splash screen by default in Flutter and they need to do something about that. There is a Splash screen, but it's with white background and nobody can understand that there is already a splash screen for iOS and Android by default.
The only thing that the developer needs to do is to put the Branding image in the right place and the splash screen will start working just like that.
Here is how you can do it step by step:
First on Android (because is my favorite Platform :) )
Find the "android" folder in your Flutter project.
Browse to the app -> src -> main -> res folder and place all of the variants of your branding image in the corresponding folders. For example:
- the image with density 1 needs to be placed in mipmap-mdpi,
- the image with density 1.5 needs to be placed in mipmap-hdpi,
- the image with density 2 needs to be placed in mipmap-xhdpi,
- the image with density 3 needs to be placed in mipmap-xxhdpi,
- the image with density 4 needs to be placed in mipmap-xxxhdpi,
By default in the android folder there isn't a drawable-mdpi, drawable-hdpi, etc., but we can create them if we want. Because of that fact the images need to be placed in the mipmap folders. Also the default XML code about the Splash screen (in Android) is going to use @mipmap, instead of @drawable resource (you can change it if you want).
The last step on Android is to uncomment some of the XML code in drawable/launch_background.xml file. Browse to app -> src -> main -> res-> drawable and open launch_background.xml. Inside this file, you shall see why the Slash screen background is white. To apply the branding image which we placed in step 2, we have to uncomment some of the XML code in your launch_background.xml file. After the change, the code should look like:
<!--<item android:drawable="@android:color/white" />-->
<item>
<bitmap
android:gravity="center"
android:src="@mipmap/your_image_name" />
</item>
Please pay attention that we comment the XML code for the white background and uncomment the code about the mipmap image. If somebody is interested the file launch_background.xml is used in styles.xml file.
Second on iOS:
Find the "ios" folder in your Flutter project.
Browse to Runner -> Assets.xcassets -> LaunchImage.imageset. There should be LaunchImage.png, LaunchImage@2x.png, etc. Now you have to replace these images with your branding image variants. For example:
- the image with density 1 needs to override LaunchImage.png,
- the image with density 2 needs to override LaunchImage@2x.png,
- the image with density 3 needs to override LaunchImage@3x.png,
- the image with density 4 needs to override LaunchImage@4x.png,
If I am not wrong LaunchImage@4x.png doesn't exist by default, but you can easily create one. If LaunchImage@4x.png doesn't exist, you have to declare it in the Contents.json file as well, which is in the same directory as the images. After the change my Contents.json file looks like this :
{
"images" : [
{
"idiom" : "universal",
"filename" : "LaunchImage.png",
"scale" : "1x"
},
{
"idiom" : "universal",
"filename" : "LaunchImage@2x.png",
"scale" : "2x"
},
{
"idiom" : "universal",
"filename" : "LaunchImage@3x.png",
"scale" : "3x"
},
{
"idiom" : "universal",
"filename" : "LaunchImage@4x.png",
"scale" : "4x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}
That should be all you need, next time when you run your app, on Android or iOS you should have the right Splash Screen with the branding image which you added.
Thanks
Fonts are a great option for a lot of cases.
I've been working on a library to render SVGs on a canvas, available here:
https://github.com/dnfield/flutter_svg
The API as of right now would look something like
new SvgPicture.asset('asset_name.svg')
to render asset_name.svg (sized to its parent, e.g. a SizedBox
). You can also specify a color
and blendMode
for tinting the asset..
It's now available on pub and works with a minimum of Flutter version 0.3.6. It handles a bunch of cases but not everything - see the GitHub repo for updates and to file issues.
The original GitHub issue referenced by Colin Jackson is really not meant to be primarily focused on SVG in Flutter. I opened another issue here for that: https://github.com/flutter/flutter/issues/15501
Best Answer
Below worked perfectly with me in both
Android
andiOS
, I usedexit(0)
fromdart:io
UPDATE Jan 2019 Preferable solution is:
As described here