DEV Community: Thais Aquino

From Flutter 1.22.5 to Flutter 3

Thais Aquino — Sat, 14 May 2022 13:39:02 +0000

I have a pet project that I wrote some time ago in 2020, in order to put together some content and guidance (mainly for my own usage) about Flutter development architecture using BLOC and MVI. You can find the first article here:

https://thasaquino.medium.com/flutter-reactive-architecture-with-bloc-and-mvi-part-1-94bec725f2eb

So now Flutter 3 was released and was about time to update that project :D
I will share in this article the steps that I faced in order to have my project updated, maybe may serve as someone that can have the same need. So let's go.

First of all, I run "flutter doctor" to check how far I was from the latest version and to check my outdated setup. Then had to run "flutter upgrade" in order to, as the name says, upgrade :) Had to update also things regarding Android and Xcode setup, but was pretty straightforward following the suggestion from Flutter doctor command.
So my setup was finally looking good to go:

Next step was to run "dart migrate" and then of course I had issues because of some libraries I was using with old versions that were not supporting yet null safety functionality.

To see what null safe package versions were available, I just had to run "dart pub outdated - mode=null-safety". So you can see in the figure that is pretty clear what needs to be upgraded.

Then, to properly start using newer versions with null safety support, I had to run "dart pub upgrade - null-safety", and by using this command my pubspec.yaml got updated as following:

After that, I only got warnings regarding my own files and followed the suggestions on how to fix the issues:

One thing to mention is that I had to replace the use of: Scaffold.of(context).showSnackBar(snackBar) with ScaffoldMessenger.of(context).showSnackBar(snackBar).

ScaffoldMessenger brings improvements on the snack bar usage and how it gets persisted between Scaffold transitions.

Another thing I had to update was regarding Android embedding. On Flutter 2 it got some improvements in order to work better for cases where you need to use the Add-to-app feature. Provides better support when your FlutterActivity is not the first and only Android Activity in the application.

Reference: https://github.com/flutter/flutter/wiki/Upgrading-pre-1.12-Android-projects
And then voilà, my app was building again and now with Flutter 3 :)

Here is the branch that has the changes: https://github.com/tasaquino/mvi_flutter_example/tree/updating-to-flutter3

Flutter: First steps and tips

Thais Aquino — Sat, 19 Oct 2019 13:14:55 +0000

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! 😉

Impressions about Flutter

Thais Aquino — Wed, 11 Sep 2019 14:08:42 +0000

I’ve been studying Flutter since June this year, the same time I moved to Australia. My team needed to get speed on the new app development, even with the team incomplete because the iOS developer joined us few months later. Using the same business logic implemented once, have same look and few, all the developers working on the same code base was a pretty good solution for us to think about (and I believe this happens with many other companies that need to grow their business fast). So we started developing with just two formerly Android developers and one backend guy.

Before starting with Flutter, we made researches to understand if we were making the right decision and start developing more confident.

Make a code with quality, thinking about architecture, unit testing and UI testing
Possibility to have different components depending on SO that is running if needed
Reuse code
Productivity
Learning curve
Use a native library, if needed
CI/CD and deployment

All checks were good and we were excited about Flutter (and good thing is we still are 😊).

As a small team we could get benefit on having the same knowledge about the language, framework, business logic and reviewing the same code. The learning curve is not so hard given the similarities of the concepts and Dart language characteristics that are familiar to Java/Kotlin/Swift developers.

In the beginning I was kind of missing writing XML for UI as was used when developing for Android, UI code in Dart can look weird and messy, but now I see that using a declarative UI programming speedup development.

Hot Reload and faster builds are big wins! Let’s see if this will keep with a big code base in the future.

Understanding state management with Flutter takes a time and is a good subject for next posts. For now I am working with Redux, is doing pretty good, is quite similar to MVI that was using in Android development.

Dart is OK, but I do miss Kotlin! In the language matter seems I gave few steps behind, thinking how much features Kotlin offers.

I got impressed on how the Flutter community is big, given the freshness as it became out of beta. The official documentation is well organised and there are a lot of resources from the community as well.

For sure was a little bit concerned about starting with Flutter, having about 7 years of experience developing for Android. But is good to change mindset and thinking out of the box! I am using an iPhone in order to remember that I need to care about user experience in both platforms.

With huge companies adopting Flutter like Nubank, Alibaba and Google itself for a long time give us more courage to take a shot on this :)
Even if you already have a project running in production, is possible to have modules in Flutter and you don’t need to rewrite your app from scratch.

Excited about Flutter and more technical posts will come for sure!