Table of Contents
🚀 Welcome to Episode 3 of the Zero to Hero in Flutter series!
Now that we have Flutter installed on Windows and macOS, it’s time to set up our development environment, configure emulators, and run our first Flutter app!
By the end of this article, you’ll have:
✅ Android Studio & VS Code set up for Flutter development
✅ Emulator or real device connected for testing
✅ Your first Flutter app running on your device
Choosing Your IDE: Android Studio vs. VS Code
You can use Android Studio or Visual Studio Code (VS Code) to develop Flutter apps. Here’s a quick comparison
For beginners, Android Studio is recommended because it provides a complete Flutter development environment with an integrated Android Emulator. However, VS Code is a great choice for lightweight development.
Setting Up Android Studio for Flutter
Step 1: Install Android Studio
Download Android Studio from the official website:
👉 Android Studio DownloadInstall Android Studio and launch it.
Follow the Setup Wizard to install the required SDKs and tools.
Step 2: Install Flutter & Dart Plugins
Open Android Studio.
Navigate to Settings/Preferences → Plugins.
Search for Flutter and click Install.
It will prompt you to install Dart (required for Flutter). Click OK.
Restart Android Studio.
Setting Up VS Code for Flutter
Step 1: Install VS Code
Download VS Code from:
👉 VS Code DownloadInstall and launch VS Code.
Step 2: Install Flutter & Dart Extensions
Open VS Code.
Go to the Extensions Marketplace (Ctrl + Shift + X).
Search for Flutter and click Install.
Search for Dart and click Install.
Configuring Emulators & Devices
Option 1: Using an Android Emulator
Step 1: Create an Emulator in Android Studio
Open Android Studio.
Go to AVD Manager (Tools → Device Manager).
Click Create Virtual Device.
Choose a Pixel device (recommended).
Select the latest Android version (API 33 or higher).
Click Finish and start the emulator.
✅ Now, your emulator is ready to run Flutter apps!
Option 2: Using a Physical Android Device
Step 1: Enable Developer Mode & USB Debugging
Open Settings on your Android device.
Go to About Phone → Tap Build Number 7 times to enable Developer Mode.
In Developer Options, enable USB Debugging.
Connect your phone via USB.
Step 2: Verify Device Connection
Run the following command in Command Prompt (Windows) or Terminal (macOS):
flutter devices
If your device appears in the list, you’re ready to go! 🎉
Writing & Running Your First Flutter App
Step 1: Create a New Flutter Project
Run the following command in a terminal:
flutter create my_first_app
Navigate to the project folder:
cd my_first_app
Step 2: Open the Project in Your IDE
In Android Studio: Click Open → Select my_first_app folder. Wait for dependencies to load.
In VS Code: Click File → Open Folder → Select my_first_app
Step 3: Run the Flutter App
Run the following command in the terminal:
flutter run
OR
Click the Run button in Android Studio or VS Code.
Your first Flutter app should now be running on the emulator or real device!
Understanding the Default Flutter App Structure
When you create a new Flutter project, you’ll see these important files:
📁 lib/main.dart → The main entry point of your Flutter app.
📁 pubspec.yaml → Configuration file for dependencies & assets.
📁 android/ → Android-specific code.
📁 ios/ → iOS-specific code.
📁 test/ → Unit test files.
Common Errors & Fixes
❌ Flutter command not found?
✅ Make sure Flutter is added to PATH (flutter doctor).
❌ Emulator not starting?
✅ Check if HAXM (Intel Virtualization) is enabled in BIOS.
❌ Device not detected?
✅ Run flutter doctor to check if USB debugging is enabled.
Conclusion
You have now successfully: ✅ Set up Android Studio & VS Code for Flutter development
✅ Configured an Android Emulator or Physical Device
✅ Created and ran your first Flutter app
🎉 Congratulations! You’re now ready to start building Flutter apps! 🚀
📌 Next Episode: Understanding Flutter Widgets & UI Components!