🚛Setup & Installation
Flutter is rapidly becoming the go-to solution for developers aiming to create cross-platform applications. If you're looking to dive into the world of Flutter, this guide will walk you through the installation process for macOS, Windows, and Linux.
Installing Flutter on macOS
Download the Flutter SDK for macOS
Navigate to the official Flutter website to secure the latest Flutter macOS zip file.
Once downloaded, extract and position the
flutterfolder in your preferred directory, such as~/development.
Incorporate Flutter into your System Path
To seamlessly run Flutter commands, integrate the
flutter/bindirectory into your system path. Open your terminal and inputexport PATH="$PATH:pwd/flutter/bin".
Initiate a System Check with Flutter Doctor
Launch your terminal and execute
flutter doctorto ensure Flutter's successful integration.
Flutter Installation for Windows
Download the Flutter SDK
Visit the Flutter official website and download the Flutter Windows zip file.
Extract the zip file and place the contained
flutterin the desired installation location for the Flutter SDK (for example,C:\src\flutter).
Update your path
You need to add the
flutter/bindirectory to your system path.Search for "Environment Variables" on your computer, then choose "Edit the system environment variables". Under the "System Properties" window, click on "Environment Variables". In the "System Variables" section, find the
Pathvariable and click on it. Click on "Edit", and then "New", and then paste the path to theflutter/bindirectory.
Verify the Installation
Open a new command prompt and run the command
flutter doctor.
Flutter Installation for Linux
Download the Flutter SDK
Go to the Flutter official website and download the Flutter Linux tarball file.
Extract the tarball file to an appropriate location on your filesystem (for example,
~/development).
Update your path
Add the
flutter/bindirectory to your path.Open your bash profile (
~/.bashrcfor most users) in a text editor and add the following line:export PATH="$PATH:pwd/flutter/bin".
Verify the Installation
Open a new terminal window and run the command
flutter doctor.
Running Your First Flutter App on an Emulator
After successfully installing Flutter, the next step is to set up an IDE and run your Flutter app on an emulator.
Setting Up an IDE
Flutter supports a range of IDEs, but for this tutorial, we'll focus on Visual Studio Code and Android Studio, as they are the most popular and beginner-friendly.
1. Visual Studio Code (VS Code)
Installation
Download and install Visual Studio Code.
Open VS Code and head to the Extensions view by clicking on the square icon on the sidebar or pressing
Ctrl+Shift+X.Search for "Flutter" and install the Flutter extension provided by Dart Code.
2. Android Studio
Installation
Download and install Android Studio.
During installation, ensure the "Android Virtual Device" option is checked.
Once installed, open Android Studio and head to
Configure > Plugins.Search for "Flutter" and install the Flutter plugin. This will also prompt you to install the Dart plugin, which is necessary for Flutter development.
Setting Up an Emulator
1. Using Android Studio
Creating a Virtual Device
Open Android Studio and navigate to
Tools > AVD Manager.Click on "Create Virtual Device" and select a hardware profile for your emulator.
Choose a system image (preferably with Google APIs) and download it.
Finish the setup and click on "Play" to start your emulator.
2. Using VS Code
If you've set up an emulator using Android Studio, VS Code can directly use that. Ensure the emulator is running when you try to launch your Flutter app from VS Code.
Running Your First Flutter App
Create a New Flutter App
In Android Studio:
File > New Flutter Project > Flutter Application.In VS Code: Open the command palette (
Ctrl+Shift+P), and runFlutter: New Project.
Run the App
In Android Studio: Click on the green play button.
In VS Code: With the main Dart file open (
main.dart), click onRun > Start Debugging.
Your Flutter app should now launch on the emulator. You'll see a default app with a clickable "+" button that increments a counter.
Final Thoughts
With Flutter and your chosen IDE set up, you're now equipped to start building beautiful cross-platform apps. As you progress, remember that the official Flutter documentation is a treasure trove of information.
Happy coding!
Last updated
Was this helpful?