Create your first Android/iOS app.
Tags: android, ios, dart, flutter
Published: 2020-06-24 09:47:29

In the last post, I wrote about Flutter basics & how to install flutter in your system. If you didn't install Flutter please follow the steps given in the link here [Install Flutter, Official site] (https://flutter.dev/docs/get-started/install).
###Step 1. [Install Flutter] (https://flutter.dev/docs/get-started/install) ✔
I assume you installed flutter successfully in your system. I will be using windows 10 in this article.<u> The steps will be the same for Linux & Mac Os</u>. To check all things are ready just fire up your command prompt, terminal and type this command.

><code>Flutter doctor</code>

###You should see something similar
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/a59qw2ihmteshmbdjh4u.png)

####If the output is similar we are good to go, if there is some problem flutter will give the description & how to resolve it.

###Step 2. [Install VsCode] (https://code.visualstudio.com/download) ✔
>Visit the link to download & install VsCode [Install](https://code.visualstudio.com/download)
* It's the best IDE for coding.
* IntelliSense - syntax highlighting and autocomplete with IntelliSense.
* Debug code right from the editor.
* Connect your Git or GitLab account & collaborate with team members.

####Installed VsCode Cool! Now let's go ahead.

###Step 3. Create New Flutter Project. ✔
* Navigate to the folder/directory where you want to create the flutter project, for example- <code>CD Desktop</code> to navigate to Desktop.
* In your CMD/terminal type this command.
```css
 flutter create HelloWorld
```
_Here, HelloWorld is the name of your project_
Now Flutter will start installing files needed for our project. You should see something similar in the end.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bfmwndykmpkbahvm6xl3.png)

###Step 4. Setup VsCode for Flutter Development.✔
1. Open VsCode.
2. Click <code>View > Command Palette</code>
3. Type “install”, and select <code>Extensions: Install Extensions</code>.
4. Type “flutter” in the extensions search field, select <code>Flutter</code> in the list, and click Install. This also installs the required <code>Dart</code> plugin.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n6xsjm99lljyu6mm8g9f.png)

####Yehee! You just setup VsCode successfully.

###Step 5. Create a Virtual Device. ✔
1. Open Android Studio.
2. Open AVD Manager from Settings & click create virtual device.
3. ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9xitlevyqbf8arpqkhy6.png)
4. Select device type & android version.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tdhgczujnxn2gkxq0tbc.png)
5. click next & launch device.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f0r80fgfzn5y58rzm7ar.png)

###Yehee! you successfully created your virtual android device. Now back to VsCode.

###Step 6. Code a Hello World App.✔
1. Open VsCode.
2. Goto <code>Files > Open Folder > </code>
3. Select Flutter project folder which we created above 'Hello World'.
4. Something similar will open.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/oumps63xtl9wmlfd4y9n.png)
5. Click <code>lib>main.dart</code>
6. 'Main.dart' will open in code editor.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1dx7w9uqazh9r7v23a1b.png)
7. Now press F5 or from above toolbar <code> Run > Start Debugging </code> & select the virtual android device we created.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/efyqxbpfe6lbyhldy3xz.png)
8. Everything should be fine if you followed the steps correctly, Now an virtual device will show on your screen.
9. Wait a few minutes for the app to be built and installed to the virtual device.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/trxunerqmvzy6nagnquf.png)
10. WoW! You created your first android/ios app.

####I will explain the code in next post, as you see the post is too long and sorry if you find some mistakes here.