Flutter y Dart SDK

Complete guide to installation, configuration and environment variable setup

What are Flutter and Dart?

Flutter is an open-source SDK developed by Google for building natively compiled apps for mobile, web and desktop from a single codebase.

Dart is the programming language used by Flutter, optimized for high-performance UI applications.

Installing Flutter SDK

Step 1: Download Flutter SDK

Visit the official Flutter and download the SDK for your operating system.

  • Windows: flutter_windows_3.x.x-stable.zip
  • macOS: flutter_macos_3.x.x-stable.zip
  • Linux: flutter_linux_3.x.x-stable.tar.xz

Step 2: Extract the file

Extract the contents of the downloaded file to a permanent location:

C:\flutter\ (Windows)
/Users/tu_usuario/flutter/ (macOS)
/home/tu_usuario/flutter/ (Linux)

Step 3: Configure environment variables

Add the path of the bin directory of Flutter to your system PATH.

Step 4: Verify installation

Run flutter doctor in the terminal to verify that everything is correct.

Installing Dart SDK

Method 1: With Flutter (Recommended)

The Dart SDK comes bundled with Flutter. You don't need to install it separately.

flutter/bin/cache/dart-sdk/

Method 2: Standalone installation

If you need Dart without Flutter, download it from dart.dev.

Check Dart version

# Check the Dart version bundled with Flutterflutter --version

# Or directly with dartdart --version

Environment Variable Configuration

Why configure the PATH?

By adding the bin directory to the PATH, you can run the flutter and dart commands from anywhere in the terminal.

Important paths to add:

  • Flutter: [path_where_you_extracted_flutter]/flutter/bin
  • Dart: [path_where_you_extracted_flutter]/flutter/bin/cache/dart-sdk/bin

Configuration on Windows

Step 1: Open environment variables

  • Press Windows + R, type sysdm.cpl and press Enter
  • Click "Environment Variables"
  • On "System Variables", look for "Path" and click "Edit"

Step 2: Add paths for Flutter

Click "New" and add the following paths:

Paths for Windows:

C:\flutter\bin
C:\flutter\bin\cache\dart-sdk\bin

Step 3: Verify installation

Open a new terminal and run:

flutter --version
dart --version

Configuration on macOS

Step 1: Edit the profile file

Open Terminal and edit your profile file according to your shell:

For bash (macOS prior to Catalina):

nano ~/.bash_profile

For zsh (macOS Catalina and later):

nano ~/.zshrc

Step 2: Add paths to the PATH

Add these lines to the end of the file:

export PATH="$PATH:/Users/tu_usuario/flutter/bin"
export PATH="$PATH:/Users/tu_usuario/flutter/bin/cache/dart-sdk/bin"

Step 3: Apply changes

# For bashsource ~/.bash_profile

# For zshsource ~/.zshrc

Configuration on Linux

Step 1: Edit the profile file

Open Terminal and edit your profile file:

For most distributions:

nano ~/.bashrc

Step 2: Add paths to the PATH

Add these lines to the end of the file:

export PATH="$PATH:/home/tu_usuario/flutter/bin"
export PATH="$PATH:/home/tu_usuario/flutter/bin/cache/dart-sdk/bin"

Step 3: Apply changes

source ~/.bashrc

Verifying the Installation

Command flutter doctor

Run flutter doctor to verify that everything is configured correctly:

flutter doctor

Expected output:

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.x.x, on macOS 13.0 22A380 darwin-x64, locale es-ES)
[✓] Android toolchain - develop for Android devices
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio
[✓] VS Code
[✓] Connected device
[✓] Network resources

Additional verification commands

# Check Flutterflutter --version

# Check Dartdart --version

# Check Flutter locationwhich flutter

# Check Dart locationwhich dart

Configuration on VS Code

Essential extensions for Flutter

  • Flutter - Official support for Flutter development
  • Dart - Support for the Dart language
  • Awesome Flutter Snippets - Useful snippets
  • Flutter Widget Snippets - Snippets for widgets

Configuration for settings.json

Recommended configuration:

{
    "dart.flutterSdkPath": "/Users/tu_usuario/flutter",
    "dart.checkForSdkUpdates": true,
    "dart.lineLength": 80,
    "flutter.createOrganization": "com.tudominio",
    "dart.debugExternalLibraries": true
}

Common Troubleshooting

Command not found

If when running flutter or dart you get "command not found":

  • Check that the paths in the PATH are correct
  • Make sure you have restarted the terminal
  • On Windows, check that there are no spaces in the paths

Permission issues

On macOS and Linux, you may need to grant execute permissions:

chmod +x flutter/bin/flutter
chmod +x flutter/bin/cache/dart-sdk/bin/dart

flutter doctor shows errors

Common issues and solutions

Android Studio not detected

If flutter doctor doesn't detect Android Studio:

# Specify the Android Studio pathflutter config --android-studio-dir="/Applications/Android Studio.app/Contents"
Android licenses not accepted

To accept the Android licenses:

flutter doctor --android-licenses
Xcode not configured (macOS)

To configure Xcode:

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
Connection issues

If there are issues downloading resources:

# Use China mirror (if needed)export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

# Or force the downloadflutter precache

First Flutter Application Flutter

1. Create a new project

flutter create mi_primer_app
cd mi_primer_app

2. Run the application

flutter run

3. Open in VS Code

code .

4. Build for release

flutter build apk          # Android
flutter build ios          # iOS
flutter build web          # Web
flutter build windows      # Windows

Additional Resources

📚 Official Documentation

🎓 Tutorials

👨‍💻 Community