Flutter: The Good, Bad & Gotchas

Flutter was released to stable on December 4th, 2018 by google. Since then it has seen a massive uptake in the developer community and has been used in large number of apps and has been used to create some of the most widely used apps today such as Alibaba, Google Ads, AppTree, Reflectly, Hamilton Musical, Google Greentea, Abbey Road Studios, Tencent(yes that Tencent), JD Finance and many more!

But Flutter, like any other platform comes with it’s ups, downs and gotchas and this blog aims to point those out so that you can decide whether you’d like to get started in it and whether it would be a right fit for you.

Native code needed?

So let’s do some real talk, Flutter is marketed as the platform to code once and run anywhere, this same marketing strategy has been used in every multiplatform out there, Ionic, Xamarin and React-Native to name a few have all promised this but have all(including Flutter) fallen into the same pitfall, it doesn't(Xamarin being the exception, if you need something native you can write it in C#, so you don’t need to learn swift or kotlin). Though yes you could write a fairly simple app that if all you’re doing is some network calls and database writes you could get away with flutter and not write any native code at all, which is the dream! But with any significantly complex app, that for example needs to do background services and job, you’re going to need to be able to write native android and iOS code, and without sufficient knowledge in both platforms this becomes a massive problem for those starting out programming or to those that only know one of the two. You cannot escape this hell! Though on a lighter note, with the large community uptake, this has become easier and easier with developers creating plugins to do all of this for you. But again, your only choice is to write something native to implement it in flutter or to just wait for someone else to do it.

Multidex

If you’ve ever developed any android app you’ve probably ran into this problem. Android has a 64K method number limit, which you could surprisingly hit faily on in development since libraries are becoming larger offering more features and bug fixes and you’re own app requiring more and more libraries that you’d be adding onto it instead of trying to roll out your own(Always try and use a 3rd party library where you can). This issue came about when I just tried adding Google’s flutter firestore plugin to my flutter project. This one plugin alone, without any other plugin was enough to hit my 64K method limit! Since then I’ve added it as a default(which I’m not sure why it is?) since it causes new developers so much trouble figuring out what the issue is and how to deal with it.

AndroidX

All newly released/updated plugins in flutter need to support androidX, which is all fine and dandy and if you have Android Studio installed it’s fairly simple to migrate to AndroidX right? Wrong! I’ve mostly experienced this on Windows but using the built in Migrate to AndroidX feature in Android Studio has mostly achieved nothing at all and should be migrated manually. Do this in the beginning of your project so that you don’t run into this issue further along the line when you’re adding plugins that require AndroidX

Dark Theme

Dark theme is all the rage now. It can be seen on Windows, Macs, iOS and Android, and if your app doesn’t have it, honestly I’m wondering why not!? (Looking at you Whatsapp). Fortunately Flutter makes this into a literal one line, in your main.dart file, just set your brightness to dark and that’s it, go and have lunch or make some coffee while you look like a pro for doing something that would take hours and hours natively that took you about a sec.

Custom Theme

Flutter prides itself on being fully customizable and yet the one thing it doesn’t let you do easily set custom themes. Flutter comes packed with the material design set of colours, and while this is great and saves you a ton of time looking for hex values, you app does start looking like every other app on the market. Fortunately there’s an easy way to do this.

Just add this to your main file

And add this to your material app

And you’re all set to go to having your own custom theme in Flutter

Platform-Specific

Flutter has a UI option of either Android’s Material UI or iOS’s Cupertino UI design. This sounds great at first until your iOS app starts looking like an Android app or your Android App starts looking like an iOS, and this is definitely not something you want to have, especially when it starts confusing users.To solve this problem you have to create an if statement for every widget you’d want to looking like it’s native component, luckily in the latest releases of Flutter the adaptive functionality has been added to certain widgets that allows it to look platform specific and gives you that extra edge and saves you those extra few lines of code.

Is there a plugin for that?

Flutter is still fairly new and as such many plugins that you might expect from other older platforms aren’t available to flutter or hasn’t had an official release. Maps is still on it’s 0.x.y release and so are many others and things can change fast! To give an example firebase_auth went from 0.8.1+1 to 0.11.1+6 in about two months and had some massive breaking changes. This does make the environment a little unreliable and will require a ton of refactoring between version. Updating dependencies can become a scary part of your day!

Maps and dynamic

At some point or another you’ll start dealing with networks calls and especially with firebase you’ll run into this monster _InteralLinkedHashMap doing some quick google searches will lead you down the rabbit hole of stackoverflow and github issues. All of them telling you to surround it with a map. Ignore all of these, don’t try and convert it and just change your parameters from a Map<String, dynamic> to just a dynamic and use it as a map. There you go! Hours saved!

House cleaning

So some house cleaning tips. Flutter does support the new keyword it is not needed such as in Kotlin/Swift. Since everything in flutter is a widget the UI tree starts becomes a nested hell that becomes impossible to read or navigate. Start taking component out and placing them inside function. If a button does something? Put the button in a function, if you have a card that’s going to contain a row of something? Put it in a function, try and minimize the depth of your UI code, to at least 2 levels if you can, 3 at most.