The development of mobile applications for two platforms at the same time has become an industry standard, and Flutter occupies a leading position here. This framework from Google allows you to write code in the language Dart and compile it into native applications for Android and iOS. However, the path from the idea to the first working screen begins with the correct setup of the environment.
Many beginners encounter difficulties already at the initialization stage, when it is necessary to connect the code editor, compiler and emulator. Android Studio is the most complete and recommended tool for this task, as it contains all the necessary plugins and debuggers out of the box. In this article, we will analyze the process of creating the first project in detail, avoiding typical configuration errors.
You will learn not just to press the "Create" button, but to understand what is happening "under the hood" when generating files. Correct installation of the Flutter SDK before starting to work with the IDE is a critical condition, without which it is impossible to create a project. We will look at the folder structure, emulator settings and the first steps to run code on a virtual device.
Preparing the environment and installing the SDK
Before launching Android Studio, you need to make sure that it is installed on your computer Flutter SDK. This is a set of tools, libraries and compilers that the IDE will use to build the application. You can download the current version on the official website of the developer by selecting the archive for your operating system.
After unpacking the archive into a convenient directory (preferably without spaces in the path, for example, C:\src\flutter), you need to add the path to the folder bin to the system environment variables. This will allow you to run framework commands from anywhere on the command line. For Windows, this is done through the system settings, and for macOS and Linux - by editing the shell configuration file, for example .bashrc or .zshrc.
⚠️ Attention: On macOS and Linux, users often forget to add the path to the SDK to the terminal configuration file. If the command is not recognized, check the variable and make sure that the changes were applied by the command or similar. To check the installation is correct, run the command in the terminal. This diagnostic tool will scan the system and point out missing components, such as a missing
flutter doctornot recognized, check the variablePATHand make sure the changes are applied by the commandsource ~/.zshrcor similar.
To check the installation is correct, run the command in the terminal flutter doctor. This diagnostic tool will scan the system and point out missing components such as missing Android SDK or an unconfigured emulator. The status of each component will be marked with checkmarks or crosses, which makes it easier to find problems.
Use the flutter upgrade command to update the framework to the latest stable version if doctor reports the presence of new releases.
Integrating the Flutter plugin into Android Studio
Although Android Studio supports Dart natively in new versions; to fully work with Flutter, installing or updating a specialized plugin is often required. It provides syntax highlighting, code completion, and access to DevTools widgets. Open the IDE settings menu by following the path File → Settings (or Android Studio → Preferences on Mac).
In the window that opens, find the section Plugins and enter "Flutter" in the search bar. Make sure the plugin is installed and activated. The plugin will be automatically installed along with it Dart, which is required to support the programming language. Without these components, the IDE will treat your files as plain text.
After installing the plugin, you will need to restart the development environment. This is a standard procedure that allows you to integrate new extensions into the core of the app. After the restart, a button to create a new Flutter project should appear in the main welcome menu.
- 🛠️ The plugin provides code snippets for quickly generating widgets, such as
stfulfor StatefulWidget. - 🎨 Visualization tools allow you to see the widget tree in real time during debugging.
- ⚡ Hot Reload works only when the plugin is installed correctly, speeding up the process of making edits.
It is important to monitor plugin versions, since new versions Flutter SDK may require an updated version of the extension in the IDE. If you encounter strange behavior in the code editor, check for updates in the plugins menu.
Creating a new project: step-by-step guide
The process of generating the basic structure of the application is Android Studio maximally automated. On the start screen, select the option New Flutter Project. If you already have a project open, use the menu File → New → New Flutter Project.
In the creation wizard that opens, select the application type. The best place to start is a template Flutter Applicationthat creates a standard application with a counter. Next, you will be prompted to specify the path to the SDK if it was not automatically determined. Make sure that the path leads to the folder where you previously unpacked the framework.
☑️ Check before creating the project
The next step is to enter the project name. It must be written in lowercase, use only Latin letters, numbers and underscores, without spaces. This name will become part of the package name, which is used by the Android operating system to uniquely identify your application.
Also select your programming language. Even though Flutter uses Dart, you can choose support Kotlin or Java for the native part of the code (platform channels). For most tasks, it is enough to leave the default settings, where Kotlin is the preferred choice for the Android platform.
| Parameter | Description | Recommended value |
|---|---|---|
| Project Name | Project name in snake_case | my_first_app |
| Project Location | Path to folder on the disk | C:\Dev\Projects\my_first_app |
| Description | Brief description | A new Flutter project |
| Flutter SDK path | Path to the installed SDK | C:\src\flutter |
After clicking the button Finish IDE will begin the process of obtaining dependencies. In the bottom panel you will see the command execution progress bar flutter pub get. This command downloads all the necessary libraries specified in the file pubspec.yaml.
File structure and navigation
After successfully creating the project, a code editor with a ready-made file structure will open in front of you. The main attention should be paid to the folder lib, since this is where the file main.dartcontaining the entry point to the application is located. All changes to the interface and logic are made in this directory.
The file pubspec.yaml is the project manifest. It contains the name, version, description, as well as the dependencies (libraries) that you plan to use. Any addition of a new library requires editing this file and then running the get packages command.
What is pubspec.lock?
This file is created automatically and captures the exact versions of all dependencies that were downloaded. It ensures that all team developers and build servers use identical versions of libraries, preventing version conflicts.
The directory android contains native platform code and Gradle configuration files. The average Flutter developer rarely needs to touch these files, but this is where permissions, application icon, and signature options for the release are configured. Changes to AndroidManifest.xml may be required when requesting camera or geolocation permissions.
Use the IDE's built-in capabilities to navigate through the code. Android Studio allows you to quickly navigate to a class definition, find usage, and perform refactorings. The widget tree structure is often nested, so the ability to quickly navigate through files is critical for productivity.
- 📂 Folder
testis intended for unit tests and widget tests that ensure code stability. - 📂 Directory
assets(manually created) is used to store images, fonts and JSON files. - 📂 The file
.gitignoreis already configured to ignore temporary build files and local IDE settings.
Understanding the purpose of each folder helps avoid chaos in the project as it grows. It is not recommended to store resource files outside the designated directories, as this may lead to build errors.
Setting up the emulator and launching the application
To run the application on your computer, you need an emulator or a connected physical device. In Android Studio virtual devices are managed via Device Manager. Open it through the tools menu or the icon in the right panel.
Create a new virtual device by selecting the appropriate phone model and Android version. It is recommended to select a system image marked Google Playif your application requires Google services, or a standard image AOSP for pure testing. Make sure you have enough RAM allocated (minimum 2 GB) for smooth operation.
⚠️ Attention: If you get an error related to Hyper-V or VT-x when starting the emulator, check the virtualization settings in your computer's BIOS. Without hardware virtualization enabled, the emulator will not work.
After starting the emulator, select it in the drop-down list of devices in the top panel of the IDE. Press the green button Run (triangle) or use hotkeys. The IDE will build the project, install the APK on the emulator and launch the application.
The first launch may take longer due to compiling the Flutter engine and installing Gradle plugins. Subsequent runs will be much faster thanks to caching. You should see the standard counter application running on the screen of the virtual device.
Debugging and hot reboot
One of the main advantages of developing in Flutter is the function Hot Reload. It allows you to make changes to the source code and see the result on the emulator screen almost instantly, without losing the application state. To do this, click the lightning button in the toolbar or use a keyboard shortcut.
For deeper debugging, use the tool Flutter Inspector. It is built into the panel Debug and allows you to visualize the tree of widgets, view their properties and indents. This is an indispensable tool for designing interfaces and finding reasons why an element is not displayed or has the wrong size.
The output console (window Run) displays application logs. Here you can monitor errors, warnings and displayed messages through the function print(). Filtering logs by severity level helps you quickly find critical errors in the code.
Hot Reload updates only changed files, preserving the state of the application, while Hot Restart completely restarts the application from scratch.
If the application crashes, the IDE will automatically switch to the debug tab and show the call stack. By analyzing the trace, you can determine which line of code the error occurred on. Often problems are related to null safety or incorrect passing of arguments to widgets.
What to do if Hot Reload does not work?
The function may not work if you changed the method main() or global variables. In this case, a full reboot (Hot Restart) is required. Also make sure that the application is running in debug mode and not in release mode.
How to connect a physical Android smartphone?
Enable "Developer Mode" on your phone (by clicking 7 times on the build number in the settings) and activate "USB Debugging". Connect the cable, and the device will appear in the list of available ones in Android Studio.
Where can I find the logs of the crashed application?
The logs are available in the window Run or Debug at the bottom of the IDE. You can also use the command flutter logs in the terminal to view streaming log output from all connected devices.