start with Flutter setup + a Hello World app using VS Code

Install Flutter SDK & VS Code

VS Code + Flutter is lightweight and very beginner-friendly.
Let’s go step by step


Step 1: Install Flutter SDK

  1. Go to Flutter install page.
  2. Download Flutter SDK for your OS (Windows/Mac/Linux).
  3. Extract it somewhere safe, e.g.
    • Windows: C:\src\flutter
    • Mac/Linux: ~/flutter

Step 2: Add Flutter to PATH

So you can run flutter command from any terminal:

  • Windows (PowerShell): setx PATH "%PATH%;C:\src\flutter\bin"
  • Mac/Linux (bash/zsh): export PATH="$PATH:$HOME/flutter/bin"

Check with:

flutter doctor

This shows if anything is missing (like Android SDK).


Step 3: Install VS Code + Extensions

  1. Download Visual Studio Code.
  2. Open Extensions Marketplace (left toolbar).
    • Install Flutter extension.
    • It will also ask to install Dart → accept.

Step 4: Set Up Device to Run

You have 2 options:
Android Emulator

  • Install Android Studio.
  • In Android Studio → AVD Manager → create a virtual device.
  • Start the emulator before running Flutter apps.

Real Android Device

  • Enable Developer ModeUSB Debugging.
  • Connect phone via USB.
  • Run flutter devices → should show your phone.

Step 5: Create New Flutter Project

In VS Code terminal:

flutter create hello_world
cd hello_world
code .

This opens your new project in VS Code.


Step 6: Write Hello World

Open lib/main.dart → replace code with:

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 World ",
            style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
          ),
        ),
      ),
    );
  }
}

Step 7: Run the App

  • Open VS Code Terminal → run: flutter run
  • Or press F5 (Run & Debug).
  • You should see Hello World on your emulator/phone.



Comments (1)

Leave a Reply