Complete Flutter Guide 2024: Build Android, iOS and Web apps

WHAT IS FLUTTER

We'll start off this lesson by talking about the very fundamentals of Flutter—what it is and why it's so helpful.

By definition, Flutter is an open source framework developed by Google for building beautiful,

natively compiled, multi-platform applications with one single codebase. In simpler words, Flutter is a software development kit, or an SDK, that helps you develop apps on 6 platforms by coding in just one project.

Creating applications for several platforms required writing code in various languages prior to the creation of Flutter. Flutter's central concept is that it aims to simultaneously address the "re-think the app design" issue and the "write once, run anywhere" issue. It made the process of delivering apps to many platforms incredibly simple and time-saving.

Now that Flutter is out, all you have to do to get your app to work on all 6 platforms is to create a single project, and Flutter will translate your code into each platform's native language for you!

Flutter is extremely developer-friendly and has a lot of inbuilt Widgets and millions of packages. We’ll be learning about widgets later on but for now, you can think of widgets as blocks of code with a specific function that can be joined like legos to give desired results.

Since we believe in learning by doing, we’ll be making a simple Flutter app in this lesson itself so buckle up!

Now that Flutter is out, all you have to do to get your app to work on all 6 platforms is to create a single project, and Flutter will translate your code into each platform's native language for you!

Flutter is extremely developer-friendly and has a lot of inbuilt Widgets and millions of packages. We’ll be learning about widgets later on but for now, you can think of widgets as blocks of code with a specific function that can be joined like legos to give desired results.

Since we believe in learning by doing, we’ll be making a simple Flutter app in this lesson itself so buckle up!

HOW EXACTLY DOES FLUTTER WORK

In this lesson, we’ll be trying to decode the working of Flutter.

As you already know, Flutter is a new cross-platform mobile SDK to build modern mobile apps and it uses an entirely new language, called Dart.

Let's examine the precise mechanism by which Flutter works. Flutter leverages its built-in engine, which was mostly created with C++, to translate Dart code into native code such as Swift, Java, and other languages depending on the platform. We’ll also be comparing the different functions of Flutter with the cross-platform toolkits.

The definitions of important technical words like "compilation" and "native code" will also be discussed in this lesson. Compiling is the process of converting the code we write into an application.

Programming code that is optimized to execute on a particular processor is referred to as native code. In our case, it essentially refers to a programming language that can be used on a certain platform. For instance, Swift is a programming language that can be used on IOS, which is the operating system for iPhones.

All of this may sound daunting at first but don’t worry, we’ll ensure that you don’t get caught up in the information overload.

JAVA INSTALLATION

DISCLAIMER: If you have MAC OS as your operating system then you can skip this module and directly jump to the MAC installation video.

REQUIREMENTS:

• Minimum 15 GB of space

• Minimum 4GB RAM

• Windows 7 or above

Although Android supports Windows, Mac OS, and Linux as operating systems, it doesn’t come with built-in support for any of those. However, to build Android apps, Java is your savior!

In the first lesson of this module, we’ll take a look at how you can install the latest Java version to run the Android toolchains. These Android toolchains are commonly referred to as “Android SDK installers.” They’re provided by most Android IDE vendors so that anyone can quickly and easily get access to the necessary tools without needing their own computer.

Don’t worry if you don’t understand this right now. By the end of this course, you’ll be a pro at creating your own Flutter applications. Till then, keep learning and growing!

GIT INSTALLATION

Git is an open-source software designed to handle and track changes in your Flutter app files. It is one of the most widely used version control systems (VCS) for tracking changes in all your software projects, be it in Flutter or any other SDK or programming language. You can think of Git as a VCS that lets you track changes made to different files, known as commits, and work with those changes later on.

With Git, you can use a text editor to edit and manage your Flutter app files on your computer, or you can use the git command line interface to edit and manage them live on your computer.

In this lesson, we’ll be explaining the entire process of downloading Git on your PC step by step.

Once you’re done installing the Flutter SDK and Git, you’ll be able to use Git to create and manage the Flutter app repository on your Windows.

If you’re new to version control systems (VCSs) don’t worry, we have got you covered. Installing Git on your machine can appear to be a daunting task for someone who is new to the world of code and programming. However, installing Git on your Windows operating system is not as difficult as you may think. We promise you that our comprehensive setup instructions won't let you feel overwhelmed with information overload.

FLUTTER INSTALLATION

DISCLAIMER: To develop with Flutter, you also must first have the Java environment installed. In case you don’t have it installed, check our previous modules before moving forward.

In this module, we will learn how to install the Flutter SDK and its requirements on Windows systems from its official website. We’ll also be covering the updating of the path environment variable to run Flutter commands in Windows PowerShell and Command Prompt (CMD) consoles so stay tuned!

