An introduction to Flutter
What is Flutter? Can Flutter save time when building mobile applications? How long does it take to learn this new technology? These are some questions that you might ask if you heard something about Flutter or if you want to learn to build mobile applications using this new technology.
In this article, we’ll be covering the first three questions in detail and I will present everything you need to know about Flutter, the new technology for building cross-platform apps. There are many reasons why I feel that Flutter might have a chance of succeeding in the long run, but the biggest one is that with Flutter you can write code once and run it on both iOS and Android devices.
You might know about some other frameworks used for building cross-platform mobile applications like React Native, Xamarin, Kotlin Multi-Platform/Native or even PWA (Progressive Web App), but there are some parameters that allow an extensive comparison whose result helps you to understand which is the best hybrid framework for your needs.
What is Flutter?
Flutter is an open-source software development kit (SDK) provided by Google that helps developers build applications for mobile, web and desktop from a single codebase. Flutter is not a programming language, it is rather an SDK just like the Android SDK. The programming language used is Dart, an object-oriented programming language using a C-style syntax.
For building mobile applications based on the Flutter SDK you can use any text editor in combination with the flutter commands, but the recommended approach is to use one of the editors that support the Flutter plugin such as Android Studio, Xcode, IntelliJ or Visual Studio. Here you can find all the steps you need to configure one of these editors. As an Android developer, I chose the Android Studio IDE, but this is probably the most popular IDE for Flutter.
The cross-platform app sounds interesting, but before going further with Flutter, it’s really important to understand the technical process behind this technology.
The Flutter’ s architecture
In Flutter everything is a Widget, starting from the structural elements (like a button or an image), the style elements (like font or color) and even the layout’s properties (like paddings or margins). These widgets can be either stateful or stateless. These widgets are the building blocks of any Flutter app and can be themed to look like native Android (Material) or iOS (Cupertino) UI components.
- StatelessWidgets — these widgets don’t require any mutable state and will be used at times where static data is initially passed into the object. For example RaisedButton, Text, etc.
- StatefullWidgets — they allow us to create widgets that can dynamically change their content over time and don’t rely on static states which are passed in during their instantiation. This may change due to user input, some form of asynchronous response or reactively from another form of state change. For example, Form, Checkbox, etc.
As you can see in the image above, the Flutter’s architecture contains three layers: platform, engine, and framework. Futter’s engine takes some core technologies, Skia, a 2D graphics rendering library, and Dart, a virtual machine for a garbage-collected object-oriented language, and hosts them in a shell. Different platforms have different shells. For example, we have shells for Android and one for iOS. We also have an embedder API which allows Flutter’s engine to be used as a library. The shells implement platform-specific code such as communicating with Input Method Editors (on-screen keyboards) and the system’s application lifecycle events. The Dart VM implements the normal Dart core libraries, plus an additional library called dart:ui to provide low-level access to Skia features and the shell. The shells can also communicate directly to the Dart code via Platform Channels which bypass the engine.
Flutter: Pros&Cons
Pros
- Faster & more dynamic mobile app development — With Flutter we can make changes in the code and see them straight away in the app. This process is called hot reload and takes only milliseconds, but in the case of native development, the project needs to be rebuilt and that takes more time.
2. A single code base for iOS and Android applications — Flutter does not depend on a platform because it has its own widgets and designs but you can differentiate your app’s UI depending on the platform if that’s what you want.
3. Perfect for MVP (Minimum Viable Product)
If you need an app with a small set of features to satisfy early investors, Flutter is a good choice, especially if you have a tight deadline.
4. Feel free to use the IDE you want
When coding with Flutter you can choose from a number of Integrated Development Environments. Personally, I use Android Studio, because I’m familiar with the IDE from developing Android native apps.
5. Enjoy the Widgets’ power
In Flutter everything is a widget: the Appbar, Column, TextStyle, Scaffold, BoxDecoration, etc. It’s easy to wrap one Widget inside another to do things like center something, by wrapping it in a Center Widget. This helps developers to create a good user experience, no matter the platform that is used on.
7. Create beautiful animations
Flutter’s animation support makes it easy to implement a variety of animation types. Many widgets (especially Material widgets) come with standard motion effects defined in their design spec, but it’s also possible to customize these effects. Since 2018, animations are even easier to implement using the 2Dimensions Flare. It is an amazing online tool that can be used to create extraordinary UI animations with ease. It bridges the gap between the UI designer and the developer, reducing the time required to apply UI related changes.
Cons
- Learning time — depending on your programming experience, the Flutter learning process can take some time if you are not familiar with the C-style syntax. If you want to accommodate yourself with the Dart language, I suggest you try DartPad, an open-source tool that lets you play with the Dart language in any modern browser.
- Libraries & support — not even close to native development support. Being that Flutter is a relatively new technology and its community is smaller getting answers might take some time but the community is constantly growing.
- Creating the UI programmatically in the same .dart files where your code goes is easy and direct but can become overwhelming for more complex layouts.
- Flutter works in conjunction with the Android and iOS SDKs, which means you still need a macOS machine to build for iOS.
In conclusion, mobile developers should take a closer look at Flutter because it helps them to build simple apps much faster. Just start to build a mobile app based on Flutter to accommodate with the technology and make sure that this hybrid framework covers all your needs before you invest too many resources into it. Stay tuned and read the next articles based on this powerful technology. Feel free to waste a few seconds to give a few claps.
Thanks for reading! If you find some Flutter edge-cases or the Flutter widgets are blocking you, don’t hesitate to contact me.
Zipper Studios is a group of passionate engineers helping startups and well-established companies build their mobile products. Our clients are leaders in the fields of health and fitness, AI, and Machine Learning. We love to talk to likeminded people who want to innovate in the world of mobile so drop us a line here.
