Don’t forget iOS

Recently I have been working on NerdHorizons.com. This website utilizes the web build functionality of flutter.

I was pairing with Chris, co-founder of Nerd Horizons, and testing our website out on a couple of devices. Everything was looking really good until Chris loaded it on his iPhone. He noticed that the images were not displaying at all! We were using an AssetImage in order to load a jpg image onto the screen.

Container(
  height: MediaQuery.of(context).size.width * 0.25,
  width: MediaQuery.of(context).size.width * 0.25,
  constraints: BoxConstraints( minWidth: 150, minHeight: 150, maxWidth: 250, maxHeight: 250),
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    image: DecorationImage(
      image: AssetImage('images/JeremyBlack.jpg'),
      fit: BoxFit.cover,
    ),
  ),
)

I originally reacted like this meme:

After I was just proven to be a stubborn Android fanboy, I began to wonder what was really going on here. After doing a little research I realized that Chris’s iPhone was using a different JavaScript engine and must be interpreting the website differently. I also knew that the web feature was still under development and decided to see what happened if we compiled the website using the dev branch of flutter. I logged into my build server and added this line below hoping that someone had made a commit that fixed this problem in a different channel:

flutter channel dev

It worked!

If you are noticing any strange behavior on the web compilation of your flutter project, see if you can dig around in the different channels for some fixes. Just know that it is not recommended for production builds to use some of the less stable branches.

Important note about the above “fix”

We are no longer facing this problem at the time of writing. The flutter team recently updated their beta channel, which is what we were using before to compile our web application. If you are still facing this issue on the beta channel, make sure you upgrade to the latest version. At the time of writing beta is now on version 1.18.0-11.1.pre .

Make sure you are testing on multiple platforms

I wanted to point out that we had run into this issue to show the importance of making sure that you are running tests against all sorts of devices, especially when using this experimental feature of the web builds from flutter. It would have been very bad if we had lots of people visiting our website that were unable to view our pictures!