If you didn't read my previous articles, I’m building a Flutter app for a children's book1. If you want to check it out: Hector the little dinosaur. The cover image is also part of the book and is not related to Deno at all, I think must have copied from Hector 😂. Last time I did any mobile development before was more than 2 years ago with React Native.
Well at least that's what I thought 😭. Finally, my partner and I finished recording all the pages read by my 4 years old son. These are not perfect but for as first iteration they would suffice, and that was the hardest part of the whole process! So I decided to publish the app for an Internal test track and...
Look at that! I guess I will need to wait for someone to look into my app before I can try a released version from the store.
Anyway I think it's worth sharing the journey.
Even before you can submit to the store you want to have a nice launcher icon and a splash screen.
For the icon part Flutter got your back, with this plugin it's very easy to generate all the possible icons with the right formats, no need to waste your time.
The splash screen however was a little bit more complex and required some manual processes. For the iOS version you must use XCode for this. All you need to do is modify the
LaunchScreen.storyboard file that you find in the iOS folder inside the project.
I didn't get how to scale the picture but it'll be fine. You need to play a little with settings, but it's quite intuitive even if you don't have much experience with it. I didn't want to mess around too much I just added a picture in the middle and that's it.
For Android I had to modify
launch_background.xml and I needed to play a little with it to have something ready.
<item> <shape android:shape="rectangle"> <solid android:color="@android:color/white" /> </shape> </item> <item> <bitmap android:gravity="center" android:src="@mipmap/launch_image" /> </item>
The code above is how you can have a centered image with a white background, default colour would have been black otherwise.
This is my folder structure so basically I have icons in all sorts of resolutions (generated by the plugin) and splash screen images in various resolutions randomly scaled by me, since I didn't know exactly which resolution goes to which folder, once again, the images are probably too big but it will be ok until I will dig more into the possible settings.
Flutter documentation covers this section very well so I won't go into too much details. I just got confused at some point when Goole required me to enroll into
app signing by Google Play and following the steps it looked like they just made me sign the app again with Android Studio instead of the command line. I probably accepted some terms and condition in the process but anyway, somehow I managed to have my bundle ready to upload!
Google charges you "just" $25 to let you publish the app on their store, while Apple charges you £79 for the same thing!
I subscribed and the journey began!
Lost in the Google Play Console! Loads of options and way too many forms to fill, I tried to publish this internal test version but I had to give up since the final button is just disabled and I believe it's because someone need to check the content of my app.
Nothing is lost, the app is good looking I will need to deal with some bureaucracy but soon I will be able to publish my first ever app on the store! And I'm super excited by this.
Also, I don't want to spoil too much, but my previous articles created a snow ball effect! Someone is building Hector in React Native! Stay tuned but soon we might be able to make a very good comparison!2