Prerequisites
Setting up your environment for Flutter development is straightforward, but before you begin, make sure you meet the following prerequisites:
Operating System Compatibility
Flutter supports several operating systems for development. Whether you’re using Windows, macOS, or Linux, you can develop apps with Flutter.
However, specific versions of these operating systems are supported:
- Windows: Windows 7 SP1 or later (64-bit), x86-64 based.
- macOS: macOS (64-bit).
- Linux: Most distributions are supported.
Hardware Requirements
To run Flutter and the associated Android or iOS emulators smoothly, your development machine should meet specific hardware criteria:
- Disk Space: A minimum of 64 GB of free disk space is required for the Flutter SDK and its dependencies, though more is recommended for your projects.
- Tools: For Windows and Linux, you’ll need Git for Windows or Git for Linux to clone the Flutter repo. macOS users will have Git pre-installed.
- Processor and Memory: While Flutter can run on most modern CPUs, a decent processor and at least 4GB of RAM are recommended for a smooth experience, especially when using emulators.
Software Dependencies
Flutter relies on a few software dependencies to work correctly:
- Flutter SDK: The core of Flutter development, containing the Flutter engine, framework, and tools.
- Android Studio or Visual Studio Code: Though you can use any text editor, Android Studio and Visual Studio Code offer excellent Flutter plugin support for a more integrated experience.
- Dart Plugin: Required for code analysis, completion, and other features.
- Flutter Plugin: Adds Flutter-specific functionality to your IDE.
Knowledge Requirements
While prior programming experience is not strictly necessary to start learning Flutter, familiarity with object-oriented programming languages like Java, C#, or similar is beneficial. Understanding basic programming concepts such as variables, loops, and conditionals will help you quickly grasp Flutter concepts.
Downloading Flutter SDK
Windows
Minimum System Requirements
- OS: Windows 7 10 (64-bit), x86-64 based.
- Disk Space:64 GB (does not include disk space for IDE/tools).
- Tools: Git for Windows 2.x, with the Use Git from the Windows Command Prompt option.
Steps
- Visit the official Flutter website and navigate to the Windows install section.
- Download the latest stable release of the Flutter SDK as a zip file.
- Extract the zip file to a desired location on your system (e.g., C:\src\flutter; avoid using directories like C:\Program Files that require elevated permissions).
- Update your system’s PATH environment variable to include the path to Flutter’s bin directory.
- Verify the installation by opening a command prompt and running flutter doctor.
macOS
Minimum System Requirements
- OS: macOS (64-bit).
- Disk Space:8 GB (does not include disk space for IDE/tools).
- Tools: Git for macOS and bash; these tools typically come pre-installed.
Steps
- Visit the official Flutter website and find the macOS install section.
- Download the latest stable Flutter SDK release for macOS as a zip file.
- Extract the file to your desired location (e.g., ~/development/flutter).
- Open a terminal window and add Flutter to your PATH environment variable.
- Run flutter doctor in the terminal to check for any dependencies you need to install to complete the setup.
$ flutter doctor |
Linux
Minimum System Requirements
- OS: Linux (64-bit).
- Disk Space:64 GB (does not include disk space for IDE/tools).
- Tools: Git for Linux, bash, mkdir, rm, unzip, which, xz-utils, and curl.
Steps
- Go to the official Flutter website and locate the Linux install section.
- Download the latest stable version of the Flutter SDK for Linux.
- Extract the SDK to a preferred location (e.g., ~/development/flutter).
- Add Flutter’s bin directory to your PATH environment variable.
- In the terminal, run flutter doctor to check your environment and see if any additional dependencies are required.
$ flutter doctor |
Updating Your Path
Windows
- Search for ‘Environment Variables‘ in your Start menu and select “Edit the system environment variables.”
- In the System Properties window, click on the “Environment Variables” button.
- Under “System Variables,” scroll and find the “Path” variable, then click “Edit.”
- In the “Edit Environment Variable” window, click “New” and add the full path to the Flutter bin directory. This is the directory inside your Flutter installation folder (e.g., C:\src\flutter\bin).
- Click “OK” to close each window.
- To verify the addition, open a new command prompt and enter flutter –version. If Flutter is correctly added to your PATH, you should see the Flutter version displayed.
macOS and Linux
The process for macOS and Linux involves editing your shell’s profile script.
- Open a terminal.
- Determine which shell you are using by running echo $SHELL.
- Based on your shell (e.g., bash or zsh), edit the appropriate profile file (.bash_profile, .bashrc, .zshrc, etc.) in your home directory. You can use a text editor like nano (e.g., nano ~/.bash_profile for bash).
- Add the export command to the end of the file. For example, if you installed Flutter to ~/development/flutter, add the following line:
export PATH=”$PATH:`pwd`/flutter/bin”
Note: If you’re using Linux and the above command doesn’t work, try replacing `pwd` with the actual path to your Flutter directory, so it looks like:
export PATH=”$PATH:/home/username/development/flutter/bin”
5. Save the file and close the editor.
6. To make the changes take effect, run source ~/<profile file> (e.g., source ~/.bash_profile).
7. Verify the setup by typing flutter –version in the terminal. You should see the installed Flutter version.
Flutter SDK Setup
Once you’ve installed Flutter and updated your PATH, the next step is to finalize your Flutter SDK setup. This will make sure that all components of the Flutter SDK are correctly installed and configured.
Flutter provides a helpful command, flutter doctor, which checks your environment and displays a report to the terminal window about the status of your Flutter installation.
Here’s how to run it and interpret its output.
Running flutter doctor
- Open a command prompt on Windows or a terminal on macOS and Linux.
- Type flutter doctor and press Enter. The command audits your environment and displays a report in the terminal window.
$ flutter doctor
The output from flutter doctor checks for several things:
- Flutter SDK Version: Confirms the currently installed version of Flutter.
- Android toolchain: Verifies the installation of Android Studio, Android SDK, and platform tools required for developing Flutter apps for Android.
- iOS toolchain: (macOS only) Checks for Xcode, Xcode command-line tools, and iOS simulator availability for iOS development.
- Chrome: Confirms the availability of Chrome for running web applications.
- Connected Device: Lists any connected devices or running emulators/simulators.
Interpreting the Output
- A checkmark (✓) indicates that a check passed successfully.
- An exclamation mark (!) highlights warnings, such as missing optional components or recommendations for improving your setup.
- A cross (✗) indicates a problem that needs to be resolved for Flutter to function correctly.
If any issues are detected (marked with ✗), the flutter doctor often provides instructions on how to address them. This may involve installing missing software, accepting license agreements, or configuring your environment further.
Common Fixes Based on flutter doctor Output
- Android Studio Not Found: Ensure Android Studio is installed and correctly detected. You should set the ANDROID_HOME environment variable or use the Flutter config command to set the Android SDK path.
- Xcode Not Found: (macOS only) Make sure Xcode is installed, and you’ve run it at least once to install additional components. Also, set the command-line tools in Xcode
- No Connected Devices: Start an emulator or connect a physical device to your computer. For Android, you can manage emulators via Android Studio’s AVD Manager. For iOS, use the Simulator app available within Xcode.
Running a flutter doctor is a good practice whenever you encounter issues during Flutter development, as it can quickly diagnose common problems. Successfully addressing all issues reported by flutter doctor means your development environment is correctly set up, and you’re ready to start creating Flutter apps.
Setting Up the Android Emulator
Installing Android Studio
1. Download Android Studio: Go to the official Android Studio website and download the installer for your operating system (Windows, macOS, or Linux).
2. Run the Installer:
- Windows: Launch the downloaded .exe file and follow the installation prompts. Ensure the boxes for Android SDK, Android SDK Platform, and Android Virtual Device are checked.
- macOS: Open the downloaded .dmg file, drag and drop Android Studio into the Applications folder, and follow the setup wizard.
- Linux: Unpack the .zip file you downloaded to your preferred location and execute the studio.sh script found in the android-studio/bin/ directory to start the setup wizard.
3. Follow Setup Wizard: Upon first launching Android Studio, the setup wizard will guide you through the initial setup, including downloading the Android SDK components. Make sure to accept the licenses for the Android SDK.
Creating a Virtual Device
- Open the AVD Manager: Navigate to Tools > AVD Manager in Android Studio. The Android Virtual Device (AVD) Manager is where you can create and manage your virtual devices.
- Create a New Virtual Device: Click on the “Create Virtual Device” button. Choose a device definition that matches the type of device you want to simulate (e.g., Pixel 4). Then click “Next.”
- Select a System Image: You’ll need to download a system image for the emulator. Pick an image with the API level you wish to test against (it’s a good idea to test against the minimum version your app supports). If you haven’t downloaded a system image yet, click the “Download” link next to the system image you want to use. After downloading, select the image and click “Next.”
- Configure the Virtual Device: Give your AVD a name, and adjust any settings, such as the orientation, scale, or hardware profile. Once configured to your liking, click “Finish.”
- Launch Your Virtual Device: Back in the AVD Manager, you’ll see your newly created virtual device listed. Click the green play button under the “Actions” column to start the emulator.
Setting Up the iOS Simulator (macOS only)
For Flutter developers using macOS, setting up the iOS Simulator is an essential part of the development process, allowing you to test your applications on different versions of iOS and various Apple devices without needing physical hardware. This setup requires installing Xcode, which includes the iOS Simulator.
Installing Xcode
- Download Xcode: Open the App Store on your Mac, search for Xcode, and click “Install.” Xcode is Apple’s Integrated Development Environment (IDE) for macOS, containing a suite of software development tools for developing software for macOS, iOS, watchOS, and tvOS.
- Accept the License Agreement: Launch Xcode from your Applications folder after installation. You may be prompted to accept the license agreement and install additional components. Enter your Mac’s password if required and allow the installation to complete.
- Configure Command Line Tools: Open Xcode, navigate to Xcode > Preferences > Locations tab, and in the “Command Line Tools” dropdown, select the Xcode version you wish to use. This step is essential for using command-line tools and the iOS Simulator.
Using the iOS Simulator
- Launch the Simulator: You can start the iOS Simulator directly from Xcode by navigating to Xcode > Open Developer Tool > Simulator. Alternatively, once you’ve run a Flutter app via the command line or your IDE, the iOS Simulator will automatically launch.
- Choose Your Device: The iOS Simulator starts with a default device. To change the device, go to Hardware > Device in the Simulator to select a different model or iOS version. You can download additional system images if needed.
- Running Your Flutter App: With the Simulator running, you can execute your Flutter app from your terminal or IDE. Use the command flutter run within your Flutter project directory to build and run your app on the Simulator.
The iOS Simulator is a powerful tool for Flutter development on macOS, offering a convenient and cost-effective way to test the appearance and performance of your applications across Apple’s ecosystem.
Editor Setup
Visual Studio Code
Visual Studio Code (VS Code) is a lightweight but powerful source code editor supporting Flutter development with features like IntelliSense code completion and debugging.
- Install Visual Studio Code: Download and install VS Code from the official website.
- Install the Flutter and Dart Plugins: Launch VS Code, and go to Extensions (View > Extensions). Search for “Flutter” and install the Flutter extension. This extension automatically installs the Dart plugin as well.
- Configure VS Code for Flutter Development: Once installed, open the command palette (View > Command Palette) and type “Flutter” to see available actions. You can create new projects and run and debug Flutter applications directly from VS Code.
Android Studio
Android Studio provides a more integrated environment for Flutter development, especially for Android-specific tasks.
- Install Android Studio: If not already installed, download and install Android Studio from the official website.
- Install the Flutter and Dart Plugins: Open Android Studio, go to Preferences (File > Settings on Windows/Linux), navigate to Plugins, and search for “Flutter.” Install the Flutter plugin and restart Android Studio. This plugin should prompt you to install the Dart plugin if it’s not already installed.
- Configure Android Studio for Flutter Development: With the plugins installed, you can create new Flutter projects run, and debug your applications with the full suite of Android Studio’s development tools.
Creating and Running a Test Flutter App
Creating a New Flutter Project
1. Via Command Line
- Open a terminal (macOS/Linux) or command prompt (Windows).
- Navigate to the directory where you want to create your Flutter project.
- Run the command: flutter create my_flutter_app. Replace my_flutter_app with your desired project name. This command creates a new Flutter project with a default sample app.
- Navigate into your project directory with cd my_flutter_app.
2. Via Android Studio
- Open Android Studio and select “Start a new Flutter project.”
- Choose “Flutter Application” as the project type and click “Next.”
- Enter your desired project name, and specify the Flutter SDK path (if not auto-detected). Click “Next.”
- Confirm the package name, and click “Finish.” Android Studio will generate a new Flutter project with a sample app.
3. Via Visual Studio Code
- Open Visual Studio Code and go to the Explorer view.
- Click on the “View” menu and select “Command Palette.”
- Type “Flutter” and select “Flutter: New Project.” Follow the prompts to enter your project name and select a project location.
Running Your Flutter App
1. On a Connected Device or Emulator/Simulator
- Make sure your chosen device or emulator/simulator is running and detected by your system.
- Via Command Line: Run flutter run with your project directory as the current directory. This command compiles your app and launches it on the connected device or emulator/simulator.
- Via Android Studio: Click the ‘Run’ button (green triangle) or select ‘Run > Run‘ from the menu. Choose your target device from the dropdown list.
- Via Visual Studio Code: Open the command palette and select “Flutter: Launch Emulator.” Then, use the Debug panel to start your app by clicking the “Run” button.
2. Hot Reload
- As your app is running, you can make changes to the code. Flutter’s Hot Reload feature allows you to see the changes almost instantly without restarting the app. In Android Studio or Visual Studio Code, save your changes, and the app will automatically update. Alternatively, in the command line, press “r” to hot reload changes.
3. View Your App
- Your app, which displays a simple counter, should now be running on your device or emulator/simulator. You can interact with it by pressing the floating action button to increment the counter.
Troubleshooting Common Setup Issues
1. Flutter SDK Not Found
- Problem: The system does not recognize flutter commands.
- Solution: Ensure that you’ve added the Flutter SDK’s bin directory to your system’s PATH environment variable. Verify by opening a new terminal or command prompt window and typing flutter –version. If it doesn’t work, review the steps for updating your PATH and restart your terminal or computer.
2. Android License Status Unknown
- Problem: Running flutter doctor shows that Android licenses are not accepted.
- Solution: Run flutter doctor –android-licenses and accept the licenses by pressing ‘y’ when prompted. This issue often occurs after installing the Android SDK but not accepting the license agreements.
3. No Connected Devices
- Problem: Flutter does not detect a device to run the app on.
- Solutions:
- For Emulators/Simulators: Ensure your emulator or simulator is running before executing a flutter run. For Android, you can manage and start emulators from Android Studio’s AVD Manager. For iOS, start the Simulator from Xcode.
- For Physical Devices: Check that your device is connected via USB and that USB debugging is enabled (Android) or that your device is trusted (iOS). For Android devices, you might also need to install specific drivers for your device.
4. iOS Simulator Not Starting
- Problem: (macOS only) The iOS Simulator does not launch, or the build fails.
- Solutions:
- Ensure Xcode and command-line tools are correctly installed and that you’ve agreed to the Xcode license by running sudo xcodebuild -license in the terminal.
- Open Xcode > Preferences > Locations and check that the command-line tools option is set.
5. Android Studio Not Detected by Flutter
- Problem: Flutter does not recognize Android Studio, affecting the ability to run Android emulators.
- Solution: Make sure Android Studio is correctly installed and, if necessary, manually configure the Android Studio path using flutter config –android-studio-dir “<path-to-your-android-studio-location>”.
6. Dart SDK Not Found
- Problem: Errors indicate that the Dart SDK is not found, even though Flutter’s SDK includes Dart.
- Solution: This issue usually indicates a problem with the Flutter SDK installation or PATH configuration. Verify that the Flutter SDK path is correctly added to your PATH environment variable and that the SDK is correctly installed by running flutter doctor.
7. Flutter Doctor Shows Issues After All Fixes
- Problem: flutter doctor still reports problems after following suggested fixes.
- Solution: Some issues might be informational and not critical to development. For unresolved problems, refer to the Flutter community forums, Stack Overflow, or the official Flutter GitHub page for specific error messages and advanced troubleshooting.
