What’s Flutter and why should I care?
The mobile application market has seen explosive growth in the last decade, and the two largest mobile platforms; Android and iOS, have split the pie right down the middle in terms of market share. That used to mean that any company that wanted to appeal to all its potential customer base had to have two different development teams working with different tools to build the same app, one for each platform. But not anymore! In comes Flutter.
Flutter is an open-source mobile software development kit that developers can use to build native-looking Android and iOS applications from the same code base, it is surrounded by an active community of developers who provide support, contribute to the tool’s extensive documentation, and develop helpful resources. It went through a beta testing stage from 2015 until its official launch in December 2018 and it has seen explosive growth ever since.
The central idea behind flutter is the use of widgets, developers can use different widgets provided by Flutter to build the entire UI, and each of these widgets represents a structural or stylistic element like a button or color scheme, or a layout aspect like paddings and much more. Flutter doesn’t use OEM widgets, Instead, it provides developers with its ready-made widgets that look native to Android or iOS apps which developers can customize or add to as they desire (We’ll go into that in more detail in the next section).
To give you an idea of the explosive potential of flutter, it came in third place in the total number of contributions to open source projects on Github, and ranked as the second fastest-growing on the same platform. On stack overflow, it was the third most loved language by developers, and the sixth most wanted by them.
Diving deeper into Flutter
To understand Flutter, we must first understand its most basic building blocks; widgets!. Much like how “everything is a file” in Linux, everything within a Flutter application is a widget, we’ll cover widgets in more detail in the future but what it boils down to is that widgets make up everything from the images and text displayed on the screen, to the structural elements that shape the way an app looks. Some widgets have other widgets contained within them making them container widgets, while said widgets are referred to as child widgets, it is using this hierarchical order that Flutter developers can do all sorts of cool things with their app.
To familiarize ourselves with the concept of working with widgets, let us do a simple mental exercise, imagine an article that has a title, nine images in a 3x3 grid, and some text under it, our task is to think of how we would lay them out in a Flutter application using containers. There are many ways to go about doing this, but we want to get it done in a way that makes the most sense and requires the least number of widgets, so to get started, we need a container widget that will contain the whole article within it, and a text widget for the Title and another container widget for the image grid, this container widget will have three rows each containing three images, and a widget underneath for the text, and tada! we’ve done it.
Design, Design and design
Now if you’re familiar with both Android and iOS then you might have noticed that the difference in the design language between Google’s “Material Design” and Apple’s “Human Interface Guidelines” would prevent Flutter from truly being suitable for cross-platform mobile development, but Flutter resolves that issue by having Flutter widgets implementing the current iOS design language inside a ready-to-use library called the “Cupertino” library, as well as widgets implementing the Material design guidelines inside the “Material” library, all you need to do, is include either of them inside your source code and you’re ready to roll.
Speaking of design, In today’s market, a branded, custom UI is king. There is no future for Flutter if it only provides native-looking widgets for both platforms, which is why the first order of business for the developers of the Flutter framework was to create the best possible framework for creating customized mobile designs. And for that purpose, they have developed simple yet powerful tools that developers can use to easily customize every aspect of every widget inherent within Flutter and to create new unique widgets to fit their apps’ needs.
Stateful/Stateless widgets
Flutter has two types of widgets that developers can use to optimize their apps’ CPU and GPU usage, as well as its memory footprint. Stateless widgets used to display static elements on the screen, meaning widgets that remain unchanged from their initial call state (except in certain exceptions), and stateful widgets that display dynamically changing widgets. Using this feature, say if your page has a ticking clock, rather than putting the state at the top of the page and rebuilding the entire page each time the clock ticks, you can create a dedicated clock widget that only updates itself.
The Dart language and the Flutter SDK
I’ve made a point about Flutter being an SDK before, Well, an SDK or devkit is a set of tools, libraries, relevant documentation, code samples, processes, and/or guides that allow developers to create software applications on a specific platform. You can think of SDKs as a full-fledged workshop, facilitating the creation process for developers. In short, Flutter is a UI software development kit, it isn’t its programming language, it uses a programming language as its base. The early Flutter team evaluated more than a dozen languages and picked a language named Dart as Flutter’s base language because it matched the way they were building user interfaces.
Dart is a client-optimized programming language for fast apps on multiple platforms. It is developed by Google and is used to build mobile, desktop, back-end and web applications. it has been used to ship many high-quality, mission-critical applications on the web, iOS, and Android at Google and elsewhere and is a great fit for mobile and web development.
Why Dart is the perfect fit for Flutter
Dart is an object-oriented, class defined, garbage-collected language using a clear and concise C-style syntax that trans-compiles optionally into JavaScript (using the dart2js compiler). While not only possessing all the attributes necessary for a modern, general-purpose programming language it also has some unique characteristics that make it the perfect fit for the Flutter SDK, for example, it is familiar, clear and has a concise syntax, it has great startup and run-time performance even on weaker devices, it’s portable, with a reactive nature.
Flutter takes advantage of Dart’s JIT (Just In Time) compilation for exceptionally fast development cycles and a game-changing workflow. And the end product is AOT(Ahead of Time) compiled into fast, predictable, native code, which allows almost all of Flutter to be written in Dart. This not only makes Flutter fast, virtually everything (including all the widgets) can be customized. And Because Flutter apps are AOT compiled to native code, they do not require a slow bridge between realms (e.g., JavaScript to native), and they also start up much faster.
Want to Learn More About Flutter?
Then check out the following great resources:
Congratulations!
If you’ve made it this far, then you’re probably more than ready to confidently start learning and using Flutter fully aware of what it is and the concepts behind it.
