Flutter setup - LLF #2
Tags: flutter, dart, tutorial, beginners
Published: 2021-08-25 11:54:43



👋 Welcome back to the second post on this series. In this one, we will be covering **how to set up Flutter**. You can follow their official guide if you want to [here](https://flutter.dev/docs/get-started/install)


> You can skip this one if you already have Flutter installed or know how to do it. 

## Install Flutter in your machine
The first step is to install Flutter in your development machine. It works in all major OS'

For that, you will have to go to the [install](https://flutter.dev/docs/get-started/install) page. And follow the instructions for your Operating System.

## Setup and Editor

After you've got Flutter installed, you will need to set up an editor. I recommend VScode as the series will be using it, but feel free to use anyone they support. Check their guides [here](https://flutter.dev/docs/get-started/editor?tab=vscode)

## We are now ready to do a test drive

### Creating a new application
Let's now create a basic flutter app, for VSCode you can do it like this:

* Invoke **View > Command Palette** (<kbd>cmd+shift+p</kbd>).
* Type “flutter”, and select **Flutter: New Application Project**.
* Create or select the parent directory for the new project folder.
* Enter a project name, such as `myapp`, and press **Enter**.
* Wait for project creation to complete and the `main.dart` file to appear.

> The above commands create a Flutter project directory called myapp that contains a simple demo app that uses Material Components.

I would recommend checking the guide they provide [here](https://flutter.dev/docs/get-started/test-drive?tab=vscode). 

### Running the app

* Locate the VS Code status bar (the blue bar at the bottom of the window)
![VScode status bar image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k0dh1qw82xrz0r6xso9v.png)
* Select a device from the **Device Selector** area. For details, see [Quickly switching between Flutter devices](https://dartcode.org/docs/quickly-switching-between-flutter-devices).
    * If no device is available and you want to use a device simulator, click **No Devices and launch a simulator**.
* Invoke **Run > Start Debugging** or press <kbd>F5</kbd>.

The app should launch in the Emulator or device, and show something like this:
![Launched app image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h0m3ql1ywpcc2ake98ni.png)


### Let's make a change
Flutter offers a fast development cycle with Stateful Hot Reload, the ability to reload the code of a live running app without restarting or losing the app state. 

Let's try that, by:
1. Locating `main.dart`
2. Locate the string _'You have pushed the button this many times'_
3. Modify to something different like: _'You have clicked the button this many times'_

After saving you should see the changes immediately reflected in the app.


### Further learning
In the next posts, I will be covering everything to be able to build a complete app, but if you want to start already, I would suggest checking out their guide on how to build a complete app [here](https://flutter.dev/docs/get-started/codelab), quite detailed.


## Summary

Another short and kinda uninteresting post, though necessary for the upcoming ones! I promise they will get more interesting.

To summarize this one, I've shown you an overview of how to set up flutter on your machine and provide you with links to help you get going. The process is usually quite straightforward, so I don't expect it to give you any problems. If it does, please let me know and I will be happy to help out!

Thanks for reading. I hope you learned a thing or two.

And finally, remember to comment if you have any suggestions or something you would like me to cover in the next posts.

## Links
* [Flutter, install](https://flutter.dev/docs/get-started/install)
* [Flutter, setup editor](https://flutter.dev/docs/get-started/editor?tab=vscode)
* [Flutter, test drive](https://flutter.dev/docs/get-started/test-drive?tab=vscode)
* [Flutter, build an app](https://flutter.dev/docs/get-started/codelab)
* [Learn more](https://flutter.dev/docs/get-started/learn-more)

----

[< Previous Post][post-1]  ...  [Next Post >][post-3]

----

[post-1]: https://dev.to/nombrekeff/flutter-what-is-it-llf-1-2jok
[post-3]: https://dev.to/nombrekeff/important-flutter-files-and-folders-llf-3-g7g