Creating First Flutter Project

Introduction

Flutter has revolutionized mobile app development by offering a fast, modern, and cross-platform framework. With just one codebase, developers can build apps for Android, iOS, web, and desktop. Whether you are a beginner or an experienced developer, learning how to set up your first Flutter project is the first milestone in your journey.

In this comprehensive guide, we will walk you step-by-step through creating your first Flutter project using Visual Studio Code (VS Code). We will cover everything from installing prerequisites, setting up the environment, creating a new project, writing the Hello World app, and finally running it on an emulator or real device.

By the end of this article, you will have a solid understanding of how Flutter projects work, how to structure your code, and how to run apps efficiently. Let’s dive in.

Why Use Flutter with VS Code?

Before jumping into the practical setup, let’s briefly understand why many developers choose Flutter with VS Code:

Lightweight IDE – VS Code is lighter and faster compared to Android Studio.
Customizable Extensions – You can install the Flutter and Dart extensions for productivity.
Faster Debugging – Hot reload and debugging are smoother with fewer system requirements.
Cross-platform Development – Both VS Code and Flutter run on Windows, macOS, and Linux.
Free and Open Source – Both are free tools with strong community support.

This makes VS Code an excellent choice, especially for beginners who don’t want a heavy development environment.

Step 1: Setting Up Prerequisites

Before creating a Flutter project, you need to make sure your environment is ready.

1. Install Flutter SDK

Go to the official Flutter website: https://flutter.dev
Download the stable Flutter SDK for your operating system.
Extract the file to a directory of your choice, for example:
- Windows: C:\src\flutter
- macOS/Linux: /home/user/flutter

2. Set Up Environment Variables

Add Flutter to your PATH.
On Windows:
- Search for Environment Variables in Control Panel.
- Add the Flutter bin path, e.g., C:\src\flutter\bin.
On macOS/Linux:
- Edit .bashrc or .zshrc and add: export PATH="$PATH:/home/user/flutter/bin"

3. Install Dart SDK

Dart is bundled with Flutter, so you don’t need to install it separately.
Just ensure the Dart extension in VS Code is installed.

4. Install Visual Studio Code

Download from https://code.visualstudio.com.
Install Flutter and Dart extensions from the Extensions Marketplace.

5. Run Flutter Doctor

Open the terminal and type:

flutter doctor

This checks if Flutter, Dart, Android SDK, and connected devices are properly set up. Fix any issues before moving forward.

Step 2: Creating a New Flutter Project in VS Code

Now that everything is ready, let’s create your first Flutter project.

Open VS Code.
Press Ctrl + Shift + P (Windows/Linux) or Cmd + Shift + P (macOS) to open the command palette.
Type: Flutter: New Project
Select Flutter Application.
Choose a folder location and give your project a name, e.g., hello_world_app.
VS Code will generate a project with the default Flutter template.

Your project structure will look like this:

hello_world_app/
├── android/
├── build/
├── ios/
├── lib/
│   └── main.dart
├── test/
├── pubspec.yaml

The most important file is lib/main.dart, which contains the entry point of your app.

Step 3: Understanding the Flutter Project Structure

Before writing the Hello World app, let’s understand the key components:

lib/main.dart → The main entry file where your Dart code resides.
pubspec.yaml → Manages dependencies, assets, and configurations.
android/ and ios/ → Platform-specific code for Android and iOS.
build/ → Auto-generated files when you build your project.
test/ → Folder for unit tests.

As a beginner, you will mostly work inside the lib folder.

Step 4: Writing the Hello World App

Open lib/main.dart and replace the code with:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
return MaterialApp(
  title: 'Hello World App',
  home: Scaffold(
    appBar: AppBar(
      title: Text('Hello World App'),
    ),
    body: Center(
      child: Text(
        'Hello, World!',
        style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
      ),
    ),
  ),
);  }
}

Code Breakdown:

main() → The entry point of a Dart application.
runApp(MyApp()) → Runs the root widget of the app.
StatelessWidget → A widget that does not change its state.
MaterialApp → Provides material design components.
Scaffold → Provides basic app layout with AppBar and Body.
Text → Displays the “Hello, World!” message.

Step 5: Running the Hello World App

Now let’s run the app.

Option 1: Run on Emulator

Open Android Emulator or iOS Simulator.
In VS Code, click the Run > Start Debugging button.
Alternatively, run: flutter run

Option 2: Run on Real Device

Connect your phone via USB.
Enable USB Debugging (Android) or Developer Mode (iOS).
Run: flutter devices flutter run

If successful, you will see your app running with “Hello, World!” displayed.

Step 6: Hot Reload and Hot Restart

One of Flutter’s best features is Hot Reload:

Make a change in main.dart, e.g., change the text to Hello Flutter!.
Save the file.
The app will update instantly without restarting.
Hot Restart restarts the app but keeps the state reset.

This makes development faster and smoother.

Step 7: Customizing the Hello World App

Let’s make the Hello World app a bit more interactive.

import 'package:flutter/material.dart';

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

class MyCounterApp extends StatefulWidget {
  @override
  _MyCounterAppState createState() => _MyCounterAppState();
}

class _MyCounterAppState extends State<MyCounterApp> {
  int _counter = 0;

  void _incrementCounter() {
setState(() {
  _counter++;
});  }

  @override
  Widget build(BuildContext context) {
return MaterialApp(
  title: 'Hello World Counter',
  home: Scaffold(
    appBar: AppBar(
      title: Text('Hello World App'),
    ),
    body: Center(
      child: Text(
        'You pressed the button $_counter times',
        style: TextStyle(fontSize: 24),
      ),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: _incrementCounter,
      child: Icon(Icons.add),
    ),
  ),
);  }
}

Now, pressing the floating button will increase the counter. This is the foundation of interactive apps.

Step 8: Common Errors and Fixes

While creating your first Flutter app, you may face some issues. Let’s discuss common ones:

Flutter not recognized – Add Flutter SDK to PATH.
Device not found – Make sure emulator or phone is connected.
Gradle build failed – Update Android SDK or run flutter clean.
Hot reload not working – Ensure you run the app in debug mode.

Step 9: Best Practices for Beginners

Always structure your code clearly.
Use StatelessWidget for static UI and StatefulWidget for dynamic UI.
Use pubspec.yaml to add dependencies.
Follow Material Design guidelines for consistent UI.
Practice small projects before moving to complex apps.