For those unfamiliar, Flutter is a new cross-platform mobile SDK to build modern mobile apps. It uses an entirely new language, called Dart. The core idea behind Flutter is that it tries to solve both the “write once, run anywhere” problem and the “re-think the app design” problem at the same time. Unlike Xamarin or React Native, Flutter is not a source code translation tool. Instead, it uses a new intermediate language called Dart that can run equally well on both Android and iOS.

ANDROID STUDIO INSTALLATION

Code editors are an integral part of your development environment. The Android SDK or Android Studio is a great IDE for building Flutter apps. It comes with a comprehensive set of tools that creates Android SDK apps. It includes an integrated emulator with hardware acceleration. In Android Studio, you can create and debug your Flutter apps to see their impact right on your device. A great thing about it is that you can develop a new Flutter app using only the settings of your choice and it supports multiple devices.

It also has a vibrant code editing platform and since it is a complete IDE, you do not need to use any other third-party tools.

This module will show you the system requirements and the different steps to download and install Android Studio on Windows.

DISCLAIMER: You are free to use any code editor of your choice.

In this video lecture, you will also get to learn a mind-blowing method to reformat your code every time you save your file. This could potentially save you hours of formatting and frustration.

So, what are you waiting for? Start with the lesson to know more about Android Studio!

EMULATOR

At this point, we are finished with the installation of the Android studio. In case you haven’t installed it yet, go through the previous lessons to do so. In this lesson, we will be learning how to create our very own Android Virtual Device in Android studio.

To test our Flutter application, we will be requiring a new hardware platform where we will be able to add our Flutter project structure.

An Android Device Manager helps to create and configure an Android Virtual Device (AVD) that emulates a physical Android device. AVDs can also be used to test devices like Android TV and Android Wear but this topic goes beyond the scope of this course.

Using android studio's AVD control interface, we will set up our Android Virtual Device emulator to test our sample Flutter application. We’ll also choose a system image, which will be the Android version of our new device. All this in a single lesson!

DISCLAIMER: Your system might crash frequently if the emulator you installed is very heavy for your PC. In that case, we recommend you use a physical device like your smartphone.

ANDROID LICENSES

We have successfully installed Flutter on our system, but there might be a couple of errors we need to fix.

In this lesson, we will be using our command prompt and the ‘flutter doctor’ command to check for errors in Flutter installation. Your console would then show a list of the errors it encounters on its way to detecting if Flutter is installed properly. If there are no errors, yay, you are free to move toward the next module!

We will be covering the two most common errors you might face and ways to debug them. In case of missing licenses, we will be mentioning the command needed to install the Android licenses and you’ll be ready to rock the world with your Flutter applications.

A short video lesson but do not skip this one definitely!

FIREBASE SETUP

We’ll be requiring the backend to deploy our Flutter app to the server. Firebase can be used to test, manage, and deploy our Flutter project from the command line.

In this module, you'll learn how to quickly set up and configure Firebase for your Flutter site. We will be covering the installation of the Firebase CLI using npm (Node package manager). We’ll be downloading NodeJS for the same. This process doesn't involve many steps and you can do it in your browser without installing any plugins.

Follow this hands-on video to get your Flutter app up and running while being connected to the backend server.

DISCLAIMER: We will also need a local Node environment to install and use the Firebase CLI, so make sure you have nvm and npm installed.

WINDOWS INSTALLATION

For those of you unfamiliar, Flutter is a new mobile development platform created by Google that allows developers to create beautiful and responsive apps for Android and iOS. Flutter is free and open source, integrates with existing code, and is utilized by web developers and businesses all over the world. Its features include animated user interfaces, hot reloading, fast build time, interactive debugger, and much more.

If you want to build a Windows app with Flutter, you need to have Visual Studio Code installed. Visual Studio Code is a text editor used by all Flutter developers and has plugins for IntelliSense and other useful things. You can use any code editor of your choice, but we recommend VS Code because it is lightweight and works great with Flutter.

In this module, we’ll be following the entire downloading procedure for Visual Studio Code in the most comprehensive manner. Once we have it installed, we will start building our application!

MAC INSTALLATION

This module will cover each step to creating Flutter apps on your Mac. We will be using various handy installation docs and websites to do so.

In order to develop Flutter applications, you must first have the appropriate Java environment. Hence, we will start off by installing Java through the web in just a number of clicks.

The next step will be to download the Flutter SDK. Ensure that you select the Flutter SDK based on your processor architecture. In case you aren’t sure about it, we suggest you go through your computer settings. You will be seeing a separate command for Apple Silicon Mac in the document. You need to store the Flutter SDK, so you will be running a command to check if you already have a folder called development or not.

