Flutter is a application development framework from Google for creating cross-platform mobile applications (in iOS and Android). As mentioned on the official website (https://flutter.io/), it aims to make the development as easy, quick, and productive as possible. Things such as Hot Reload, a vast widget catalog, very good performance, and a solid community contribute to meeting that objective and makes Flutter a pretty good framework.
This book is going to be a guide for you in your journey from getting started with Flutter to eventually deploying your applications on it. But, before that, let's have a quick introduction to Flutter.
In this chapter, we will cover the following:
- The origin of Flutter
- What is a widget?
- Comparing Flutter to existing frameworks
The origin of Flutter was similar to that of a lot of famous software. It was developed at Google. Initially, Flutter was an experiment, as the developers at Google were trying to remove a few compatibility supports from Chrome, to try to make it run smoother. After a few weeks, and after many of the compatibility supports were removed, the developers found that they had something that rendered 20 times faster than Chrome did and saw that it had the potential to be something great.
Google had created a layered framework that communicated directly with the CPU and the GPU in order to allow the developer to customize the applications as much as possible.
Everything in Flutter can be created using widgets. Orientation, layout, opacity, animation... everything is just a widget. It is the main feature of Flutter, and everything from a simple button to an animation or gesture is done using widgets. And this is great because it allows the users to choose composition over inheritance, making the construction of an app as simple as building a Lego tower. All you do is just pick up widgets and put them together to create an application.
There are a number of fundamental widgets that will help you build an application with Flutter. All these widgets are cataloged in the Flutter Widget Catalog. Because everything in Flutter is made up of widgets, the more you learn how to use, create, and compose them, the better and faster you become at using Flutter. We will be going into much more detail about widgets and the widget catalog in Chapter 3, Widgets, Widgets Everywhere.
When speaking of mobile application development, there are many different approaches that we can find, but, in the end, everything comes down to either a native or a cross-platform approach. Let's see how different approaches look and work when compared to Flutter. We will first take a look at the native platforms, and then, before looking at the cross-platform approach, we will take a look at the WebView system, and finally we will see where Flutter fits into this mix.
Native frameworks such as Android and iOS SDKs are rock solid. They are the most stable choice for mobile application development. They have lots of available apps that are deeply tested and have a large community and openly available tutorials. The following diagram displays the working of native mobile application development frameworks:
As we can see in the preceding diagram, the app in this framework talks directly to the system. This makes the native framework the most powerful choice in terms of functionality. However, it does have a drawback: you need to learn two different languages, Kotlin or Java for Android, Obj-C or Swift for iOS and the SDKs. These languages are used to write two different apps with the same functionalities. Every modification must be duplicated on both platforms, and the process might not be that smooth. It is not a good choice for a small team or for someone who needs speed in their development process.
On the other hand, we have the cross-platform approach, which is famous for being productive. In this approach, we can get the application for both Android and iOS from a single code base, just like in Flutter. But every framework has some drawbacks.
Cordova-, Ionic-, PhoneGap-, and WebView-based frameworks in general are good examples of cross-platform frameworks, and they are especially good solutions for frontend developers. But these lack in performance, and the app view in these approaches is composed by a WebView rendering HTML; this means that the app is basically a website.
The following diagram shows how a WebView-based framework works:
Let's take an example of another cross-platform approach to see what could be the shortcomings of it. Xamarin is the Windows answer to cross-platform development, which in my opinion is not so convenient, especially in terms of productivity and compiling time.
When looking at other platforms, React Native could be considered as one of the best of the cross-platform frameworks, but it heavily relies on OEM components.
Lets take a look at the workings of React Native:
React Native expands the bridge concept in the WebView systems, and uses it not only for services, but also to build widgets. This is really dangerous in terms of performance; for example, a component may be built hundreds of times during an animation, but due to the expanded concept of the bridge, this component may slow down to a great extent. This could also lead to other problems, especially on Android, which is the most fragmented operating system.
In the previous sections, we took a look at different approaches to mobile application development. We have briefly seen how these approaches work and their drawbacks. Now let's take a look at Flutter.
We did take a look at the workings of other approaches, so let's take a look at the workings of Flutter as well. You can see the way the Flutter framework works as shown in the following diagram:
Now you can see the difference between other cross-platform approaches and Flutter. As stated before, Flutter eliminated the bridge and the OEM platform and uses Widgets Rendering instead to work with the canvas and events. And it uses Platform Channels to use the services. In addition, it is not difficult to use platform APIs with an asynchronous messaging system, which means if you need to use a specific Android or iOS feature, you can do it easily.
Flutter also makes it possible to create plugins using channels that can be used by every new developer. So, to put it simply: code once, and use it everywhere!
Flutter is a good option for cross-platform development due to its many features and a few things that it does differently than other approaches, as we have seen. It is not only a good option for the developers, but also for users and designers; let's take a look at why this is:
- For users, Flutter makes attractive user interfaces for apps, and this enhances the usage of these apps by the users.
- For developers, Flutter makes it easy for the new developers to enter the world of building mobile apps, as it is very easy to build apps with Flutter. Flutter not only reduces the time for development of applications, but it also reduces the cost and complexity of creating an application.
- For designers using Flutter, an application can be created using the original design that was conceived for the application, without compromising on any aspect of it. Therefore, the original vision of the designer is not changed at the time of development.
Most important, Flutter is a very useful tool to create mockups and prototypes, which is a pro, as it is a good point of contact for both designers and developers, two roles often very distant from each other.
In this chapter, we first had a quick introduction to Flutter and how this book was going to serve as a guide for learning cross-platform application development with Flutter. We then moved on to discussing the origin of Flutter. Then, before moving on to why Flutter is a good option, we took a look at where Flutter fits in with the existing world of mobile application development.
Nowadays, mobile development is not really a new world, but Flutter makes it possible to make it more fun and much quicker. And, by improving the developer workflow, it brings mobile application development closer to a gameplay.
In the next chapter, we will install the Flutter framework and try to learn as much as possible from the sample app.