Flutter Project Setup | How to Develop an App with Flutter – Part 2

Whether you want to work at Flutter development company or be a freelancer, this knowledge will help you to become a Flutter developer.

Before we start writing the code of our app, we have to set up the environment.

The first step is to download and unarchive the latest stable release of the Flutter SDK (Software Development Kit) for your operating system. Don’t forget to install dependencies if needed (on Linux and macOS they’re usually available out of the box). Note that building for iOS is possible only on macOS.

It’s all about (the) IDE

The next step in your Flutter application development is to install an IDE (Integrated Development Environment). In theory, IDE is not needed and you can use only the SDK and any text editor for development. However, IDEs provide features like syntax highlighting, code completion, and debugger which are very helpful during the development process. In this tutorial, we will use Android Studio.

Flutter also provides official plugins for IntelliJ and Visual Studio Code. In case of Android Studio and IntelliJ, don’t forget to restart the IDE to activate the newly installed plugins (this is not needed for VS Code). Note that only stable versions of IDEs are supported, the Flutter plugin may not function properly on Beta, Canary, or EAP (Early Access Preview) builds.

Now it’s time to create a new project. On the welcome screen, choose Start a new Flutter Project and select Flutter Application on the next screen.

On a next screen you’ll need to provide the Flutter SDK path and basic project details.

Finally, set your domain name for the package. It’s important for package name to be unique (for signing and publishing purposes). If you don’t own a domain, use com.github.<your login> . Leave the other options set to default values and confirm by clicking Finish.

Et voilà! Our project is created. Let’s try to build it!

Your key to success: doctor

It’s a good idea to ensure that our environment is set up correctly. First, let’s open the terminal (Alt+F12 in Android Studio) and invoke the flutter doctor  command.

To run the app, we need to have usable Flutter, at least one working IDE, and a connected device (physical or an emulator/simulator).

Android

In the case of a physical Android device, it needs to be connected via a USB cable and have USB debugging enabled (see how to do that in the official developer guide).

In the case of an Android emulator, we need to create a virtual device. First, let’s open the AVD manager by either using the icon on the toolbar or pressing Ctrl+Alt+F12 (Cmd+Alt+F12 on macOS) and typing the action name.

Leave default settings on the next screens:

Creating an AVD is a one-off action. Once created, it will be available until explicitly removed.

Now it’s time to run our app! Choose the desired device or emulator and press Shift+F10 (Ctrl+R on macOS) or use the Run button.

iOS

In the case of iOS simulator, we first need to open it using the dropdown device menu:

The Xcode installer will prompt you to install the missing components (if there are any). After a while, the simulator should appear and become available on the device menu.

Things are a little bit more complicated in the case of a physical iOS device. Assuming that the device is connected via a USB cable and unlocked (keep in mind the additional key prompt after connecting a cable), we first need to open the iOS module in Xcode:

Then go to the Signing & Capabilities settings tab and add a new personal team:

Sign in to your Apple ID (create a new one if needed). After closing the Accounts window, provisioning profiles will be generated.

If you get an error which states that the app identifier cannot be registered like this:

It means that someone is already using your identifier. You need to change the Bundle Identifier value to something else.

After signing is configured, you can try to run the app from Android Studio. The first attempt will fail because the provisioning profile is not trusted on the device. You need to trust it in Profiles & Device Management settings:

Note that at the time of writing this article, it’s impossible to run Flutter apps provisioned using (free of charge) Personal Team provisioning profiles on devices running on iOS 13.3.1. It’s a limitation introduced by Apple. You can watch this issue to be notified about progress.

Once the profile is trusted, you can launch the app from the home screen.

Launch

The first launch may take a few minutes because of initializing the emulator/simulator and installing the SDK components. However, it should be almost instant in most cases the next time. Alternatively, you can also use the flutter run  command in the terminal window.

Note that if you are using Linux with kernel 5.5.x, your builds may hang for an infinite period of time due to this Flutter issue: https://github.com/flutter/flutter/issues/49185. This problem is probably caused by another Dart issue: https://github.com/dart-lang/sdk/issues/40589. At the time of writing this article, these are still under investigation.

At this point our app should look like this:

Let’s click on FAB (Floating Action Button) and see that the counter is changing.

Now it’s time to write some code. Let’s go to the line #21 and change the blue color to something else and use the Hot reload option (Ctrl+\ or Alt+\ on macOS) to apply changes immediately. Note that counter value was preserved.

The best way to source code

It’s a good idea to keep the source code in a repository hosted on some server. It allows other people to work on the same codebase and acts as a backup in case of development machine failures. In this tutorial, we’ll use the git repository hosted on GitHub.

First, let’s create a repository. Go to https://github.com/new, choose your project name and confirm. Don’t tick Initialize this repository with a README option since readme file is already present in the project. We also recommend creating the SSH keypair and registering the public key on GitHub.

Next, we can create a local repository. Use the VCS -> VCS Operation pop up menu option (Alt+` or Ctrl+V on macOS),choose the Create Git repository option, and confirm default location.

Note that some filenames became red:

It means that they aren’t committed (added to version control system) yet. Press Ctrl+K (or Cmd+K on macOS) and check all the files in the pop up window. Write “Initial commit” as the message and confirm. Alternatively, you can type git add -A  and git commit commands in the terminal. You can learn more about git in the official tutorial.

The last step is to push the commit to the remote server. Press Ctrl+Alt+K (Cmd+Alt+K on macOS) and define new remote. In the case of GitHub the URL will be in the form of: git@github.com:<user name>/<repository name>.git  (can be easily copied from GitHub website).

Note that SSH URL will only work when you’re using an SSH key. Otherwise, you need to choose HTTPS URL. Confirm URL and press the Push button. After a while, your code will be available on the remote repo. You can check it online on https://github.com/<user name>/<repository name> . It should look like the reference repository.

Setting up your first Flutter project – wrap up

And with that, we conclude the setup for our Flutter application. I hope our Flutter tutorial for beginners will help you in getting started with your Flutter mobile app development.

Now you can go to the next part of this series which is about creating home screen in your first Flutter app. Good luck!

Related posts