Getting Started with Flutter: A Practical Guide to Creating and Running Your First App

Introduction

Hey there... In today's article, I would take you through the entire process of creating your first Flutter application and running it for the first time on physical & virtual emulators as well as running it in our web browser (Yes, you can use a single Flutter codebase and develop for Android, iOS, Web and Desktop, and I talked about it in the first article of this Flutter series). Also in this article, I would let you in on some super useful Flutter commands as well as helpful tips & tricks in Flutter.

Previous Article

Before we proceed further, do refer back to my previous article, where I gave a detailed guide on how to set up your local machine for Flutter development.

Create Your First Flutter App

So, without any further ado, let's jump right in!!!

We'd start off by creating a simple Flutter app in our command-line (terminal). Fire up a terminal window and type in flutter upgrade, like below.
What this command does is that it upgrades the version of Flutter, as well as download and upgrade a couples of packages that is needed to ensure the smooth running of Flutter on your local machine.
You should allow the command do its thing and it would automatically run the flutter version and flutter doctor commands in the same terminal window.

You should have a directory where Flutter apps are housed. Mine is "C:\Users\Dexter\flutter-apps". You'd change into the directory you've created for store your Flutter apps by running the cd flutter-apps command, just like in the shot below.
Next, type in this command flutter create sample_app and hit enter. This would create the project folder and download the basic dependencies which our wonderful app called "sample_app" would need to run.
When it's done, you should have the following results, with useful information on how to run the app and where its entry point is located.

