Intive Blog

The Journey of the Flutter Developer

The Flutter community is very large, and it offers tons of good tutorials and documents on Google, which denotes the considerable business investment that was made for this SDK. And it’s not just that, it also represents a new development paradigm. Unlike React Native, it comes with a big set of widgets ready to integrate, and it goes hand in hand with Material Design. Besides, it gives us the option to use a similar package in UI and UX for Apple, called “Cupertino Package”.

Flutter is a simple and quick way to create apps, which also makes it a powerful tool to generate prototypes or first stage MVPs. What are its advantages and disadvantages?

  • If we want to make sure an app can grow in complexity and size and not “die trying”, a good piece of advice would be to make sure it’s in line with the SOLID principles. In this sense, Flutter is great when it comes to creating apps fast, but we’re talking about simple apps, nothing too complex.
  • Flutter uses a way (we could even say it’s a “fashion” nowadays) to build graphic interfaces programmatically, called “declarative”. Screens are created as if they were “blueprints”, using a syntax which resembles HTML mixed with CSS.
  • However, when we want to add complex and elaborate functions, with big and async business rules, we need to create complex structures. In order to avoid that, the community is using more and more the “BLoC” or “Provider” patterns, according to the level of complexity required.
  • A negative aspect of Flutter’s SDK is that it tends to use methods with 4 to 15 parameters to set up a simple widget. Besides, it usually needs special setup according to its use.
  • Another disadvantage of Flutter has to do with the fact that it offers few possibilities to customize its widgets, which means that we either have to recreate them from scratch or use a version created by the community.

Some Tips to Get the Most out of Flutter

In order to support code speed and quality, it’s really important to work with a UI and a UX with style guides. That way, we can:

  • Make things simpler when we want to create from scratch widgets that are similar to others. This is very useful because existing widget customization is quite complicated, as we said before.
  • Achieve consistency in design: font types, sizes, colors, buttons, form fields.
  • Encourage the use of the Material Design package so as not so lose time when creating similar widgets.

In technical terms, the control point for the Flutter engine starts once a visual object is added to the user view stack (UIViewcontroller in iOS, Activity Fragment in Android). Hence, only a few things can be set up before this step, which is why we have to resort to native components (e.g. Launch Screen setup).

The Flutter community is very active and proactive when it comes to sharing solutions for the development of an app. In order to use Flutter to its fullest capabilities, it’s good to think in terms of reutilization and, most importantly, to look for solutions in the forums and improve your own model with those ideas. You may even find necessary things, such as a REST API connection model, that have already been created and maintained thanks to the community.

Where to Start with Flutter

If you wish to explore the Flutter world, you first need a basic to intermediate level of knowledge on iOS and Android. Every Flutter member needs to create the right environment to start developing. Here are some steps:

1) The first step should be to immerse yourself in the Flutter universe by visiting the official site, where you’ll find everything you need to know to set up your environment step by step. This will explain how to:

  • Download and install Flutter’s SDK.
  • Download Xcode 9.0+ to be able to build in iOS.
    • The deployment on the store depends on Xcode. This is why, to be able to deploy it, you need to know how to create, provision and upload apps on the Apple store.
    • If you’re looking to collate a version into an iOS device, you need to authorize the app certificate on the device and allow macOS to access the version.
  • Download Android Studio to collate in Android and deploy to the store.
    • In order to collate a version into an Android device, you need Android 4.1 (API level 16) or higher. Besides, you need to enable developer options on the device.
    • In order to collate a version into the emulator, a device must be added to the AVD Manager, but it should also be Android 4.1 (API level 16) or higher.

2) Set up an IDE. Even though any IDE can be used, VS Code has the best performance, collation stability, hot reload and file sync. That’s why we recommend it; you may find a tutorial to set up IDE here.

  • In order to make things easier and allow for a good UX, it would be good to use an IDE that Flutter may have created plugins for (template supply, code completion, etc.) and for which we can resort to official support.

3) Control version: when you work with Git, this .gitignore is suggested as a base.

