Flutter setup - LLF #2

👋 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

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 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

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 (cmd+shift+p).
• 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.

Running the app

• Locate the VS Code status bar (the blue bar at the bottom of the window)
• Select a device from the Device Selector area. For details, see 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 F5.

The app should launch in the Emulator or device, and show something like this:

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, 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
• Flutter, setup editor
• Flutter, test drive
• Flutter, build an app
• Learn more

< Previous Post ... Next Post >