Getting Started with Flutter: A Practical Guide to Creating and Running Your First App
Tags: flutter, crossplatform, mobile, dart
Published: 2023-04-30 22:18:02

## 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](https://dev.to/bigdexter/introduction-to-flutter-getting-started-with-cross-platform-development-mmg) 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](https://dev.to/bigdexter/introduction-to-flutter-setting-up-your-development-environment-1gi5), 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.
![Shot 0](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pir68ryoz12076dtyy2q.png) 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.
![Shot 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ev9iomtjh6pi0zsa9n99.png) 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. ![Shot 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u90yt2e6vqt4yv4sd6gb.png)

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. 
![Shot 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u3iawrp72xhwarmnayoo.png) 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.
![Shot 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fc008ezfgy3dx2zbd3a2.png) 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.
![Shot 5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/svlzofbczw0yykiyasmo.png)
Using Windows Explorer (or Finder if you're on Mac), you should be able to navigate to the directory where our app is located.
![Shot 6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f6axf3bo5js7gq95yxlf.png) Going back to our terminal window, run the `cd sample_app` command and it would change into our app directory.
![Shot 7](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/avkt0p3x6d4tj78wafck.png) Now that we're in our app directory, run the `code .` command.
![Shot 8](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/49k1ho0ou3q7lkh6czmm.png) 
Running the `code .` command would open a new VS Code window of our app. ![Shot 9](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a7tuhyo9ndzt9x643zyv.png)

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](https://pub.dev/), 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](https://www.mi.com/global/product/redmi-9t/) 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. ![Phone 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9rblwzektao0i6ijlx8n.png) 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. ![Phone 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rxur3fwlxbiymbcqj9mv.png) 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.
![Phone 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t68hcdadtywohgkhro3l.png)

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_.
![Phone 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9h43pibvg57s4dz5iux3.png)

5. When you're in, scroll down until you find two options that says "_USB Debugging_" and "_Install apps via USB_". 
![Phone 5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7xtirptctoq7eeqaa59o.png) 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_".
![Phone 5-1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yzr7b1lb52bls0c4n4k8.jpg)

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.
![Phone 6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hgmbkizathu7uo0f6lnx.jpg)
_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.
![Shot 10](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u1lpaaulp479uzegrd6q.png) 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. ![Shot 11](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lgbvj11gdtodr8h3q6co.png)

2. Type "_devices_" in the text box and select the "_Flutter: Select Device_" option at the top of the list. ![Shot 12](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/57uwcs51r5tfi62m2t9b.png)

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.
![Shot 13](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qwkl27s5rfee4c84ral1.png) 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. ![Shot 14](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6cecxnnfu0fdqz8bqpyx.png)

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. ![Shot 15](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u7bpnvngqqf46a75etvt.png) 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.
![Shot 16](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/48ky9fkt6umi5dyigu84.png) _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.
![Shot 17](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ns1gt08ubmde7e2p4c9.png)

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. ![Phone 7](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yrdpacc30pppbqkufbyu.jpg)

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.
![Shot 18](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k6eh5me275pdddowdwqx.png) This is what the app looks like now on our physical device after we changed the theme color. ![Phone 8](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/92e6npeg9jbmgjjr2ich.jpg)

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. ![Shot 19](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qvy17xp5gtw6lun92kds.png)


## 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💪🏽🚀⚡🔥