In case the folder does not exist, you will be creating one manually. Follow our comprehensive module carefully to avoid potential path errors.

If you run flutter doctor and see a message saying "[!] Android Studio (not installed)", don't worry. You can fix this by pointing Flutter to the location of your Android Studio installation.

Here's what to do:

1. Open your terminal.

2. Type the following command: flutter config --android-studio-dir="C:Program FilesAndroidAndroid Studio"

This path is the typical location for Android Studio. However, if you installed Android Studio in a different location, simply replace "C:Program FilesAndroidAndroid Studio" in the command with the path to where your Android Studio is installed. Make sure to include the path within the quotes. This will help Flutter recognize where Android Studio is located on your computer.


If you encounter an error during the installation of Intel HAXM, follow these steps to resolve it:

1. First, ensure that you have the necessary permissions to make changes to your system.

2. Open the Windows Features settings:

   • You can do this by searching for “Windows Features” in the Start Menu or Windows Search.

3. Check the boxes next to “Virtual Machine Platform” and “Windows Hypervisor Platform”.

4. Click OK to save the changes.

These adjustments should help you successfully install Intel HAXM.

CREATING FLUTTER APP  1

In this lesson, we will create a Flutter application and learn about Dash and Dart’s little background story. We hope this gets you more pumped up and excited!

Shams Zakhour began promoting a Dart mascot as soon as she began working as a Dart writer at Google in December 2013. She had seen how adored Duke, the Java mascot, had grown after 14 years of documenting Java, and she wanted the same for Dart.

Let me now provide some information to you regarding the dash hummingbird.

Despite being a woman, Dash doesn't mind being addressed as they, their, he, or him. Dash has a straight beak and even has an Instagram account.

In a nutshell, Dash is flutter's mascot or charm.

In this lesson, we will be creating our very own Dashatar to which you can give some of your qualities and personality. The Flutter app we will create will display your personalized dashatar!

We will be launching Pixel 3a as our AVD manager. You can use any emulator of your choice.

Next, we will also go over how the key to being a great developer lies in how you organize your projects.

CREATING FLUTTER APP 2

In this lesson, we will be finally running the demo application Flutter created for us which also contains our personalized dashatar!

Each of the platforms we chose previously has its own folder present. There are folders for iOS, Android, and other platforms. You may recall that we declined to select Web earlier and hence there will not be any ‘Web’ folder.

For this lesson though, we plan on executing our application on the web platform, and in order to do that, a folder must be made for this use.

This will be done by enabling the Web option and typing ‘flutter config enable web’. Next, you will have to write "flutter create". This is for creating the web support folder. Wait a while after writing the command for the folder to appear.

You can carry out the same procedure to execute your application on other platforms as well.

Next, we will be creating our own application using the widgets of our choice. We begin off by deleting the required code and once again following our hit-and-trial approach.

You will also get to know the importance of Android Studio and how this IDE makes our work a lot easier.

See you in the next lesson!

CODING THE APP 1

In the last lesson we got to know about Dash and how she serves as Flutter’s mascot.

In this lesson, we’ll move forward with creating our Dashatar for which you can give some of your qualities and personality. You can choose between different roles, including manager, designer, and developer. You can also select the values for charm, wisdom, strength, and agility. Keep in mind that you can award an attribute up to 8 points.

You’ll have to visit the flutter dash website to create your dashatar website.

I’ll be naming my Flutter application as ‘My Dashatar App’ as it sounds very specific. You can give any name to your application but make sure you put the text in quotation marks.

You will also get to learn about the material widget called scaffold. A scaffold is essentially a framework on which we can mount particular widgets. There are many useful characteristics of scaffolding as well. These include, among many others, appbar, body, and bottomsheet. Android Studio displays them all.

We’ll also be covering the concept of variables in this lesson. Variables are merely a designated memory location, to put it briefly. There are several different kinds of it but in this lesson, we’ll be talking about Integer, Double, String, and Bool.

CODING THE APP 2

In this lesson, we will be adding our dashatar to the Flutter app. We will be creating a folder to store our Dashatar image as well.

We will be taking a look over one of the files that would have been confusing most of you- the pubspec.yaml file. You can ignore most of the contents of this file as they are written in green, meaning that they are commented out.

This file contains all the dependencies, packages, and assets that we need. In our situation, we want to include the image which is an "asset" in our application.

Inside the lesson, we also have 2 mini challenges for you.

The first one is perfecting the position of the image and the second challenge consists of changing the background color of the scaffold

Complete the lesson to know the difference between the release mode and debug mode and when which mode is enabled.

We use the debug mode while testing the application and the release mode is used for production purposes. Can you guess which of these modes contain monitoring tools? Check the video to find out.

We hope you will like your cute personalized Dash!

