Mastering Flutter : Setup
Tags: google, gdsc, flutter, beginners
Published: 2023-11-16 12:16:02

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](https://docs.flutter.dev/get-started/install).
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:
    
    ```bash
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`:

    ```bash
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](https://docs.flutter.dev/get-started/install).

## 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:

```bash
flutter create project_name
```

**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:

```bash
flutter run -d chrome
```

**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](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!