0% found this document useful (0 votes)
9 views7 pages

Install Flutter

This document provides a step-by-step guide to install Flutter, Dart, and Visual Studio Code for Flutter application development, focusing primarily on Windows. It covers downloading and setting up the Flutter SDK, configuring the PATH environment variable, installing Dart, setting up VSCode with necessary extensions, and creating and running a Flutter project. The guide also includes instructions for debugging and deploying the app on Android and iOS devices.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
9 views7 pages

Install Flutter

This document provides a step-by-step guide to install Flutter, Dart, and Visual Studio Code for Flutter application development, focusing primarily on Windows. It covers downloading and setting up the Flutter SDK, configuring the PATH environment variable, installing Dart, setting up VSCode with necessary extensions, and creating and running a Flutter project. The guide also includes instructions for debugging and deploying the app on Android and iOS devices.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

Sure!

I'll guide you step-by-step on how to install Flutter, Dart, and set up
Visual Studio Code (VSCode) to develop Flutter applications. This process will
cover installation for both Windows and macOS, but I’ll focus on Windows as
it's more commonly used for Flutter development.
Step 1: Install Flutter
1.1. Download and Install Flutter
1. Download Flutter SDK:
o Go to the official Flutter website: Flutter Install

o Choose your operating system (Windows, macOS, or Linux). I'll


guide you through the Windows setup:
 Go to Flutter for Windows.
 Under the "Get the Flutter SDK" section, click the stable
channel download link to download the
flutter_windows_x.x.x-stable.zip file.

2. Extract the file into the directory you want to store the Flutter
SDK.
3.
4. PS C:\> Expand-Archive `
5. –Path $env:USERPROFILE\Downloads\flutter_windows_3.24.5-stable.zip `
-Destination $env:USERPROFILE\dev\

content_copy
When finished, the Flutter SDK should be in the C:\user\
{username}\dev\flutter directory.

Update your Windows PATH variable


To run Flutter commands in PowerShell, add Flutter to
the PATH environment variable. This section presumes that you
installed the Flutter SDK in %USERPROFILE%\dev\flutter.
1. Press Windows + Pause.
If your keyboard lacks a Pause key, try Windows + Fn + B.
The System > About dialog displays.
2. Click Advanced System Settings > Advanced > Environment
Variables...
The Environment Variables dialog displays.
3. In the User variables for (username) section, look for
the Path entry.
1. If the entry exists, double-click on it.
The Edit Environment Variable dialog displays.
1. Double-click in an empty row.
2. Type %USERPROFILE%\dev\flutter\bin.
3. Click the %USERPROFILE%\dev\flutter\bin entry.
4. Click Move Up until the Flutter entry sits at the top
of the list.
5. Click OK three times.
2. If the entry doesn't exist, click New....
The Edit Environment Variable dialog displays.
1. In the Variable Name box, type Path.
2. In the Variable Value box, type %USERPROFILE%\
dev\flutter\bin
3. Click OK three times.
4. To enable these changes, close and reopen any existing
command prompts and PowerShell instances.
1.2. Run Flutter Doctor
Now, we need to verify if everything is set up correctly:
1. Open Command Prompt or PowerShell and type:
bash
Copy code
flutter doctor
o This command will check your environment and display any
missing dependencies.
o It will check if Dart is installed, if Android Studio or Xcode are
set up for building apps, etc.
o If the Flutter doctor indicates missing dependencies, follow the
instructions to fix them.

Step 2: Install Dart


Flutter uses Dart, and Dart is installed as part of Flutter. However, if you need
Dart standalone, you can download it from the official Dart site.
 Download the Dart SDK: Dart SDK
 Follow the instructions on the Dart site to install Dart for your operating
system.
 After installation, run the following command to check Dart’s version:
bash
Copy code
dart --version

Step 3: Install Visual Studio Code (VSCode)


Visual Studio Code is a lightweight, powerful editor that works perfectly with
Flutter development.
3.1. Download and Install VSCode
1. Go to Visual Studio Code download page and download the installer for
your operating system (Windows).
2. Run the installer and follow the prompts to install VSCode.
3.2. Install Flutter and Dart Extensions in VSCode
1. Open VSCode.
2. Install the Flutter extension:
o Press Ctrl + P and type ext install dart-code.flutter to install the
Flutter plugin (or use the Extensions view by clicking on the
Extensions icon in the Activity Bar on the side of the VSCode
window).
o After installing, you should see the Flutter and Dart extensions
in the Extensions view.

Step 4: Set up Android Emulator or Device


To run Flutter apps on Android devices, you need either a physical Android
device or an emulator.
Packages to install: - Android SDK Command-line Tools (latest) (cmdline-
tools;latest)
4.1. Install Android Studio (for emulator)
1. Download Android Studio from Android Studio download page.
2. Install Android Studio and during installation, make sure to check the
Android Virtual Device option, which is necessary to run the Android
emulator.
4.2. Configure Android Emulator
1. Open Android Studio.
2. Open AVD Manager by clicking on the AVD Manager icon in the top-
right corner (it looks like a little phone).
3. Click Create Virtual Device and follow the wizard to create an
emulator.
4. Start the emulator by selecting it and clicking the green Play button.

Step 5: Create a Flutter Project


Now that everything is set up, let's create a simple Flutter app!
5.1. Create New Flutter Project
1. Open VSCode.
2. Open the Command Palette (Ctrl+Shift+P), type Flutter: New
Project, and select it.
3. Choose Flutter Application.
4. Enter the project name, such as jetson_orin_interface.
5. Choose a location to save the project.
6. Wait for VSCode to generate the Flutter project.

Step 6: Run the Flutter App


6.1. Run the App on an Emulator
1. Open the terminal in VSCode (Ctrl + ~).
2. Type the following to run the app:
bash
Copy code
flutter run
o This will start the Flutter app and launch it on your Android
emulator or connected device.
Step 7: Debugging and Building
1. Hot Reload: As you make changes to the code, you can use hot
reload to instantly see the changes on your emulator or device by
pressing r in the terminal or clicking the Hot Reload button in VSCode.
2. Debugging: You can debug your Flutter app in VSCode by setting
breakpoints in the code and using the Debug panel (Ctrl + Shift + D).

Step 8: Running the Project


Once you set up your project, you can:
1. Edit main.dart: The main file for a Flutter app is lib/main.dart. You
can edit this file to build the user interface, write logic, and call
services.
Here's a simple Flutter example to start with:
dart
Copy code
import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {


@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}

class MyHomePage extends StatelessWidget {


@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
body: Center(
child: Text('Hello, world!'),
),
);
}
}

Step 9: Build and Deploy


Once you're ready to deploy your app, you can use:
1. Build for Android:
bash
Copy code
flutter build apk
2. Build for iOS (on macOS):
bash
Copy code
flutter build ios

Conclusion
By following the above steps, you’ll have Flutter and Dart set up on your
machine and ready for app development. With VSCode configured for Flutter
development, you can start building your Flutter app, using Provider for
state management, and interacting with APIs.

You might also like