Flutter: First steps and tips

In short Flutter is a Framework to write to iOS and Android from a single codebase.
While my little Olivia sleeps 👧 , decided to share a little bit more about Flutter and my experiences.

Why use Flutter?

Giving the options to write mobile apps using a multi-platform approach, Flutter has some attractive characteristics. You can easily create beautiful UI designs and smooth animations. With the use of Hot Reload and Hot Restart you get a fast development cycle. One single codebase, assuring quality and performance, is compiled to native machine code for each platform.

At this moment, Google Play Instant is not possible with Flutter. But Android App Bundle (AAB) and Dynamic Delivery works since Flutter 1.2. If you do need some specific feature for your app is important to research about it.

Widgets, Reactive Framework and App Structure

Each view is built as an immutable tree of widgets. Almost everything in Flutter is a Widget (you will hear this a lot!). As you may know, Flutter uses declarative UI, so you don’t have a separate file (like xml for Android world) to create your UI, widgets, alignment, paddings… everything you create using Dart.

When a widget state changes because of user inputs (actions), for example, the widget rebuilds itself to handle the new state (reaction). You don’t have to write extra code to update the UI once the state changes.

The rendering engine is part of your app, you don’t need to bridge the UI rendering code to the native platform. It is built in Skia, a 2D graphics rendering library. It display widgets for both iOS and Android devices. The iOS and Android platforms just have to provide a canvas to place the widgets on and rendering engine inside.

Flutter layers and Engine

Flutter app (single codebase), rendering happens in the platform canvas and device services are accessed using Platform Channels

Without Flutter… Common Native development app structures (separate codebase)

Why Dart?

One of the concerns about adopting a different approach to write apps is to maybe have to learn another language.

Dart is similar to any languages you may have experienced in your life (Java, Kotlin, Swift, C#…).

Concise, strongly typed, object-oriented language. For mobile development concerns, Dart is performant in development and in production, supports JIT (just-in-time) and AOT (ahead-of-time) compilation.

JIT give powers to Flutter to recompile directly on the device while the app is running (Hot Reload). AOT enables the compilation to native ARM code, so the resulting native code starts quickly and performant.

From Flutter FAQ: https://flutter.dev/docs/resources/faq#why-did-flutter-choose-to-use-dart

Flutter cool tools

Hot Reload as mentioned before, helps you make changes in your code and easily get them deployed into your device without waiting (less coffee time for you 😅).

Hot Restart after the first time you deploy to your device or emulator, the subsequent will be faster.

Widget inspector is a tool for visualizing and exploring Flutter widget trees. This helps you understand existing layouts and find layout issues.

State Management

This is a hot subject in Flutter development. Since the UI depends on states, you need to be aware of how it works and to not mess with rebuilding all widgets every time. And also how to share data and state between the screens in your app.

From official Flutter doc https://flutter.dev/docs/development/data-and-backend/state-mgmt/intro

There are some approaches you can study to chose the best that suits your app needs.

• Scoped Model
• Redux
• BLOC
• InheritedWidgets

Will let references for great content that helped me:
Official doc about state mgmt
Official doc about state mgmt approaches
Streams BLOC
BLOC, Scoped Model and Redux comparison

Add Flutter modules to Android/iOS apps

Maybe you already have an Android or iOS app and is considering to add Flutter to a particular feature, just a piece of your app to test how it works and have a POC running in production. This is possible and will let the reference for the guide here:

Please be aware that this is a work in progress as the document tells itself.

Add Flutter modules to existing apps

Flutter Flavors

Is possible to setup Flavors for whatever the reasons you have (different distribution/environments…). In my case I needed to setup different environments each one with its own Firebase/Firestore project.

You need to configure Android Flavors and iOS Schemes separately. These are the references I used, but had to find my own way since the iOS configuration was not in all of the references.

Flavoring Flutter

Flutter ready to go

Build flavors in flutter with different firebase projects

This last one ☝️really helped me with iOS part… As an Android developer I struggle a little bit to setup all the configuration for the schemes. But in the end was just the matter of understanding how it works.

Continuous Integrations and Continuous delivery (CI/CD)

I’ve seen some tools that are more Flutter friendly, like CodeMagic and BitRise. I didn’t use any of these, but their documentation seems to be strait forward.

What I do have experience is configuring the environment for Flutter CI/CD in CircleCI. I was able to setup flavors/schemes in the project, for example to have a development, beta and production environment.

Configured a workflow with jobs to run Flutter Unit Tests, generate iOS beta/prod and Android beta/prod.

For iOS used a mac instance, installed flutter, Fastlane, Firebase CLI and added the necessary configuration to build and archive to submit the ipa with the specific flavor to Firebase App Distribution.

For Android used a docker image that already have flutter installed cirrusci/flutter. Installed Fastlane, Firebase CLI and added the necessary steps to generate an apk for the flavors needed.

Here is my gist to help with all these configurations:

Dart Obfuscation

Is really simple to configure, but be aware of some issues that some people in the community already shared. Some references about it:
Obfuscating Dart Code
How to Obfuscate Flutter

Now I need to sleep 😴 If something is missing or I find anything else that can helps will post another time.

Thank you for reading! 😉