Flutter development in Visual Studio Code (VS Code) becomes much easier after installing and configuring the official Flutter and Dart extensions. These extensions provide code completion, syntax highlighting, code analysis, debugging, project creation, device selection, Hot Reload, DevTools integration, and other development features.
The Flutter extension for VS Code also installs the Dart extension automatically. The official Flutter documentation recommends using the Flutter extension to configure Flutter development in VS Code. :contentReference[oaicite:0]{index=0}
Flutter is a UI toolkit used to build applications for multiple platforms from a shared codebase. Flutter applications are primarily written using the Dart programming language.
Flutter can be used to build applications for platforms such as:
Flutter provides a widget-based approach to building user interfaces.
import 'package:flutter/material.dart';
void main() {
runApp(
const MaterialApp(
home: Scaffold(
body: Center(
child: Text('Hello Flutter!'),
),
),
),
);
}
Dart is the programming language used to develop Flutter applications. It provides the syntax, language features, type system, asynchronous programming capabilities, and other programming functionality used by Flutter applications.
void main() {
String name = 'Manish';
int age = 25;
print('Name: $name');
print('Age: $age');
}
Flutter uses Dart to define application logic, widgets, state management, functions, classes, models, services, and other application components.
The Flutter extension is a VS Code extension that provides development support for Flutter applications.
It enables VS Code to understand Flutter projects and provides tools for creating, running, debugging, and developing Flutter applications.
The official Flutter documentation states that with the Flutter extension installed, VS Code can compile, deploy, and debug Flutter applications. :contentReference[oaicite:1]{index=1}
The Dart extension provides Dart language support inside VS Code.
It helps developers write and maintain Dart code used in Flutter applications.
The official Dart documentation lists syntax highlighting, package resolution, Hot Reload, and other Dart-specific development capabilities as features of the Dart VS Code extension. :contentReference[oaicite:2]{index=2}
| Feature | Flutter Extension | Dart Extension |
|---|---|---|
| Primary Purpose | Flutter application development | Dart language development |
| Flutter Project Creation | Yes | No |
| Dart Code Support | Uses Dart support | Yes |
| Flutter Widgets | Yes | Provides Dart-level support |
| Hot Reload | Yes | Supports Dart development functionality |
| Flutter Debugging | Yes | Provides debugging support for Dart |
| Flutter Inspector | Yes | Works with Flutter tooling |
| Flutter DevTools | Yes | Yes |
When the Flutter extension is installed, the Dart extension is installed as part of the Flutter development setup. :contentReference[oaicite:3]{index=3}
A typical Flutter development environment can be understood as follows:
VS Code
|
+-- Flutter Extension
|
+-- Dart Extension
|
+-- Flutter SDK
|
+-- Dart SDK
|
+-- Target Platform
|
+-- Android
+-- iOS
+-- Web
+-- Windows
+-- macOS
+-- LinuxThe Flutter SDK includes the tools required for Flutter development, while the Dart SDK provides the Dart language and development tooling used by Flutter.
| Requirement | Purpose |
|---|---|
| VS Code | Code editor and development environment |
| Flutter Extension | Flutter-specific development features |
| Dart Extension | Dart language support |
| Flutter SDK | Flutter framework and command-line tools |
| Git | Source control and Flutter installation workflows |
| Target Platform | Platform where the application will run |
First, install Visual Studio Code on your computer.
VS Code is available for Windows, macOS, and Linux. :contentReference[oaicite:4]{index=4}
Git is commonly used with Flutter development and is also part of the prerequisite setup for some Flutter installation workflows.
git --versiongit version 2.x.xIf the command displays a Git version, Git is available from the terminal.
After installing VS Code, launch the application.
The VS Code interface includes areas such as:
The Extensions panel is used to search for and install VS Code extensions.
Ctrl + Shift + XOn macOS:
Cmd + Shift + XThe Dart documentation also recommends using the Extensions panel and the Cmd/Ctrl + Shift + X shortcut to install the Dart extension. :contentReference[oaicite:5]{index=5}
Search for Flutter in the VS Code Extensions panel.
Installing the Flutter extension also installs the Dart extension. :contentReference[oaicite:6]{index=6}
After installing Flutter, open the Extensions panel and search for:
DartVerify that the Dart extension is installed and enabled.
The Flutter SDK must be installed and available to VS Code.
Flutter's current VS Code installation workflow allows developers to download the Flutter SDK through VS Code. :contentReference[oaicite:7]{index=7}
Ctrl + Shift + P.Cmd + Shift + P.flutter.The Flutter SDK contains the tools and framework required to develop Flutter applications.
It includes Flutter's command-line tooling and the Flutter framework used to build applications.
flutter --version
flutter doctor
flutter create my_app
flutter run
flutter devices
flutter analyzeThe Dart SDK provides the Dart language and development tools.
Flutter uses Dart for application development.
void main() {
String message = 'Hello Dart!';
print(message);
}Developers generally do not need to install a separate Dart SDK solely for Flutter development because the Flutter SDK includes the Dart SDK used by Flutter.
Flutter SDK
|
+-- Flutter Framework
|
+-- Flutter CLI
|
+-- Dart SDK
|
+-- Dart Language
+-- Dart Analyzer
+-- Dart ToolsThis relationship allows Flutter applications to use Dart as their programming language while Flutter provides the UI framework and development tooling.
Open the VS Code integrated terminal.
Terminal > New TerminalThen execute:
flutter --versionYou can also use:
flutter doctorFor detailed diagnostic information:
flutter doctor -vFlutter's official setup documentation recommends running flutter doctor -v to validate the installation. :contentReference[oaicite:8]{index=8}
Flutter Doctor can also be executed directly from VS Code.
doctor.The Flutter extension displays the Flutter Doctor output in the VS Code Output panel. :contentReference[oaicite:9]{index=9}
flutter doctor checks the Flutter development environment and identifies configuration issues.
flutter doctorflutter doctor -vDepending on the installed tools and target platforms, Flutter Doctor can provide information about Flutter, Android tooling, connected devices, and development environments.
After installing the extensions and configuring Flutter, create a new Flutter application.
Ctrl + Shift + P.Flutter.Flutter's official documentation recommends a project name following the lowercase_with_underscores naming convention. :contentReference[oaicite:10]{index=10}
student_flutter_appYou can also create a Flutter project using the terminal.
flutter create student_flutter_appMove into the project:
cd student_flutter_appOpen it in VS Code:
code .student_flutter_app/
│
├── android/
├── ios/
├── lib/
│ └── main.dart
├── test/
├── web/
├── linux/
├── macos/
├── windows/
├── pubspec.yaml
└── README.md| Folder/File | Purpose |
|---|---|
lib/ | Contains the main Dart application code. |
main.dart | Common entry point of a Flutter application. |
pubspec.yaml | Contains project metadata, dependencies, assets, and configuration. |
android/ | Android-specific project files. |
ios/ | iOS-specific project files. |
web/ | Web-specific project files. |
test/ | Application test files. |
Navigate to:
lib/main.dartThis is commonly the entry point of a Flutter application.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: const Text('My Flutter App'),
),
body: const Center(
child: Text('Welcome to Flutter'),
),
),
);
}
}
The Dart extension provides language-level assistance while writing Flutter code.
When typing Dart or Flutter code, VS Code can suggest classes, methods, properties, variables, and other identifiers.
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Hello'),
),
),
)While entering properties or widgets, VS Code can display relevant suggestions.
Syntax highlighting makes source code easier to read by visually distinguishing different types of code elements.
For example:
class Student {
String name;
int age;
Student(this.name, this.age);
void display() {
print('$name is $age years old');
}
}
The Dart extension recognizes Dart syntax and provides appropriate editor support.
The Dart and Flutter tooling analyzes source code and can highlight errors, warnings, and other issues.
void main() {
int number = 'Hello';
}The analyzer can identify the type mismatch because a String value is being assigned to an integer variable.
You can also analyze the complete project using:
flutter analyzeVS Code provides quick fixes and code assists for many Dart and Flutter development tasks.
Ctrl + .On macOS:
Cmd + .The Flutter extension provides Flutter-specific assists and quick fixes through the editor. :contentReference[oaicite:11]{index=11}
The Dart extension provides snippets that can speed up development.
| Snippet | Purpose |
|---|---|
main | Creates a main function. |
try | Creates a try/catch block. |
if | Creates an if statement. |
for | Creates a for loop. |
fori | Creates a for-in style loop. |
while | Creates a while loop. |
class | Creates a Dart class structure. |
fun | Creates a function definition. |
These snippets are provided by the Dart tooling in VS Code. :contentReference[oaicite:12]{index=12}
A Flutter application needs a target device or platform to run.
Possible targets include:
When a Flutter project is open, VS Code displays Flutter information and the current device in the status bar. :contentReference[oaicite:13]{index=13}
If the status bar displays:
No DevicesFlutter has not detected a connected or running target device.
flutter devices.flutter doctor.Once a device has been selected, the application can be run from VS Code.
F5Run > Start Debuggingflutter runVS Code's Flutter integration supports running and debugging applications directly from the editor. :contentReference[oaicite:14]{index=14}
Hot Reload allows developers to quickly see many code changes in a running Flutter application without completely restarting the application.
Original code:
Text('Hello Flutter')Change it to:
Text('Welcome to Flutter')Save the file or use the Hot Reload command.
The updated interface can appear while the current application state is preserved in many cases. Flutter's official test-drive documentation demonstrates this stateful Hot Reload workflow. :contentReference[oaicite:15]{index=15}
| Feature | Hot Reload | Hot Restart |
|---|---|---|
| Purpose | Quickly apply code changes | Restart the Flutter application |
| Speed | Usually very fast | Usually slower than Hot Reload |
| Application State | Generally preserves state | Resets application state |
| Common Usage | UI and small code changes | When a complete Dart application restart is needed |
VS Code provides debugging capabilities for Flutter applications.
F5A breakpoint pauses program execution at a selected line so that developers can inspect the application's state.
void calculateTotal() {
int price = 100;
int quantity = 5;
int total = price * quantity;
print(total);
}
A breakpoint can be placed on:
int total = price * quantity;When execution reaches that line, the debugger pauses and allows you to inspect variables such as price, quantity, and total.
Flutter DevTools provides debugging and performance-analysis tools for Flutter and Dart applications.
To use DevTools from VS Code, the Dart extension is required, and Flutter applications should also have the Flutter extension installed. :contentReference[oaicite:16]{index=16}
The Flutter Inspector allows developers to inspect the widget tree of a running Flutter application.
MaterialApp
|
└── Scaffold
|
├── AppBar
|
└── Center
|
└── TextThe Inspector can help developers understand widget relationships, properties, and layout behavior. The Flutter sidebar in VS Code provides access to the Flutter Inspector and other development tools. :contentReference[oaicite:17]{index=17}
The Flutter extension adds Flutter-specific functionality to VS Code.
The Flutter sidebar can provide access to areas related to:
This provides developers with a central place to manage important Flutter development tasks. :contentReference[oaicite:18]{index=18}
Dart tooling allows developers to navigate through classes, methods, functions, and declarations.
F12Developers can use this to navigate to the definition of a symbol.
Shift + F12This helps locate places where a class, method, variable, or other symbol is used.
The Problems panel displays detected errors and warnings.
Ctrl + Shift + MOn macOS:
Cmd + Shift + MIt can help identify Dart analyzer and Flutter-related problems while developing.
Proper formatting makes Dart and Flutter code easier to read and maintain.
Shift + Alt + FYou can also use the VS Code Command Palette and select the document formatting command.
Unformatted:
void main(){print('Hello');}Formatted:
void main() {
print('Hello');
}Flutter project dependencies are specified in:
pubspec.yamldependencies:
flutter:
sdk: flutter
http: ^1.0.0
After adding or changing dependencies, execute:
flutter pub getThis downloads or resolves the packages required by the project.
VS Code provides built-in Git integration that can be used with Flutter projects.
git init
git status
git add .
git commit -m "Initial Flutter project"
git branch
git pushUsing Git helps developers track changes and collaborate with other developers.
Install VS Code
↓
Install Git
↓
Install Flutter Extension
↓
Dart Extension Installed
↓
Install Flutter SDK
↓
Add Flutter SDK to PATH
↓
Run Flutter Doctor
↓
Configure Target Device
↓
Create Flutter Project
↓
Open main.dart
↓
Run Application
↓
Use Hot Reload
↓
Debug Application
↓
Use Flutter Inspector
↓
Use DevTools
↓
Test and Maintain Applicationflutter --versionflutter doctorflutter create student_appcd student_appcode .lib/main.dartimport 'package:flutter/material.dart';
void main() {
runApp(const StudentApp());
}
class StudentApp extends StatelessWidget {
const StudentApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: const Text('Student App'),
),
body: const Center(
child: Text(
'Welcome Student!',
style: TextStyle(fontSize: 25),
),
),
),
);
}
}
Select Chrome, Android Emulator, or another configured target from the VS Code device selector.
flutter runOr press:
F5Change:
Welcome Student!to:
Welcome to Flutter Development!Save the file and use Hot Reload to see the change.
If Flutter commands are not available in VS Code:
If VS Code cannot locate the Flutter SDK, verify the SDK installation and PATH configuration.
flutter --versionIf the command is not recognized, configure the Flutter SDK PATH and restart VS Code and terminal windows.
Flutter's installation documentation notes that command-line Flutter usage requires the Flutter SDK to be added to the system PATH. :contentReference[oaicite:19]{index=19}
If VS Code displays No Devices, check whether a supported target is available.
flutter devicesflutter emulatorsflutter doctor.If the editor displays Dart errors, read the diagnostic message carefully.
int age = 'Twenty';The variable expects an integer but receives a String.
A corrected version is:
int age = 20;The Dart analyzer can help identify such problems while writing code.
If a package is added to pubspec.yaml but is not recognized, run:
flutter pub getThen restart or reload the development environment if necessary.
| Command | Purpose |
|---|---|
flutter --version | Displays Flutter version information. |
flutter doctor | Checks the Flutter development environment. |
flutter doctor -v | Provides detailed diagnostic information. |
flutter create app_name | Creates a new Flutter project. |
flutter devices | Lists available devices. |
flutter emulators | Lists configured emulators. |
flutter run | Runs the application. |
flutter pub get | Gets project dependencies. |
flutter analyze | Analyzes the project. |
flutter clean | Removes generated build files. |
| Shortcut | Purpose |
|---|---|
Ctrl + Shift + P | Command Palette |
Ctrl + Shift + X | Extensions |
Ctrl + Shift + M | Problems panel |
Ctrl + . | Quick fixes/code actions |
F5 | Start debugging |
F12 | Go to definition |
Shift + F12 | Find references |
Shift + Alt + F | Format document on Windows/Linux |
flutter --version worksflutter doctor runs successfullypubspec.yaml recognizedThe Flutter extension is a VS Code extension that provides Flutter-specific development functionality such as project creation, debugging, device selection, Hot Reload, and Flutter tooling.
The Dart extension provides Dart language support including syntax highlighting, code completion, analysis, navigation, debugging, and other development features.
Yes. The official Flutter VS Code documentation states that installing the Flutter extension also installs the Dart extension. :contentReference[oaicite:20]{index=20}
Flutter SDK contains the Flutter framework and development tools used to create and run Flutter applications.
Dart SDK provides the Dart programming language and related development tools used by Flutter.
flutter doctorOpen the Command Palette, select Flutter: New Project, select the Application template, choose the project location, and enter a valid project name. :contentReference[oaicite:21]{index=21}
Hot Reload applies many code changes to a running Flutter application while generally preserving its current state.
Flutter Inspector is a development tool that helps developers inspect the widget tree, widget properties, and layout of a Flutter application.
Flutter DevTools is a collection of tools used for debugging, inspecting, and analyzing Flutter and Dart applications.
For structured learning and practical Flutter development training, explore the JustAcademy Flutter Training course:
To register for a course demo:
Register for Flutter Course Demo
flutter doctor is useful for checking the development environment.flutter create creates a new Flutter project.flutter run runs a Flutter application.Setting up the Flutter and Dart extensions is an important step in creating a complete Flutter development environment in VS Code. The Flutter extension adds Flutter-specific functionality, while the Dart extension provides language-level support for Dart programming.
After installing the extensions, developers should configure the Flutter SDK, verify the environment with flutter doctor, create a Flutter project, select a target device, and run the application.
The complete workflow can be summarized as:
VS Code
↓
Flutter Extension
↓
Dart Extension
↓
Flutter SDK
↓
Flutter Doctor
↓
Target Device
↓
Flutter Project
↓
Run & Debug
↓
Hot Reload
↓
Flutter Inspector
↓
DevToolsThis setup provides a complete environment for learning Dart, developing Flutter applications, debugging code, testing interfaces, and building production-ready cross-platform applications.
