Time to Publish my First Flutter App on the Store!

If you didn't read my previous articles, I’m building a Flutter app for a children's book¹. 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.

The day to publish the app came 👊

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.

Icons and Splash screen

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.

Build the app for release 💣

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!

Sign up for a developer account 💸

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.

Also, since my app is targeting kids I needed to add a mandatory privacy policy that I generated on a random website 😂 and uploaded on the Hector site

Conclusion 🍕

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!²

1. Hector the little dinosaur written and illustrated by Aurelie Mercier. Cover image is also part of the book. ↩

2. As usual thanks to Peter for the english corrections here and there ❤️. ↩