Quick tips and best practices for Flutter

Over the past few years, Flutter gained a lot of popularity. And for good reasons: it’s an amazing cross-platform app development framework that allows you to build apps for mobile, web, desktop, and embedded devices — all from a single codebase. One of the main reasons that many companies nowadays consider using Flutter is that it works right out of the box, it’s open source and it’s easier to grasp than other alternatives which makes it great for MVPs (minimum viable product).

I’ve been working with Flutter for over a year now. I didn’t have any prior experience with mobile frameworks and Flutter was my first dive-into mobile world. I am a Full Stack Developer at Osedea with JavaScript background, I did have a good base to start with Dart(programming language behind Flutter framework). Dart is a fairly new language and compiles the source code both ahead of time(AOT) and just in time (JIT). It’s similar to JavaScript, but the standalone Dart SDK is shipped with a Dart VM and it has its own package manager called pub.

Here are some things that you should know if you start or plan to start working with Flutter.

Know the language

First and most important, know your language! Although Dart is very similar to JavaScript, you still need to know the basics: variables and method scopes, null safety and bank operator, key operator and the use of late for non-nullable variables. Similarly to JavaScript, Dart is a single threaded language and uses async/await along with the isolates. Isolates are especially useful for long-running tasks that you want to handle without hanging the user interface. Find out more in the official Dart documentation and how this is applied in Flutter. Learn it and use it if it’s appropriate for your project.

Hint: sometimes that long-running task should be performed by the backend or separate service instead.

The widgets

Here again, these are the basics, but make sure you understand them well as you’ll be using them all the time. If you’ve already started playing with Flutter, you likely saw what Stateful and Stateless widgets are and how easy it is to make your first “Hello World” appear on both Android and iOS.

Make sure you also learn and play with gestures and widget controllers. It’s also important to get familiar with Layout widgets to help you make a good structure right from the start.

Keep up with updates

When I started working on the project, we didn’t yet have all the beauty of Sound Null Safety that was released with Flutter 2.0. Luckily, the team and the client were on our side and we successfully upgraded Flutter and integrated its latest features. Now we see const everywhere in our code. Which is great, as the compiler knows in advance const variable immutable value thus it’ll keep only one referenced copy of it at all times and won’t rebuild it. That’s a performance boost right there.

Upgrading to the latest version of the framework, language, and libraries used can include performance gains, more features, and of course, more security, let's not neglect this. By keeping it up to date you’re making sure you are getting the best out of Flutter, potentially solving some problems and starting using new widgets. And hey, doesn’t Flutter for Web sound exciting?

Some nifty extras

Here are a few extra things that can help you save time:

• Capture app state: use didChangeAppLifecycleState, it captures the state of the app if it’s on the background or foreground. For example, if a user had his camera open while someone called him or he simply changed his mind and decided to put your application in the background. In that case, you probably want to dispose your camera controller or stop and resume some services depending on the app state, didChangeAppLifecycleState will allow you to catch this state.
• Change status bar design: use SystemChrome.setSystemUIOverlayStyle
• ClipRRect  is great for rounding those corners. But not in all cases. If you want to play with the shape of a container, best practice would be to use decoration: BoxDecoration(…) instead. And if you need a round avatar, Flutter has a nice widget for it, CircleAvatar.

I shared my experience in the hope that it will be helpful to you in your Flutter journey! For other exciting tips and tricks, check out our blog section on software development, and if you have any questions, do not hesitate to reach out to us.

Photo credit: Kelly Sikkema