Flutter Overview

[00:00:00]
>> Flutter is Google's UI toolkit for building beautiful, natively compiled applications for mobile, web, desktop, and embedded devices from a single codebase. That's the official definition. And the first thing that we think is, why is Google doing this? Because Google has Android, and they also have UI toolkit there.

[00:00:23]
I mean, the Android team is using now Kotlin. And they have Jetpack Compose, and they have also ways to great Android apps. And they did this, they did Flutter. Well, Google, it's not actually one company, it's like a universe of smaller companies inside. And sometimes they are even competing with each other, okay?

[00:00:43]
Well, this is one case. Flutter can create Android apps, as well as the other toolkits that they have within the company. But also it can create apps for iOS, and also for desktop, and also for the web. So it's a framework that they created for more purposes, okay?

[00:01:02]
It's a declarative UI framework. So we are not going to create buttons and everything, like in creating a variable button and then we are attaching the button with the DOM API. We are not creating a DOM element and then appending that element into the DOM, that's not how it works.

[00:01:25]
It looks more than React, than Swift UI, Jetpack Compose, Angular, where we declare the code, the UI, directly in one sentence, in one expression, everything is one expression, okay? It was launched in 2018, and it focused on modern UI patterns such as a single source of truth. The idea is that in your, for now, let's say hierarchy, that we all know exactly what that means.

[00:01:54]
But the data resides only in one place, composable components. So actually we can create components that the name that we are going to use here is widgets, so we are going to compose widgets that we can reuse within our project. It's multiplatform, we already mentioned that a couple of time.

[00:02:13]
Dependency rendering, so actually, your widgets we have dependencies on variables, on properties, on states, that will define how your widgets are being rendered. We have some data binding and some kind of reactive programming. It's not really complete, the reactive part, but it works for the basic ideas, at least.

[00:02:39]
So everything in the UI it's expressed in widgets. And a widget it's just a Dart class, that we'd extend from a widget superclass, okay? We will see it action in a minute. And we have a visual editor tool in Android Studio or in Visual Studio, okay? Both are okay.

[00:02:58]
So we are going to, we can target Android, iOS, iPadOS, embedded device, Fuchsia OS, desktop devices, Windows. This has answered the question that we had before, win32 and universal Windows platform, as well. MacOS, macOS is better at this point, Linux, okay? And the web. So the same the same widgets that we are going to create are going to work everywhere.

[00:03:27]
How does that work, how does magic work? Well, if you have been in the cross-platform SDK world, maybe you have heard about React Native, for example, or Xamarin or NativeScripts. Flutter, it's competing in the same group, but it's completely different, let me tell you why. In React Native or in Xamarin, when you render Xamarin forms, actually they're multi-platform UI framework, when you create a button on the screen, okay?

[00:04:01]
The button instance is using the UI toolkit from each OS. So in iOS, it's using UI button, on Android, it's using the button from the Android toolkit, on Windows, it's using a Windows button. And on the web, if React Native for Web, for example, you can export to the web, it's actually creating an HTML button, okay?

[00:04:24]
Flutter is doing something different. Flutter is not using any UI framework from the operating systems, it's rendering its own button in a low level canvas. So it's rolling the button, that it will look like pixel perfect to an Android or iOS device if you use the right widget.

[00:04:45]
But it's not actually using their own UI frameworks, okay, make sense? So it's more like UC unity. I mean, from a UI point of view, it's like having a full canvas where you can render whatever you want. But Flutter over that canvas it's actually render an app that looks like the other apps in the operating system, but it was completely written from scratch.

[00:05:11]
So that means that animation, transitions, that code was written in a low level system that emulates the standard UI toolkit, okay, makes sense? On the web, we have renderers, we will talk about that later. But by default it's rendering in a canvas or WebGL, so your app render fair.

[00:05:36]
And you can convert that into a progressive web app, that's for the end of today. You have any question on the rendering part, on what's the difference between other cross-platform frameworks and Flutter?
>> Is it using Skia to render to the canvas?
>> Internally?
>> Yeah.
>> It has its own system called Canvas Kit, on the web.

[00:06:02]
>> On the web, okay.
>> On the web. So you can then compile for the Play Store, creating an AAB file, an Android App Bundle, to Android and Chromebooks. For the Amazon AppStore, and other App Store, you can create an APK that also will work on Windows 11 Store.

[00:06:20]
For the Huawei AppGallery, you can also create an APK. For the App Store, you can create an IPA, an iPhone application. And for Microsoft Store, you can create an Universal Windows application, as well. So for Windows, you can create an Android app to distribute that on the Microsoft Store or you can create a Windows up, both will work, okay, makes sense?

[00:06:42]
So as we mentioned before, it's not using any SDK, everything is your own widget and design. And it comes with two widget sets, ready to use, material widgets and Cupertino widgets, okay? So we pick the one that we want to use. Cupertino is the iOS-like widget. And it's weird to use that on Android, it's weird to use that on the web.

[00:07:10]
We can, but it looks weird. So most of the time we prefer, if you aren't going to do a multi-platform application, we prefer Material widget. So that is more universal, but it's up to you, okay? So there are cloning pixel-perfect, the Android Material Design and the Apple Human Interface guidelines.

[00:07:35]
So when you look at a Real Native app and a Flutter app using that toolkit, you won't see a lot of differences, okay, makes sense? So pixel-perfect, high-performance, same gestures, same animations, as the Native toolkits. So for example, the same app, using, in this case, it's the same Material, Apple running on iOS and an Android.

[00:08:02]
And you can see, for example, the buttons look different, the switch, that little switch that you can turn on and off is looking different on Cupertino than on Material, okay? So yeah, they're pretty similar. Or if you look at the plus sign, there is a plus sign on Android, it's called the Floating Action Button.

[00:08:23]
And on iOS they're the same pattern is to put the plus sign at the top right. So this is Material and Cupertino. Can you use both at the same time? For Android and the web I wanna use Material, and for iOS I wanna target Cupertino? Yes, but it's a problem, because we are talking about different widgets.

[00:08:46]
So you need to have some kind of conditional arrangements, and also there is a design pattern where you create some kind of abstract widgets. You're creating your own abstract button, then inside we have a conditional saying, if it's Android or the web, let's use the material button, if it's iOS or iPadOS, let's use the Cupertino button.

[00:09:08]
So if you wanna do that, it's possible, but it takes more effort in your code. Most of the time, Flutter application will use the same UI guideline everywhere, but it's your decision, yeah?
>> So if you ran the Cupertino on the Android, it would look like iPhone?
>> It will look like an iPhone and the user is not expecting that UI, and the share stores and everything looks like an iPhone.

[00:09:33]
It will work because it's not using the UI from the toolkit from iOS. It's rendering that from scratch, so it will look like iOS on Android as well. But the gestures, the tabs, how everything looks like, it's different. So most of the time, Flutter applications are using the Material widgets or your own widgets.

[00:09:53]
You create your own widgets with your own design, okay? So for example, this is a Material app working on both platforms. So typically it looks nice on both. So we have to make the decision, design your own visual pattern system, use Material for all devices. Or have that multi-user interface that makes, you need more effort, okay?

[00:10:18]
To make that work, just have that in mind. So it doesn't happen automatically because widgets are not translatable, okay? So have in mind, it takes some time. Today we will just pick Material, we will make an app in Material, okay, make sense? So and then we will have different products.

[00:10:41]
The iOS application and the replication and web builder, web build folder, they have ready to deploy, we will see that at the end. And executable for Windows, and APPX for Windows and macOS application, I'm sorry, and a macOS application, or a Linux application, or a folksy iOS application and blah, blah, blah, blah, blah.