4) Set up Linter: you only need to place this file in the project root.

5) Set up bash_profile: it’s recommended to add these commands to the file:

6) Deployment: in order to set it up, you need to know the process for each technology.

General Knowledge

Finally, we’d like to give you some resources that you most likely will need. The first two are a link to the design patterns we mentioned at the beginning of the article:

  • Plugin Provider: A pattern that handles the “status” of the app according to a differentiation with “UI – State Management”. It’s ideal to solve simple implementation issues. More information here.
  • Plugin Bloc: A plugin that allows you to implement that design pattern. It’s used to mitigate docking, because it divides each feature into different responsibilities which are defined in the style of Viper, plus a status machine to send events.
  • Plugin Http: A plugin that allows you to manipulate REST resources more easily.
  • i18n: Internationalization and localization of support. It requires a brief setup in Xcode.
  • Device rotation: If you want to change the rotation of the device at the time of execution, you need a different handling of things.
    • We recommend adjusting it directly on the main.dart file.

  • JSON parsing: A plugin that allows for object serialization and deserialization to JSON. Read the “how to use” document here.
  • Splash screen: If you want to set up the icons and launch screen, you need to do it natively both in iOS and Android. The Flutter engine is instantiated after a UIViewcontroller or Activity are presented on screen, so you don’t have any control over what happens before.
  • Push Notifications: A plugin that allows you to implement push notifications in iOS or Android generically. Even though this can also be done manually using platform channels, there’s no need to reinvent the wheel.

PS: I haven’t forgotten about the animations. Although Flutter has tools to facilitate them, it’s worth noting that layout hierarchy is really important, and it becomes more and more complex according to the type of animation you need to achieve. It’s a topic to discuss more in detail, so we’ll take a look at it in a different article.

Highly Recommendable Sources of Knowledge:

  • Official site: A great place to start reading, with lots of official instructive material. However, it doesn’t have real high-complexity examples.
  • Dart tour: A tour around the world of Dart and its power.
  • Cupertino Package: In case you need to emulate the iOS look and feel in the app.
  • Tutorials: There’s an intive online course available (request access via DM if applicable or through the formal channel to IT).
  • Layouting: Screen diagramming.
  • Box Decoration: Customizing Box decoration.
  • Container Widget: To play with Containers.
  • ListView: To play with ListView.
  • Button: To play with buttons.

Useful Terminal Commands:

  • flutter doctor: To check everything’s been correctly installed to use Flutter.
  • sudo xcode-select –switch /Applications/ //Select Xcode to use.
  • open -a Simulator: To open simulator.
  • flutter create my_app: To create app with Flutter.
  • flutter run: To run Flutter app from current directory.
  • flutter devices: To show available devices to run app. Parameters for extra collation: —profile —release
  • flutter build apk -t lib/main.dart: To create Android collation.
  • flutter build ios -t lib/main.dart: To create iOS collation.
  • emulator –list-avds
  • emulator –avd <emulatorName> -no-snapshot-load: To restart the emulator without using a snapshot of it. Use this command regularly to avoid dev tools bugs.

Enjoy Flutter!

Even though it’s still on an intermediate stage and it depends greatly on third party libraries (which makes it unstable), because it doesn’t have some libraries that we might consider essential for a new technology, Flutter seems to be a good option for the world of hybrids, thanks to its ease of use and its versatility. Google documentation is very thorough, and if something fails, there’s nothing that cannot be solved with an online search. Anyway, we should also remember that, as with every other hybrid, there are limitations in terms of the level of complexity we can achieve, and the developing speed slows down as we become more meticulous.

What do you think about it? Tell us about your experience with Flutter. Leave us a comment so that we can all learn together!

Never settle…

Daniel Antoriano Takagaki

Daniel Antoriano Takagaki is a software developer at intive since October 2012. Better known as “Taka”, Daniel is a videogame development technician. He graduated from the Multimedia School Leonardo Da Vinci. Besides developing, he actually plays them, having gaming as one of his main hobbies. He is a member of the iOS Brigade in the company. 

Add comment