After publishing my Flutter app, many devices displayed grey screens. Here's how I fixed it:

After happily announcing on Facebook that I released my first app on the app store, at least ten people reported to me that the app doesn't seem to work for them.

Despite these issues, their comments and reports were of great help. Thank you to everyone who reported this issue.

TLDR

Test on a wide variety of devices before releasing your mobile app

The story

I have tested it on all emulators with all versions of android and iOS on my machines, as well as on the following physical devices:

iPhone 12, iPad 2018, MacOS M1 2020, Pixel 4xl, Pixel 2xl, Samsung note 10

I tested the app on my cousin's phone, a brand called "Vega" that I had never heard of before. That's when I noticed an error and wondered if the phone manufacturer had missed something. However, I was surprised to find out that some users with iPhone 13 and Pixel 3XL also experienced the same issue with the app. That means that the issue from my side.

Identifying the issues

There’s an error on the drawer hamburger icon.

There an error on the “New playlist” form.

Researching about the grey area:

It seems like these are errors. When Flutter apps (I'm not sure about other technologies) encounter an error while in release mode, they display a grey area.

I ran all emulators with all versions of Android and encountered no errors.

There isn't anything too complex or heavy on these screens for them to have these errors.

So what is my issue right now?

I am unable to reproduce the issue with what I currently have. If I obtain a device on which I can reproduce the issue, I will be able to view the error message when I run it while connected to my computer.

Solving the issue

Step 1: Finding and borrowing a phone with the issue ✅

Found a Samsung S7 on which I could replicate the issue

Step 2: Checking the issue while debugging: …

Downloaded Samsung USB driver

Installed the app

Step 3: Fix the issue ✅

I didn’t implement the internationalization after adding had this piece of code:


supportedLocales: const [
        Locale('en'), // English
        Locale('es'), // Spanish
        Locale('fr'), // French
      ],

Although I found it interesting to have these features, I never followed through with their implementation. Furthermore, implementing them is not a priority for at least a few years.
Removed the code.

Step 4: Republish app ✅

Lessons:

The community is priceless.

Announcing it as "my first iOS app" was a good move. If I had said "the best iOS app ever," I would have been roasted.

Now that it's fixed, I think it was irresponsible of me not to have tested it on a more variety of devices before announcing it.

The app I am talking about here is:

The Playlist - Rock the Stage - Apps on Google Play

The Performer's App

https://play.google.com/store/apps/details?id=com.mianala.playlist

If this was helpful to you and saved you time and money, please consider supporting us.