WIP - Flutter Setup

Owned by Karthigan Uthayan
Last updated: 2023-11-19
4 min read

Overview

This is a setup for any Flutter project on a Windows 10/11 device, and is what we will be using to setup IMACS. You only have to go through the setup once. Anything that you need to download can be found in the References section. Make sure Git is properly setup

Setting up Flutter

  1. Install Flutter if you do not have it installed. You can also refer to the link for further guidance

  2. When unzipping, Do not keep the version number as Flutter has an automatic update feature. When you extract the files, make sure you do so into a directory where there are NO spaces

  3. Add flutter to path [flutter unzip location]/flutter/bin

  4. Disable analytics by running the following in any terminal

    • flutter config --no-analytics

    • dart --disable-analytics.

  5. In VS Code:

    • Go to settings: Ctrl+, OR File→Preferences→Settings

    • Search for telemetry

    • Set to off

  6. Run flutter doctor. This command gives you a list of dependencies flutter requries before you can properly run your app. If you already have all the dependencies, you should see something like this in your terminal. If not, please follow the associated links the command gives you to set them up, or refer to the documentation below.

Successful flutter doctor return

Android Studio and Android Toolchain setup

One of the flutter dependencies you may not have on your machine is Android Studio or the Android Studio Toolchain. If the steps presented with flutter doctor do not work for you, please follow the steps below

  1. Download Android Studio. Make sure you know the file path (note it down somewhere)

  2. Open the android studio.exe you just downloaded. Follow the setup guide and accept any terms/conditions necessary 

  3. Open Android Studio. It should look like the photo below. Click on the More Actions drop down and select SDK manager.

Android Studio Homepage

  1. Click SDK tools and checkmark the following boxes to install them.

    • Android SDK Build-Tools

    • Android SDK Command line Tools (latest) 

    • Android Emulator

    • Android emulator hypervisor driver (installer)

    • Android SDK Platform tools

  1. Once they are installed, add the following variables to your path to ensure they are accessible. 

    • [Android SDK installation directory]/platform-tools

    • [Android SDK installation directory]/emulator

  2. Download the Java Development Kit if you do not have it already. Make sure you know the directory it is installed in

  3. Create some environment variables:

    • Create a JAVA_HOME variable and set the directory to your jdk installation

    • Create a ANDROID_HOME variable and set the directory to your android sdk installation

  4. Run flutter doctor. If this is no longer showing you a warning/error for Android Studio and Android Toolchain, run flutter doctor --android-licenses and accept all licenses. If you are still running into issues, watch this video here

Visual Studio Setup

Another dependency that you may not have already is Visual Studio (Different from Visual Studio Code). Follow these short steps to get it setup for Flutter.

  1. Download Visual Studio. Navigate to where you downloaded it and open the exe

  2. Once it prompts you to select add-on’s to download, include “Desktop development with C++” and all its default components 

  3. Run flutter doctor in your Command Prompt  to confirm that you have it installed. If you find issues, watch this video here

VSCode Setup

Progress to this step ONLY IF you run flutter doctor and have no issues. If you run into issues, refer to the setup guide provided by flutter linked in the reference section:

  1. Start VSCode 

  2. Open a browser and go to the Visual Studio Marketplace. Here, search for the Flutter extension.

  3. Click Install. Installing the Flutter extension also installs the Dart extension.

Validating your Setup with a Sample Project

If you want to make sure your setup works with an existing sample project you can find the complete instructions here or follow the steps below.

Setting up the test application

  1. Open up VS Code

  2. Invoke View > Command Palette.

  3. Type “flutter”, and select the Flutter: New Project.

  4. Select Application.

  5. Create or select the parent directory for the new project folder.

  6. Enter a project name, such as my_app, and press Enter.

  7. Wait for project creation to complete and the main.dart file to appear.

Running the test application

  1. Locate the VS Code status bar (the blue bar at the bottom of the window):

  2. Select a device from the Device Selector area (below

  1. Invoke Run > Start Debugging or press F5.

  2. Wait for the app to launch—progress is printed in the Debug Console view. The app should look something like this

If you see this screen, that means your setup is working! If you run into some errors, please make sure flutter doctor does not return any issues, and you have everything correctly setup as per the instructions above. If you still run into issues, ask google!

References