Flutter University
  • πŸ‘‹Welcome to Flutter University
  • Learn Flutter
    • πŸš—Basics
      • 🧺Dart Basics
      • πŸš›Setup & Installation
      • 🐣Hello Flutter
      • πŸŒ‰Widgets
      • ⛸️Basic State Management
      • πŸ‡ΎπŸ‡ΉBasic Layout and Styling
      • 🐝Basic Interactivity
      • πŸ›£οΈNavigation
      • πŸͺ„Working with Assets
    • πŸš…Intermediate
      • 🎯Deeper into Dart
      • ⭐More on State Management
      • πŸ“ƒForm Handling
      • πŸ—ΌNetworking
      • πŸŽ‡Persistence
      • πŸ§™β€β™‚οΈAnimations
      • πŸ§ͺTesting
      • πŸ“¦Package Management
    • ✈️Professional
      • πŸŽ“Advanced Animations
      • 🎨Custom Painters
      • 🐼Continuous Integration/Continuous Deployment (CI/CD)
      • 🎭Performance Profiling
      • πŸ”¬Native Integrations
      • 🌍Accessibility and Localization
      • 🀘Understanding Design Patterns
      • πŸ“šFlutter Architecture
        • The Layer Model
        • Reactive User Interfaces
        • Flutter Widgets
        • The Rendering Process
        • Platform Embedders Overview
        • Integrating with Other Code
        • Support for the Web
  • Tutorials
    • 🌈UI
      • 🏚️Clubhouse Clone
      • πŸ”‰Netflix Clone
    • βš”οΈFull Stack
    • ⛓️Blockchain
    • πŸ€–AI/ML
  • Miscellaneous
    • πŸ–₯️100 Days of Flutter
    • 🎨Join Community
Powered by GitBook
On this page
  • Running Your First Flutter App on an Emulator
  • Setting Up an IDE
  • Setting Up an Emulator
  • Running Your First Flutter App
  • Final Thoughts

Was this helpful?

  1. Learn Flutter
  2. Basics

Setup & Installation

Last updated 1 year ago

Was this helpful?

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

  1. Download the Flutter SDK for macOS

    • Navigate to the official to secure the latest Flutter macOS zip file.

    • Once downloaded, extract and position the flutter folder in your preferred directory, such as ~/development.

  2. Incorporate Flutter into your System Path

    • To seamlessly run Flutter commands, integrate the flutter/bin directory into your system path. Open your terminal and input export PATH="$PATH:pwd/flutter/bin".

  3. Initiate a System Check with Flutter Doctor

    • Launch your terminal and execute flutter doctor to ensure Flutter's successful integration.

Flutter Installation for Windows

  1. Download the Flutter SDK

    • Visit the and download the Flutter Windows zip file.

    • Extract the zip file and place the contained flutter in the desired installation location for the Flutter SDK (for example, C:\src\flutter).

  2. Update your path

    • You need to add the flutter/bin directory 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 Path variable and click on it. Click on "Edit", and then "New", and then paste the path to the flutter/bin directory.

  3. Verify the Installation

    • Open a new command prompt and run the command flutter doctor.

Flutter Installation for Linux

  1. Download the Flutter SDK

    • Extract the tarball file to an appropriate location on your filesystem (for example, ~/development).

  2. Update your path

    • Add the flutter/bin directory to your path.

    • Open your bash profile (~/.bashrc for most users) in a text editor and add the following line: export PATH="$PATH:pwd/flutter/bin".

  3. 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

    • 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

    • 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

  1. 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 run Flutter: New Project.

  2. Run the App

    • In Android Studio: Click on the green play button.

    • In VS Code: With the main Dart file open (main.dart), click on Run > 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

Happy coding!

Go to the and download the Flutter Linux tarball file.

Download and install .

Download and install .

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 is a treasure trove of information.

πŸš—
πŸš›
Flutter website
Flutter official website
Flutter official website
Visual Studio Code
Android Studio
official Flutter documentation