Introduction

[00:00:00]
>> Welcome to Introduction to Flutter Workshop at Frontend Masters. My name is Maximiliano, I can go with Max. I'm @firt on Twitter, firt.dev my website, and actually I'm a mobile/web developer. So I've been doing web development since 1995, and mobile app development since 2001, that's before Android, before iPhone.

[00:00:20]
And I'm from Argentina, I'm actually living in Buenos Aires. So before the pandemic, I was actually a frequent traveler and I'm getting back to it. So we're going to jump directly into our topic. So we're going to be making an app today in this framework known as Flutter.

[00:00:41]
So we're going to cover first, the basics of Flutter as a framework, as a platform, and also the basics of Dart. Dart is going to be the language that we're going to use to write Flutter applications. We are going to understand all the tools that we need first.

[00:00:59]
So everything that we need to install to actually make Flutter applications. If you are VS Code developer, so if you like to use Visual Studio Code, you can use it. If you prefer things like JetBrain IDEs, you can also use Android Studio. So, we're going to see how to test and debug your app, so how that works.

[00:01:19]
How to create and design your user interface. So what are the main differences compared with other frameworks, including maybe HTML, so what are the differences? Then how to navigate between screens, how to work with data, including how to access web services. So how to make HTTP requests using the Flutter framework.

[00:01:41]
And finally, we're going to see how to make not just mobile applications for iOS and Android, those are our main goals today. We're going to see also how to make a progressive web app, a PWA. A progressive web app for now, as a quick spoiler, it's actually a website with some kind of superpowers that can convert itself into an offline capable installable app in your device, including desktop and mobile devices, okay?

[00:02:10]
But that's a spoiler for the end of the workshop. So pre-requisites, I am assuming that you know programming in any language with OOP. So if you know what a class is, an object, an instance, a method, a variable, okay, you're good to go. In that website, firtman.github.io/intro-flutter, you have a companion website, if you wanna follow along with what I'm doing.

[00:02:38]
I'm going to push my code into GitHub but also you have there all the steps and the code in case you wanna copy and paste. The code might not be 100% the same as the one that I will be doing while live coding, but it's going to be pretty similar.

[00:02:52]
So there also we have the slides, in case you wanna download and see my slides. That is just for the first part of the training, most of the workshop will be live coding, and the links for the requirements that we need to install. And then I wanna start with that, so I will get out of the presentation for a minute and I will go to that website.

[00:03:15]
Because I want you to start installing and downloading everything you need, because it may take time, it depends on your connection, it might take some time. So, one good news first is that even if you have problems installing all the tools, you can still do Dart coding and even Flutter coding on the web.

[00:03:35]
So there are a couple of websites that you can use to actually even write your user interface and test your user interface without installing anything. But of course, we will install all the tools and run everything locally. But in case you just wanna play with this, have in mind that you can play with this online, and that's not possible on other, or it's not so simple on other platforms, okay?

[00:03:57]
So, if you go to, again, firtman.github.io/intro-flutter, you will see here the table of contents, TOC, and in inside introduction, you have here the requirements. The first requirement is for you to install Flutter. Flutter, the SDK, is actually available for Mac, Windows, Linux, and even Chromebooks. And if you click on this link, you will go directly to the installation website.

[00:04:26]
It's just a big zip file for every platform, it's like 1.5 to 2.5 gigabytes. You will download that zip file and you just need to unzip that file, so there is no installer there, okay? So you just unzip the contents of Flutter for your operating system. And if you click on each operating system, you will also find instructions on how to update your path.

[00:04:53]
Because Flutter is heavily based on a command line interface. That doesn't mean that we are going to use that command line interface a lot because we can use the IDE, but anyway, we typically need that folder in the path. So if you don't know how to add a new folder to your path, to your environment variables in your operating system, in the Flutter website, you have all the instructions.

[00:05:18]
After doing that, then you will need to pick one IDE to use. I will show you how to use both anyway, but you can pick Visual Studio Code or Android Studio. In any case, on both platforms, you will need to download plugins for Flutter. So by default, they don't support Flutter.

[00:05:39]
So for example, on VS Code, when you go to your extensions, you can just search for Flutter and be sure that you're installing the Flutter. When you install the Flutter extension, it will also install the Dart extension automatically for you, okay? So that's all you need from this side.

[00:06:00]
What about compiling the apps? So to compile the apps, by the way, we didn't yet cover which platforms are compatible, but I have already mentioned. And if you're here, you've already know that Flutter will compile apps for iOS and Android at least. But to do that, Flutter relies on the SDKs and compilers from the official SDKs.

[00:06:25]
Meaning that, if you wanna compile an Android application, you will need to install Android Studio or the Android SDK, but Android Studio includes everything you need. So it's available for Linux, Mac, and Windows. You also need to go and install and download Android Studio. It has an installer, so it's actually pretty simple, you just install the app, and that's all.

[00:06:48]
Even if you're not going to use Android Studio as your Flutter IDE, because you can pick Android Studio or VS Code, you need Android Studio tools to emulate and compile the Android application. If you don't wanna compile an Android application, then you don't need to install it, so it's up to you.

[00:07:05]
And if you want to compile iOS applications, the first bad news that I have for you is that you will need a Mac. I mean, that's bad news only if you don't have a Mac, but to compile an iOS application, you will need a Mac, okay? So if you're on Windows or Linux, you won't be able to use Flutter to compile the Mac.

[00:07:27]
But then you can borrow a Mac from a friend, take your same source code and then make the compilation there, so it's not going to be a big deal. So in this case, if you have a Mac, what you need to install is Xcode, and Xcode is a free IDE available in the App Store.

[00:07:42]
So you just need to go to the App Store in your Mac and download Xcode. That's for simulating and also to compiling iOS application, okay? And the final thing that you need to download are the workshop's assets. Just a zip file that you have here with a couple of images and some source code that we will use later today in the workshop, okay?

[00:08:07]
Just in case you wanna use Android Studio as your IDE, let me show you how to install the plugin, the Flutter plugin. So when you are in Android Studio, you don't need to do this if you're going to use Visual Studio Code. You go to Preferences, and within Preferences you have the Plugins section.

[00:08:29]
And within Plugins section, you go to the marketplace where you can see all the plugins available, and you just search for Flutter, I have already installed it. And when you install the Flutter plugin, it will also install the Dart plugin. So you have the language and the framework plugin both at the same time.

[00:08:48]
So after you have done this, you're ready to start developing apps in Flutter, yeah?
>> And you also talked about a Flutter SDK?
>> So the Flutter SDK is actually this requirement when you install Flutter. So you always need to install the Flutter SDK first, and then the plugin for your IDE.

[00:09:10]
So the plugin for any IDE will actually search for the SDK. So you actually need to download though, that 1.5 gigabytes of files, and then the plug in your IDE will actually point to that SDK, okay? So, at this point, it's a good time to tell you that compared with other, let's say mobile UI toolkit frameworks, Flutter, it's a little bit low level.

[00:09:38]
I mean it's not a problem by itself, but you will see that there are many steps that you don't have just one single style and you're done. You have to make a lot of stuff up and running, okay, and we will get into the details of everything in a minute.

[00:09:56]
So at this point, I just want to start telling you that you should start downloading these files while we are talking about Flutter and what it is and what are we going through today.