Getting Started with Flutter: Installation and Setup

Flutter is Google’s UI toolkit for crafting beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. Whether you’re a seasoned developer or just starting your programming journey, Flutter offers an expressive, flexible framework that makes development both efficient and enjoyable.

In this first post of our 30-day Flutter series, we’ll walk through the complete setup process to get your development environment ready for Flutter magic.

What is Flutter?

Before diving into installation, let’s briefly understand what Flutter is and why it’s gaining such popularity:

• Cross-platform: Write code once and deploy to iOS, Android, web, and desktop platforms
• Fast development: Hot reload feature lets you see changes instantly without restarting your app
• Expressive UI: Rich set of customizable widgets for building native-like interfaces
• Native performance: Compiles to native ARM code, ensuring high performance

System Requirements

Flutter runs on Windows, macOS, and Linux. Here are the minimum system requirements:

• Operating System: Windows 10 or later (64-bit), macOS 10.15 or later, Linux (64-bit)
• Disk Space: At least 2.5 GB (excluding IDE/tools)
• Tools: Git for Windows (or Git for other platforms)

Step 1: Download the Flutter SDK

First, download the Flutter SDK from the official Flutter website:

1. Visit flutter.dev/docs/get-started/install
2. Select your operating system
3. Download the latest stable version

For Windows:

Extract the ZIP file to a desired location on your computer (e.g., C:\src\flutter). Avoid installing Flutter in directories that require elevated privileges (like C:\Program Files\).

For macOS:

cd ~/development
unzip ~/Downloads/flutter_macos_3.19.0-stable.zip

For Linux:

cd ~/development
tar xf ~/Downloads/flutter_linux_3.19.0-stable.tar.xz

Step 2: Update Your PATH

To run Flutter commands in your terminal, you need to add Flutter to your PATH:

For Windows:

1. Search for “Environment Variables” in your Start menu
2. Click “Edit environment variables for your account”
3. Under “User variables,” find the “Path” variable and click “Edit”
4. Click “New” and add the full path to the flutter\bin directory
5. Click “OK” to save changes

For macOS/Linux:

Open your shell’s RC file (.bashrc, .zshrc, etc.) and add:

export PATH="$PATH:`pwd`/flutter/bin"

Then run source ~/.bashrc (or your specific RC file) to refresh the current window.

Step 3: Verify the Installation

Open a new terminal/command prompt and run:

flutter --version

You should see output showing the Flutter version, channel, and other details.

Step 4: Run Flutter Doctor

Flutter provides a convenient tool to check if your environment is set up correctly:

flutter doctor

This command checks your environment and displays a report of the status of your Flutter installation. It will identify any issues and provide instructions on how to resolve them.

Step 5: Install an IDE

While you can use any text editor with Flutter, the development experience is significantly better with a supported IDE. The two most popular options are:

Visual Studio Code:

1. Download and install VS Code
2. Launch VS Code
3. Go to Extensions (or press Ctrl+Shift+X / Cmd+Shift+X)
4. Search for “Flutter” and install the official Flutter extension

Android Studio / IntelliJ:

1. Download and install Android Studio
2. Launch Android Studio
3. Go to Preferences > Plugins
4. Search for “Flutter” and install the plugin
5. Restart Android Studio

Step 6: Set Up Your Device

To run and test your Flutter apps, you’ll need either a physical device or an emulator/simulator:

Android:

For physical devices:

1. Enable “Developer options” and “USB debugging” on your device
2. Connect your device to your computer with a USB cable
3. Run flutter devices to verify your device is recognized

For emulator:

1. Launch Android Studio
2. Go to Tools > AVD Manager
3. Click “Create Virtual Device” and follow the instructions
4. Once created, launch the emulator

iOS (macOS only):

For physical devices:

1. Install Xcode from the Mac App Store
2. Set up your device for development in Xcode
3. Connect your device to your Mac
4. Trust your Mac on the device when prompted

For simulator:

1. Install Xcode
2. Run open -a Simulator from the terminal to launch the iOS Simulator

Step 7: Create Your First Flutter App

Now let’s create and run a simple Flutter app to verify everything is working correctly:

flutter create my_first_app
cd my_first_app
flutter run

You should see the default Flutter counter app running on your device or simulator!

Common Issues and Troubleshooting

Android SDK Location Not Found

If Flutter doctor can’t find your Android SDK, set the ANDROID_SDK_ROOT environment variable:

export ANDROID_SDK_ROOT="path/to/your/android/sdk"

Xcode Issues (macOS)

If you encounter Xcode-related issues, make sure you’ve accepted the license agreements:

sudo xcodebuild -license accept

Gradle Issues on Android

If you see Gradle errors, try running:

flutter clean
flutter pub get

Conclusion

Congratulations! You’ve successfully set up your Flutter development environment. In the next post, we’ll dive into Dart – the programming language that powers Flutter. We’ll explore its syntax, features, and how it enhances your Flutter development experience.

Ready to take your installation to the next level? Try modifying the default counter app to display your name or a custom message instead of the counter value. This simple exercise will help you get familiar with the Flutter project structure.

Happy coding!