Flutter is a powerful framework for building cross-platform applications. To get started, you need to set up the Flutter environment and configure your code editor. This guide provides a step-by-step walkthrough for setting up Flutter and installing VS Code.
Step 1: Install Flutter
- Download Flutter
- Visit the official Flutter website: https://flutter.dev
- Download the Flutter SDK for your operating system (Windows, macOS, or Linux).
- Extract the Flutter SDK
- Extract the downloaded zip file to a location on your system (e.g.,
C:\flutter
on Windows or~/flutter
on macOS/Linux).
- Extract the downloaded zip file to a location on your system (e.g.,
- Add Flutter to PATH
- Add the Flutter
bin
directory to your system’s PATH:- Windows:
- Search for “Environment Variables” in the Start menu.
- Edit the
PATH
variable to includeC:\flutter\bin
.
- macOS/Linux:
- Open a terminal and edit the
~/.zshrc
,~/.bashrc
, or~/.bash_profile
file (depending on your shell):export PATH="$PATH:~/flutter/bin"
- Save the file and run
source ~/.zshrc
(or the relevant file).
- Open a terminal and edit the
- Windows:
- Add the Flutter
- Verify Installation
- Open a terminal or command prompt and run:
flutter doctor
- This command checks your environment and displays any missing dependencies.
- Open a terminal or command prompt and run:
Step 2: Install Visual Studio Code (VS Code)
- Download VS Code
- Visit the official VS Code website: https://code.visualstudio.com
- Download and install the appropriate version for your operating system.
- Install Flutter and Dart Extensions
- Open VS Code.
- Go to the Extensions view by clicking the Extensions icon in the Activity Bar or pressing
Ctrl+Shift+X
(Cmd+Shift+X
on macOS). - Search for
Flutter
and install the Flutter extension. The Dart extension will be installed automatically as a dependency.
- Configure Flutter in VS Code
- Open the Command Palette (
Ctrl+Shift+P
orCmd+Shift+P
on macOS) and run theFlutter: New Project
command to verify that Flutter is correctly configured.
- Open the Command Palette (
Step 3: Install Additional Tools
- Install an Emulator (Optional)
- If you want to use an Android Emulator:
- Install Android Studio from https://developer.android.com/studio.
- During installation, select the option to install the Android Virtual Device (AVD).
- Open Android Studio, go to
Preferences
>Appearance & Behavior
>System Settings
>Android SDK
and install the required SDKs and tools.
- If you want to use an Android Emulator:
- Set Up a Device
- Connect a physical device via USB and enable USB debugging.
- Alternatively, use an emulator.
Step 4: Create Your First Flutter Project
- Open VS Code.
- Open the Command Palette (
Ctrl+Shift+P
orCmd+Shift+P
) and selectFlutter: New Project
. - Choose a project name and location.
- Open the project folder and run the application:
- Press
F5
to start debugging. - Select a target device (physical or emulator) if prompted.
- Press
Step 5: Test the Installation
- Ensure your Flutter setup is working by running the default counter app.
- Check the console for any errors and verify the app launches successfully.
Congratulations! You have successfully set up Flutter and VS Code for development. You’re now ready to start building Flutter apps!