DEV Community

Cover image for Mastering Flutter : Setup
Shaurya Sharma
Shaurya Sharma

Posted on

Mastering Flutter : Setup

Flutter is a cross-platform app development framework. In this post, we will do a basic setup for Flutter development in Windows and macOS.

Prerequisites

Before we dive into the installation process, make sure you have the following prerequisites:

  1. A computer
  2. git
  3. Google Chrome
  4. VSCode

Installing Flutter

First, let's download and install the Flutter SDK by following these steps:

  1. Visit the official Flutter documentation at docs.flutter.dev.
  2. Select your operating system (Windows or macOS) from the provided options.
  3. Follow the installation instructions until you reach the point where you are instructed to run the flutter doctor command.

Windows Setup

Once you've downloaded Flutter, ensure that your Flutter path is correctly configured. Here are the steps to set up Flutter on Windows:

  1. Open a console window within the Flutter directory.
  2. Run the following command:

    flutter doctor
    
  3. Verify that the response includes the following entries:

    • [✓] Flutter
    • [✓] Chrome - develop for the web
    • [✓] VS Code

macOS Setup

For macOS users, it's essential to select the appropriate SDK for your Mac (Intel or Apple Silicon) during installation. Follow these additional steps after unzipping the Flutter package:

  1. Place the Flutter directory in a preferred location, such as /your_username/Developer.

  2. Open the Terminal and execute the following commands to add the Flutter path to your environment variables:

    vi ~/.bash_profile
    

    This will open your bash_profile in the VIM text editor. If you encounter difficulties using VIM, refer to online resources for assistance.

  3. Press 'i' to enter insert mode, then add the following line inside your bash_profile:

    export PATH="$PATH:/Users/your_username/Developer/flutter/bin"
    

    Be sure to replace "your_username" with your actual username and adjust the path accordingly if you placed the Flutter directory elsewhere.

  4. After adding the path variable, press the ESC key and then type Shift-z-z to save and exit.

  5. In Terminal, run the following command to verify your setup:

    flutter doctor
    
  6. Ensure that the response includes the following entries:

  • [✓] Flutter
  • [✓] Chrome - develop for the web
  • [✓] VS Code

Platform Setup

Congratulations! You have successfully set up Flutter for web development. If you intend to develop for other platforms, you can find detailed instructions in the official Flutter documentation here.

VSCode Extensions

To enhance your Flutter development experience in VSCode, install the following extensions:

  1. Flutter
  2. Dart
  3. Awesome Flutter Snippets (optional)

After installing these extensions, restart VSCode for the changes to take effect.

Running Your First Flutter Web App

Now that you have Flutter configured, it's time to create and run your first web app:

Creating a Flutter Project

You can create a Flutter project using either the terminal or VSCode:

via Terminal:

Navigate to the directory where you want to create the project and run:

flutter create project_name
Enter fullscreen mode Exit fullscreen mode

via VSCode:

  1. Open the command palette in VSCode (Mac: Cmd + Shift + P, Windows: Ctrl + Shift + P).
  2. Search and select "Flutter: New Project."

Running the App

Once your project is created, you can run your web app as follows:

via Terminal:

Navigate to your project folder and execute the following command to launch the development server:

flutter run -d chrome
Enter fullscreen mode Exit fullscreen mode

via VSCode:

Go to any Dart file in your project, click on the debug option, and run it from the top-right corner of VSCode.

Your Flutter web app will be accessible through a web browser by opening the following URL: http://localhost:5000 (note that the port may be different).

Conclusion

Congratulations! You've successfully set up Flutter for web development on both Windows and macOS. With Flutter's power and flexibility, you're now ready to create cross-platform web applications that provide exceptional user experiences. Dive into the Flutter documentation, explore different widgets, and embark on your web development journey. If you have any questions or thoughts, please share them in the comments below.

Happy Fluttering!

Top comments (0)