Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

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. Before you begin, make sure you have Git. If you don’t already have it installed, you can do so here https://git-scm.com/

Setting up Flutter

  1. https://docs.flutter.dev/get-started/installFlutter 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.

VS Code 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: https://docs.flutter.dev/get-started/editor .

  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.

  4. Clone the repository to local: 

git clone [repository link]

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. https://developer.android.com/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.

  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

    • [Android SDK installation directory]/tools

    • [Android SDK installation directory]/tools/bin

  2. https://www.oracle.com/ca-en/java/technologies/downloads/#jdk21-windows (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 (Dififerent from Visual Studio Code). Follow these short steps to get it setup for Flutter.

  1. https://visualstudio.microsoft.com/downloads/ . 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

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!

  • No labels