Using Windows Explorer (or Finder if you're on Mac), you should be able to navigate to the directory where our app is located.
Going back to our terminal window, run the cd sample_app command and it would change into our app directory.
Now that we're in our app directory, run the code . command.

Running the code . command would open a new VS Code window of our app.

Allow me to explain what a couple of folders and files are doing in the shot above:

1. "android" and "ios" folders contain the necessary files and dependencies when you would be building APKs/IPAs files and then deploying Android and/or iOS apps to the Google Play Store or iOS App Store respectively,

2. "lib" folder is the entry point of our application as this is where our "main.dart" file is stored,

3. the "linux", "macos", "web", and "windows" folders contain dependencies that would be needed when using Flutter to build and develop apps for Linux, MacOS, Windows platforms as well as for Web Browsers,

4. the "pubspec.yaml" is extremely important as this is the file we would we edit when we want to use Flutter packages in our apps after we download them from Dart packages, and

5. the "README.md" is the Markdown file that contains every and all information and documentation about your app.

NOTE - Do not delete or change the location of the "pubspec.yaml" file as this would generate issues and bugs you're not ready for.

Setting up your Physical Device/Emulator

Now, it's time to get into the juicy aspects of this article - where we run our app on a physical device/emulator - and I'm going to take through the process of setting up a physical device as our emulator.

For this part, I'm using Redmi 9T by Xiaomi and it's currently running Android 11. Now, your experience might not be the same as mine as you may be using some other device like Samsung, Nokia or any other Android device but it is usually has a similar process, so let's get started. Also, your USB cable would come in very handy right here.

By now, you have your development machine and Android device side-by-side🙃

1. Navigate to "Settings" on your mobile device and you should have something similar to the shot below. Search for "About phone" or something similar and select it.

2. From above, you should be greeted with this screen below where you can see some information about your Android device. Depending on the device you're using, you should see "Build number", mine says "MIUI version" but they're one and the same thing. Tap rapidly on "Build number" (somewhere between 5 to 7 times) until you get the prompt that says "You're now a developer". Doing this would activate "Developer options" on your mobile device.

3. Go back to the "Settings" main screen and search for "Developer options". I had to scroll as mine was under "Additional settings". Go ahead and select it.
   

4. From Step 3 above, scroll down until you see an option that says "Developer options" and select it. If you don't see this option, you would have to start this entire process from Step 1.
   

5. When you're in, scroll down until you find two options that says "USB Debugging" and "Install apps via USB".
   Tap on the "USB Debugging" option and you may (or may not) see a dialog screen pop up asking you for further confirmation, like below. Make sure to check the necessary boxes and hit "OK".
   

6. Now, connect one end of your USB cable to your phone and connect the other end to your development machine, and leave it connected. After you do that, navigate back to "Developer options". Now, you can select the "Install apps via USB" option, and you should have a screen similar to mine below, with the "USB Debugging" and "Install apps via USB" options activated.
   
   At some point, a pop-up should appear on your phone asking you if you trust the computer you've connected to, just simply tap "OK" (mine already did that and I totally forgot to take a screenshot of it). That's ADB (Android Debug Bridge) running in the background, helping make your workflow process smoother and seamless.

Running the app on a Physical Device/Emulator

With your phone still connected, head back to VS Code on your development machine, because it's time to run our app. On getting to VS Code, you should have a screen similar to this below.
My VS Code picked my device automatically, but yours may not be the same case. If your VS Code does not pick your physical emulator automatically, just follow these steps below.

1. In your VS Code, hold down the Ctrl + Shift + P keys at the same time and a dialog should come up at the top of your VS Code window.

2. Type "devices" in the text box and select the "Flutter: Select Device" option at the top of the list.

3. Your physical device/emulator should be at the top of the list of devices and it should have the "mobile" tag next to it. Go ahead and select it.
   Voila! You've selected the desired device that you'd want your Flutter app to run on.

4. Next, go to the terminal that is in-built within VS Code and you can do that by holding down the Ctrl + Shift + ` keys at the same time. Now that you're in, type in the flutter devices command within your terminal and run it. You should see your physical emulator listed in the result.

5. Next, type in the flutter run command to install and run the app on your physical device. Depending on your system specs, this should take some minutes because you're running it for the first time, so be patient. This point is extremely tricky as you have to keep an eye on your VS Code and your Android device at the same time. This might not be the best time to step away from your computer.
   Mine took longer than I expected because my VS Code had to confirm some Android dependencies like SDK Tools, SDK Platforms and Licenses installed on Android Studio

After a couple of minutes (mine was close to an hour), the "Running Gradle task: 'assembleDebug'" process should be done and then you get the green prompt that your app has been built.

The app installation process would commence after a few seconds and you should get a pop-up on your physical device asking you for confirmation to allow our app "sample_app" to be installed via USB. The pop-up should say something within the lines of "Allow this connection in the future", "Never ask again for this device" or similar, so just go ahead and check the box and then tap "OK" and your would be installed on your physical device and then it would run automatically.

Allow the entire process to be finished and wait until your terminal is similar to mine below, where your app is now installed on your physical device/emulator.

Bravo! You've successfully set up your personal mobile device to serve as your physical device/emulator when building with Flutter. You should have a screen similar to that below.

Let's change the theme color of our app from "blue" to "orange" (or some other color of your choice). We'd do that by editing the "main.dart" file in the "lib" directory. When you've changed the color from "blue" to some other color, get into your terminal and hit "r" to perform what is called a "hot reload" to effect the color change to our app.
This is what the app looks like now on our physical device after we changed the theme color.

To end the process, get into your terminal and hit "q" to quit, and you should have something similar to mine below. This operation would also close the app on your physical device.

Emulators: Physical Device vs Virtual Device (Android Virtual Device - AVD)

This paragraph is highly opinionated as I prefer to use a physical device over a virtual device. This is due to the specs of my current development machine because if I were to run AVD directly, my PC would start hyperventilating (figuratively), but feel free to use AVD on a higher-end machine as it is faster and saves development time. In a later article, I would guide you through setting up a virtual device (AVD), but until then.

Yes, I have used both physical devices and AVDs, and I can confidently tell you that AVDs are ten times faster to work with

Something Extra

One easy command you can run in the terminal to see a list a of Flutter commands is flutter -h.

Conclusion

You've made it this far in this post and I must applaud your dedication. We've covered a lot in this article and I'm open to answering any questions you may have. In our next article, we would cover the Flutter architecture at length, so give me a follow so you don't miss my next post.

P.S.

I'm editing this article on a wonderful Sunday evening... So, thank God it's Monday again💪🏽🚀⚡🔥

Comments

[SofiiaSov]

Thank you for sharing this helpful guide on getting started with Flutter! It's an excellent resource for newcomers to the platform. If anyone is looking to kickstart their Flutter development journey or has specific fintech-related app needs, I recommend exploring Cleveroad's flutter development services. They can provide expert assistance in turning your app ideas into reality.