Creating your first Flutter project is the first practical step toward learning Flutter application development. A Flutter project contains the Dart source code, Flutter configuration, platform-specific files, dependencies, assets, tests, and other resources required to build and run an application.
A new Flutter project can be created using VS Code, Android Studio, or the Flutter command-line interface (CLI). The Flutter CLI provides the flutter create command for generating a new project, while VS Code provides the Flutter: New Project command. ([Flutter Documentation](https://docs.flutter.dev/reference/create-new-app))
A Flutter project is a collection of files and folders that together form a Flutter application.
A typical Flutter project contains:
Flutter uses a single project structure that can target multiple platforms depending on the platforms configured for the project.
Before creating your first Flutter project, make sure the development environment is configured correctly.
| Requirement | Purpose |
|---|---|
| Flutter SDK | Provides the Flutter framework and command-line tools. |
| Dart SDK | Provides the Dart programming language used by Flutter. |
| VS Code | Lightweight editor for Flutter development. |
| Flutter Extension | Provides Flutter-specific development features in VS Code. |
| Dart Extension | Provides Dart language support. |
| Git | Used for source-code management and Flutter setup workflows. |
| Target Device | Used to run and test the application. |
Before creating a project, open a terminal and verify that Flutter is available.
flutter --versionThis command displays the installed Flutter version.
Flutter 3.x.x
Dart 3.x.xThe exact version depends on the Flutter SDK installed on the computer.
Use the Flutter Doctor command to check whether the development environment is correctly configured.
flutter doctorFor detailed information, use:
flutter doctor -vFlutter Doctor can report issues related to Flutter, Android tooling, connected devices, and other parts of the development environment.
There are several ways to create a Flutter project.
For beginners, VS Code and the Flutter CLI are convenient approaches for learning project creation.
VS Code provides a graphical way to create a Flutter project through the Flutter extension.
Launch Visual Studio Code.
Go to:
View > Command PaletteOr use:
Ctrl + Shift + POn macOS:
Cmd + Shift + PType:
FlutterSelect:
Flutter: New ProjectFlutter's official VS Code documentation describes this workflow for creating a new Flutter application. ([Flutter Documentation](https://docs.flutter.dev/reference/create-new-app))
After selecting Flutter: New Project, VS Code asks which Flutter template you want to use.
For your first application, select:
ApplicationThe Application template creates a standard Flutter application that can be used for learning and development.
Depending on the Flutter version and development environment, other project templates may be available for different purposes.
For beginners, the standard Application template is the most appropriate starting point.
VS Code asks you to select the parent directory where the project should be created.
For example:
Documents/
FlutterProjects/
If you select:
FlutterProjects/and enter the project name:
my_first_appFlutter creates:
FlutterProjects/
my_first_app/
You normally select the parent folder rather than manually creating the project folder because Flutter creates the project directory itself. ([Flutter Documentation](https://docs.flutter.dev/reference/create-new-app))
Flutter project names should follow the Dart naming convention:
lowercase_with_underscoresmy_first_app
student_app
shopping_app
weather_app
flutter_demoMyFirstApp
my-first-app
my first app
StudentAppUsing lowercase letters with underscores makes the project name consistent with Dart and Flutter naming conventions.
Suppose you want to create your first Flutter application.
Use the project name:
my_first_appThe basic process is:
Open VS Code
↓
Command Palette
↓
Flutter: New Project
↓
Application
↓
Select Parent Folder
↓
Enter my_first_app
↓
Flutter Creates Project
↓
Project Opens in VS CodeYou can also create a Flutter project directly from the command line.
The main command is:
flutter create my_first_appFlutter's official CLI documentation defines flutter create as the command used to create a new Flutter project. ([Flutter CLI Documentation](https://docs.flutter.dev/reference/flutter-cli))
Open Command Prompt, PowerShell, Terminal, or the VS Code integrated terminal.
For example:
cd DocumentsYou can create a dedicated Flutter projects folder:
mkdir FlutterProjectsThen enter it:
cd FlutterProjectsflutter create my_first_appcd my_first_appcode .The flutter create command automatically generates the basic files and folders required for a Flutter application.
flutter create student_appFlutter generates the project structure, platform files, configuration files, and starter application code.
This means you do not need to manually create every folder required for a Flutter application.
Flutter also supports creating a minimal application using the --empty option.
flutter create --empty my_first_appThis creates a minimal project instead of using the standard starter application template. Flutter's current learning tutorial uses this approach when introducing the fundamentals of a Flutter application. ([Flutter Documentation](https://docs.flutter.dev/learn/pathway/tutorial/create-an-app))
After creating a Flutter project, you will see a structure similar to:
my_first_app/
│
├── android/
├── ios/
├── lib/
│ └── main.dart
├── test/
├── web/
├── linux/
├── macos/
├── windows/
├── .gitignore
├── analysis_options.yaml
├── pubspec.yaml
├── README.md
└── pubspec.lockThe exact files and folders can vary depending on the Flutter version and platforms enabled for the project.
The lib folder is one of the most important folders in a Flutter application.
lib/
main.dartApplication Dart code is generally placed inside the lib directory.
lib/
├── main.dart
├── screens/
├── widgets/
├── models/
├── services/
└── utils/As the application becomes larger, developers can organize the code into separate folders and files.
The main.dart file commonly contains the entry point of a Flutter application.
void main() {
runApp(const MyApp());
}The main() function is the entry point of a Dart program. Flutter's runApp() function starts the Flutter application's widget tree. ([Flutter Documentation](https://docs.flutter.dev/learn/pathway/tutorial/create-an-app))
The runApp() function takes a widget and makes it the root of the Flutter application's widget tree.
void main() {
runApp(
const MyApp(),
);
}Here, MyApp becomes the root widget.
Let's create a simple Flutter application that displays a welcome message.
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 First Flutter App'),
),
body: const Center(
child: Text(
'Hello Flutter!',
style: TextStyle(
fontSize: 24,
),
),
),
),
);
}
}
import 'package:flutter/material.dart';This imports Flutter's Material Design widgets and related functionality.
void main() {
runApp(const MyApp());
}This starts the Flutter application.
class MyApp extends StatelessWidgetMyApp is a widget that represents the root of the application.
@override
Widget build(BuildContext context)The build() method describes the widget tree that should be displayed.
MaterialApp(
...
)MaterialApp provides the basic application structure and Material Design behavior.
Scaffold(
appBar: AppBar(...),
body: ...
)Scaffold provides a standard screen structure.
AppBar(
title: const Text('My First Flutter App'),
)The AppBar displays a toolbar at the top of the screen.
Center(
child: Text('Hello Flutter!'),
)The Center widget positions its child in the center of the available space.
Text('Hello Flutter!')The Text widget displays text on the screen.
Flutter interfaces are constructed using widgets. Widgets are arranged in a hierarchical structure called the widget tree.
MaterialApp
|
└── Scaffold
|
├── AppBar
| └── Text
|
└── Center
└── TextThis widget-based architecture is one of the fundamental concepts of Flutter development.
After creating the project, you need a target device to run the application.
Possible targets include:
Use:
flutter devicesThis command lists the devices detected by Flutter.
2 connected devices:
Chrome
Android Emulator
The actual output depends on the devices configured on your computer.
Open the Flutter project in VS Code.
Select the target device from the device selector in the VS Code status bar.
Then press:
F5Alternatively, use:
Run > Start DebuggingVS Code's Flutter integration supports creating, running, and debugging Flutter projects. ([Flutter Documentation](https://docs.flutter.dev/tools/vs-code))
Open the terminal inside the project directory.
flutter runFlutter will build the application and run it on an available target.
flutter run -d chromeThe Flutter tutorial demonstrates running a newly created Flutter application on Chrome using this command. ([Flutter Documentation](https://docs.flutter.dev/learn/pathway/tutorial/create-an-app))
First, check the available devices:
flutter devicesThen specify a device ID:
flutter run -d <device_id>flutter run -d chromeThe exact device ID depends on your environment.
Hot Reload allows developers to quickly see many changes made to Flutter code while the application is running.
Initially:
Text('Hello Flutter!')Change it to:
Text('Welcome to My App!')Save the file and perform Hot Reload.
The updated text can appear without completely restarting the application. Flutter's tutorial demonstrates using Hot Reload to update the running application. ([Flutter Documentation](https://docs.flutter.dev/learn/pathway/tutorial/create-an-app))
| Feature | Hot Reload | Hot Restart |
|---|---|---|
| Purpose | Apply code changes quickly | Restart the Flutter application |
| Speed | Very fast in typical development | Slower than Hot Reload |
| State | Generally preserves current state | Resets application state |
| Usage | UI and logic changes | When a full restart is required |
The pubspec.yaml file is an important configuration file located in the root of the Flutter project.
name: my_first_app
description: A new Flutter application.
environment:
sdk: ^3.0.0
dependencies:
flutter:
sdk: flutter
dev_dependencies:
flutter_test:
sdk: flutter
The exact generated content depends on the Flutter and Dart versions and project configuration.
A new Flutter project includes a basic pubspec file containing project metadata and dependencies. ([Flutter Documentation](https://docs.flutter.dev/tools/pubspec))
The pubspec.yaml file can contain information about:
Flutter applications can use external packages.
To add the http package using the Flutter CLI:
flutter pub add httpThis updates the project's dependency configuration.
flutter pub getThe flutter pub get command resolves and downloads the packages specified by the project.
The pubspec.lock file records the specific versions of resolved packages used by a project.
It helps maintain consistent dependency versions between builds. Flutter documentation notes that this file is generated when dependencies are resolved during the project's first build or package resolution process. ([Flutter Documentation](https://docs.flutter.dev/tools/pubspec))
android/The android folder contains Android-specific project files.
It becomes important when configuring or building the Flutter application for Android.
Examples of Android-related configuration include:
ios/The ios folder contains iOS-specific project files.
It is used when building the Flutter application for iOS.
iOS development requires macOS and Apple's development tooling.
web/The web folder contains web-specific files used when Flutter Web support is enabled for the project.
You can run a Flutter web application using:
flutter run -d chromeFlutter also supports adding web support to an existing project using the appropriate Flutter tooling. ([Flutter Documentation](https://docs.flutter.dev/platform-integration/web/building))
test/The test folder is used for automated tests.
test/
widget_test.dartFlutter projects can contain unit tests, widget tests, and other types of automated tests.
The README.md file generally contains documentation about the project.
It can include:
The .gitignore file specifies files and folders that Git should generally not track.
This is useful when storing Flutter projects in Git repositories.
build/
.dart_tool/
*.logThe exact generated .gitignore content depends on the Flutter project and platform configuration.
The project root is the main directory of the Flutter project.
For example:
my_first_app/
├── lib/
├── android/
├── ios/
├── test/
├── pubspec.yaml
└── README.mdThe root directory is important because files such as pubspec.yaml are located there.
When using VS Code with Flutter DevTools, the project root should be opened so that VS Code can recognize the Flutter project correctly. ([Flutter Documentation](https://docs.flutter.dev/tools/devtools/vscode))
When creating applications intended for future distribution, project organization information can be configured according to the application's requirements.
For example, an organization might use a domain such as:
com.exampleOrganization and project configuration can vary depending on the platform and application requirements.
The Flutter CLI supports different options for project creation.
flutter create --helpThis displays available options for the flutter create command.
flutter create my_appflutter create --empty my_appFlutter's current CLI documentation provides the create command and its available options. ([Flutter Documentation](https://docs.flutter.dev/reference/flutter-cli))
Let's create a simple Flutter application called:
student_appflutter 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 to Student App',
style: TextStyle(
fontSize: 26,
fontWeight: FontWeight.bold,
),
),
),
),
);
}
}
flutter runA counter application is a useful beginner project because it demonstrates widgets, state, events, and UI updates.
import 'package:flutter/material.dart';
void main() {
runApp(const CounterApp());
}
class CounterApp extends StatelessWidget {
const CounterApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: const CounterPage(),
);
}
}
class CounterPage extends StatefulWidget {
const CounterPage({super.key});
@override
State<CounterPage> createState() => _CounterPageState();
}
class _CounterPageState extends State<CounterPage> {
int count = 0;
void incrementCounter() {
setState(() {
count++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Counter App'),
),
body: Center(
child: Text(
'Count: $count',
style: const TextStyle(
fontSize: 30,
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: incrementCounter,
child: const Icon(Icons.add),
),
);
}
}
class CounterPage extends StatefulWidgetA StatefulWidget is useful when the UI needs to change during the lifetime of the application.
int count = 0;This variable stores the current counter value.
setState(() {
count++;
});setState() tells Flutter that the state has changed and that the relevant UI should be rebuilt.
FloatingActionButton(
onPressed: incrementCounter,
child: const Icon(Icons.add),
)The button calls the incrementCounter() function when pressed.
VS Code provides debugging functionality for Flutter applications.
F5Or:
Run > Start DebuggingThe Flutter Inspector helps developers inspect the widget tree of a running Flutter application.
MaterialApp
|
└── Scaffold
|
├── AppBar
| └── Text
|
└── Center
└── TextThis makes it easier to understand how widgets are arranged in the application.
Flutter DevTools provides tools for inspecting and debugging Flutter applications.
To use DevTools from VS Code, open the Flutter project root, start a debug session, and then use the available Open DevTools commands. ([Flutter Documentation](https://docs.flutter.dev/tools/devtools/vscode))
flutter is not recognized as an internal or external commandSolution: Verify that Flutter is installed and that the Flutter SDK's bin directory is available in PATH.
No supported devices connectedSolution: Start an emulator, connect a physical device, or use a supported web/desktop target.
Solution: Use lowercase letters and underscores.
my_first_appSolution:
flutter pub getSolution:
flutter doctor -vRead the reported diagnostic messages and complete the missing configuration.
| Command | Purpose |
|---|---|
flutter --version | Displays Flutter version. |
flutter doctor | Checks Flutter environment. |
flutter doctor -v | Displays detailed diagnostic information. |
flutter create app_name | Creates a Flutter project. |
flutter create --empty app_name | Creates a minimal Flutter project. |
flutter devices | Lists available devices. |
flutter run | Runs the Flutter application. |
flutter run -d chrome | Runs the application on Chrome. |
flutter pub get | Gets project dependencies. |
flutter pub add package_name | Adds a package to the project. |
flutter analyze | Analyzes project code. |
flutter clean | Removes generated build files. |
flutter create --help | Displays project creation options. |
Install Flutter
↓
Install VS Code
↓
Install Flutter & Dart Extensions
↓
Run flutter doctor
↓
Open VS Code
↓
Flutter: New Project
↓
Select Application
↓
Select Parent Folder
↓
Enter Project Name
↓
Project Generated
↓
Open lib/main.dart
↓
Write Flutter Code
↓
Select Device
↓
Run Application
↓
Use Hot Reload
↓
Debug Application
↓
Use Flutter Inspector
↓
Use DevToolspubspec.yaml exists in the project root.lib/main.dart exists.A Flutter project is a collection of Dart source code, configuration files, dependencies, assets, tests, and platform-specific files used to build a Flutter application.
flutter create project_nameOpen the Command Palette, select Flutter: New Project, select the Application template, choose the parent directory, and enter a valid project name.
Flutter project names should normally use the lowercase_with_underscores convention.
main.dart commonly contains the main() function and the starting widget of the Flutter application.
pubspec.yaml is the project's configuration file that contains metadata, dependencies, assets, and other project settings.
flutter pub get resolves and retrieves the project's declared dependencies.
flutter run builds and runs a Flutter application on a selected or available target device.
Hot Reload allows many changes to Flutter code to be reflected quickly in a running application while generally preserving its current state.
The widget tree is the hierarchical structure formed by Flutter widgets that describes the application's user interface.
For structured Flutter learning and practical application development, explore the JustAcademy Flutter Training course:
To register for a Flutter course demo:
Register for Flutter Course Demo
flutter create command creates a new Flutter project.lib directory contains the main Dart application code.lib/main.dart commonly contains the application entry point.pubspec.yaml manages project metadata and dependencies.flutter pub get retrieves project dependencies.flutter devices lists available devices.flutter run runs the application.flutter run -d chrome can run a Flutter web application on Chrome.Creating your first Flutter project is an important milestone in learning Flutter development. The process begins by verifying the Flutter environment, creating a project using VS Code or the Flutter CLI, understanding the generated project structure, editing main.dart, selecting a target device, and running the application.
The basic project creation process can be summarized as:
flutter create my_first_app
↓
cd my_first_app
↓
code .
↓
Open lib/main.dart
↓
Write Flutter Code
↓
Select Device
↓
flutter run
↓
Hot Reload
↓
Debug and TestOnce you understand this workflow, you can move on to building screens, working with widgets, handling user input, managing state, using packages, connecting APIs, and developing complete Flutter applications.
