Mobile Dev & Flutter Overview

[00:00:00]
>> So if you're a front ender, so you're doing front end, typically today, you have two targets. You can be doing websites, and that's probably the most common target when you are here at Frontend Masters. So you are a web developer, you are doing front end in JavaScript, React, Angular, or whatever framework you are using, or Manilla Js, or you can do native clients.

[00:00:24]
Today we are going to be making native clients, at least at the beginning. When you go native, in terms of I wanna make native clients, you can use official SDKs, such as Swift for iOS, Kotlin for Android, or you can use a cross-platform SDK. So a cross-platform SDK is typically a solution that is not actually from the platform, it's not by the Android team, it's not by the iOS team, it's just another team, typically open source.

[00:00:57]
It can let you compile or build an app for several platforms from the same project. And this is where we are today, we are going to be building apps using a cross-platform SDK. And within this world here, today we have several solutions. These are the top three. So in the top three options that we have, we have React Native, Microsoft Xamarin, and Flutter.

[00:01:28]
So React Native was the king until probably 2020, in terms of cross-platform SDK, and now Flutter is actually getting over React Native in terms of usage, okay? So Flutter is kind of the king these days for modern cross-platform app development, and that's the framework, the UI platform that we are going to be using.

[00:01:54]
And with Flutter, we can actually compile apps for Android, for Apple platforms including Mac, iOS, iPad OS, for Windows, and something interesting is that we can also compile PWAs. So with Flutter, it's not just native clients, we will be able to create, to get an output, to build a web app, website.

[00:02:24]
We are not going to write a lot of HTML. We're not going to write JavaScript at all for that web app. We will write Dart and Flutter and the output will be a web app, okay? But have in mind that when you're doing Flutter, you are also making websites or web apps, okay?

[00:02:44]
Do you have any question at this point on where Flutter fits in the app development world?
>> What are the Windows apps that it produces? Is it executables or is it?
>> That's a good question. So the question has to do with Windows and what kind of app it's actually creating.

[00:03:01]
So it has several targets, or several outputs. It can create Win32 apps, compatible from Windows 7, okay, to today. And it can also create universal Windows applications that actually will go to the Microsoft Store. So it supports both targets for Windows. So classic Win32 apps and modern Windows development for the store for Windows 10 and Windows 11.

[00:03:30]
I have a question in the chat.
>> Yeah, they're just saying it supports Linux.
>> Yeah, it support Linux as well as many other platforms, I'm just picking the top three here, but yeah, you're right, it's supported on Linux. Also there are other platforms that are in beta, or sometimes in alpha.

[00:03:45]
For example, you can compile to Folk J OS. What's that? That's an OS from Google. That is the one that is being used in the Nest display devices, such as the formerly Google Home devices, that they have a screen. You can also target those platforms, Linux, and many others, okay?

[00:04:08]
So I'm just picking here the top three in terms of usage within Flutter, okay? And many more are coming, actually. Because it's open source, anyone can actually make its own compiler. So you can compile Flutter apps for other platforms as well. Okay, so today we're going to be building Coffee Masters.

[00:04:32]
Coffee Masters is going to be an app that is suitable for a coffee shop. So let's say that we own now a coffee shop. So we want users to order from the app. So we will have a menu, and from the menu, we will be able to add coffee and snacks to a cart, okay?

[00:04:51]
So we're going to use that to consume web services. And also to see how data management works in Flutter. Okay, so that's our project. We are going to code the app from scratch. The only thing that you have already coded is just some snippet to play with Dart and some images, but that's all, everything will be coded from scratch.

[00:05:11]
We're going to focus on Material Design. So we haven't seen this yet, but there are many decisions that we need to make when we are doing Flutter applications. One of the decision is which UI toolkit we want to use. Material, it's actually an open and with a free license, let's say, architectural system for design, created by Google.

[00:05:35]
It's called Material Design, probably you have heard about it. And Material Design is a set of best practices and design patterns to design apps. And Flutter supports Material Design and it's compatible with the web, with Android, or with iOS. But have in mind that Flutter also supports other UI toolkits, for example, there is one within the name Cupertino.

[00:06:01]
So if I say Cupertino in terms of mobile app development, we are talking about Apple. Cupertino is the city where Apple resides, where the Apple Park is, okay? So the Cupertino set of widgets in Flutter are actually an iOS design. But if you do that, it's not going to be visually compatible with Android or the web, okay?

[00:06:26]
So we are going to focus on materials that works everywhere including iOS, okay? Remember to download the assets and the help from that URL.