CODING THE APP 3

In this lesson, we’ll be utilizing a package to change our launcher icon.

By default, the launcher icon has a Flutter icon. We have the option to change it to anything we like. We have the option to alter the launcher manually, but here we’ll be learning to use an appropriate package to do that for us.

A package is just another piece of code that we can use. We’ll be searching for this package on the pub.dev website. ‘pub.dev’ is a webpage where you can find many open-source packages for Flutter. Search for “flutter launcher icon” to get some relevant packages.

The key to choosing a good package lies in observing that it has a lot of likes, good pub points, and nice popularity. To know how to use the package, we’ll have to go through the doc that comes with it.

Dependencies are also of two types. Complete the lesson to master the difference between them. Here’s a sneak peek though- one of them contains the packages while the other dependencies are not present on the user’s device.

Running the app in release mode to ensure everything is functioning properly is always a smart idea. You’ll get to know more about how to do it in the lesson itself!

Hi there!

Are you looking to enhance your company's apps with Flutter? I'm here to bring your vision to life. As an experienced Software engineer with a successful Udemy course under my belt and experience with consulting billion-dollar companies, I'm ready to be your next employee or contractor regardless of location and elevate your projects to new heights.

Interested in teaming up? Let's connect on LinkedIn, Sagnik Bhattacharya: https://www.linkedin.com/in/sagnik-bhattacharya-916b9463/

Best,
Sagnik Bhattacharya

WHAT’S THE CHALLENGE

We hope you are having fun learning Flutter! It is time to put your Flutter knowledge to practice!

You will be creating your very own Flutter application like the one we previously made. The only catch here is that you will have to load your image directly from the network without storing it on your device.

You might want to refer to the last module to revise your concepts related to the location of images. You might find the challenge tough, but remember this is just because we are making the tasks difficult so you reuse and reapply the skills you learned. This will also help you in strengthening your core Flutter concepts.

You are free to use the text and color widgets according to your preference. Time to let your creative side shine!

Watch the video to know more about Ninja Challenge 101. All the very best!

Meet you in the next lesson.

SOLUTION TO THE CHALLENGE

Whether you solved the Ninja challenge or not, we hope you at least gave it your best shot and kudos to you for that!

In this video, we will cover the solution to the Ninja Challenge 101 we assigned you.

The trick to solving this challenge was to use the widget called ‘Image.network()’ which would contain the link to your image address.

For the solution, the Flutter app we are going to create will simply display the image of coffee from the net. We will be naming the Flutter app ‘my_coffee_app’.

Throughout our solution, we will be employing the hit and trial approach which gets us to explore new features. You will also get to learn about some shortcut keys to minimize and expand brackets for your main.dart file.

We will choose from different fonts and colors to see which ones fit the best. This would serve as a great way to revise our previous concepts of widgets, Scaffold, and AppBar to name a few, and also go through the process of opening the emulator and launching our app.

Congratulations on finishing the last lesson of this module! We can’t wait to see you begin the next module. Onwards and upwards.

THE PROBLEM

Welcome to the second stage of the ninja challenge!

You now know a lot more about the foundations of Flutter. This test will be a little unusual. We’d like to say that most of the skills required to successfully complete this challenge are already in your possession.

You now need to use your internet research abilities to find the rest of the knowledge you’ll require.

Because you are such amazing learners, here’s a hint for you: The properties of some widgets may not always be known to you, in which case you will need to search for them independently.

Once you've figured out exactly how to obtain the information you seek, you'll be much more efficient the next time you're looking for the ideal widget or property. The key is to practice!

This challenge's specific goal is to replicate your actual job setting. You may find the task challenging, but keep in mind that we are only making the activities challenging so that you can use and reapply the abilities you’ve already acquired.

Meet you in the next lesson. All the best!

THE SOLUTION

Whether you solved the Ninja challenge or not, we hope you at least gave it your best shot and

kudos to you for that!

In this video, we will cover the solution to the second stage of the Ninja Challenge we assigned you.

The application looks like a blank canvas and the first step is always to begin with the appbar. The title I am planning to assign to my project is ‘LaunchPad’.

You may recall that we always have to divide large problems—in this example, the entire app—into smaller, more manageable challenges. We will be beginning with one button because of this.

After our application’s font and colors have been decided, we’ll be moving on to the next step. In our solution, we’ve tried to use as many widgets as possible using our usual hit-and-trial technique. We will recommend you also try to use whatever knowledge you gained till now.

The next part will be to customize the looks of our Flutter LaunchPad. Time to let our creative sides shine!

The last part is to add sounds to all of our pads. The files might have different extensions than what you might plan on using- .wav or .mp3. This would not be an issue.

Congratulations! See you in the next module!