🎯 Lesson 1: Your First Dart App

⏱ 20-30 min 📊 Absolute Beginner 🏗️ Project-Based 🔗 Official Source

👋

Welcome to Dart! Let's Build Something Cool

Instead of just reading about Dart, we're going to build a real project together - step by step, line by line. No experience needed!

🎮

Our Project: "Greeting Generator 3000"

We'll build a fun command-line app that:

👋 Greets users by name
🎂 Calculates their age
🎨 Generates fun ASCII art
📊 Shows cool statistics

🛠️

Before We Start: Quick Setup

We need 3 things installed on your computer. Click each item to see exactly how to do it!

✅ Dart SDK installed

✅ VS Code installed

✅ Dart extension in VS Code

👇 Scroll down — the full step-by-step setup guide is right below!

🔧 Setup

Complete Setup Guide for Beginners

Never coded before? No problem. Follow these 3 parts carefully and you'll be ready in about 10 minutes .

💻 What computer are you using?

Part 1 of 3

📦 Install the Dart SDK

What is the Dart SDK? Think of it as the "engine" that makes Dart code run on your computer. Without it, your computer doesn't know what Dart is.

Go to the Dart downloads page
Open your browser and visit: https://dart.dev/get-dart
Download the Windows installer
Click the big "Windows" button and download the .exe file. It's usually called something like dart-sdk-windows-x64.zip .
Easier option — use Chocolatey (recommended)
If you have Chocolatey installed, open PowerShell as Administrator and run:
PS> choco install dart-sdk
Verify it worked
Open the Command Prompt (press Win + R , type cmd , press Enter) and type:
> dart --version
You should see something like: Dart SDK version: 3.x.x . If you do — 🎉 Dart is installed!

⚠️ Seeing "dart is not recognized"? This means Dart isn't in your system PATH. Follow this guide to add it manually.

Install Homebrew first (if you don't have it)
Open Terminal (press Cmd + Space , type "Terminal"). Paste this and press Enter:
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Install Dart using Homebrew
In the same Terminal, run:
$ brew tap dart-lang/dart

$ brew install dart
Verify it worked

$ dart --version
You should see: Dart SDK version: 3.x.x ✅

Open your Terminal
Press Ctrl + Alt + T to open a terminal.
Add the Dart repository and install
$ sudo apt-get update && sudo apt-get install apt-transport-https

$ wget -qO- https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo gpg --dearmor -o /usr/share/keyrings/dart.gpg

$ echo 'deb [signed-by=/usr/share/keyrings/dart.gpg arch=amd64] https://storage.googleapis.com/download.dartlang.org/linux/debian stable main' | sudo tee /etc/apt/sources.list.d/dart_stable.list

$ sudo apt-get update && sudo apt-get install dart
Verify it worked
$ dart --version
You should see: Dart SDK version: 3.x.x ✅

Part 2 of 3

💙 Install VS Code

What is VS Code? It's a free code editor — basically a supercharged Notepad where you'll write all your Dart code. It's made by Microsoft and used by millions of developers worldwide.

Download VS Code
Go to https://code.visualstudio.com/ and click the big download button for your operating system.
Run the installer
Open the downloaded file and follow the installation steps. The defaults are fine — just click "Next" until it's done.
💡 Windows tip: On the install options page, check both "Add 'Open with Code' action" boxes. This lets you right-click any folder and open it in VS Code — very handy!
Open VS Code
Once installed, launch VS Code. You'll see a welcome screen. That's it — VS Code is ready!

Part 3 of 3

🧩 Install the Dart Extension in VS Code

What is an extension? Extensions are like "add-ons" for VS Code. The Dart extension teaches VS Code to understand Dart — it gives you coloured code, error highlights, and auto-complete as you type.

Open the Extensions panel
In VS Code, click the puzzle-piece icon on the left sidebar — or press Ctrl+Shift+X (Windows/Linux) or Cmd+Shift+X (Mac).

🧩

🔍 Search Extensions

Dart

Dart

Dart Code • ⭐ 4.9M downloads

👆 This is what you'll see inside VS Code. Search for "Dart" and click Install.
Search for "Dart"
Type Dart in the search box. The first result should be "Dart" by Dart Code with millions of downloads.
Click "Install"
Click the blue Install button. It only takes a few seconds.
Reload VS Code if asked
VS Code may show a "Reload Required" button — click it. The extension is now active!

💡 Also install "Dart (Syntax Highlighting Only)"? No, you don't need that. The main "Dart" extension by Dart Code already does everything.

🎉 Final Check

Make Sure Everything Works

Let's confirm Dart + VS Code are talking to each other correctly.

Open VS Code's built-in Terminal
In VS Code, press Ctrl+` (the backtick key, top-left of keyboard) — or go to View → Terminal from the menu bar. A terminal panel opens at the bottom.
💡 What's the terminal? It's a text-based window where you type commands. Think of it as a direct line to your computer.
Run the version check
$ dart --version
✅ Expected output: Dart SDK version: 3.x.x (stable)

❌ If you see an error: Dart isn't in your PATH yet — revisit Part 1 .
Check VS Code recognises Dart
Look at the bottom-left of VS Code. After installing the Dart extension with the SDK present, you should see a small Dart SDK version number in the status bar. If you see it — you're 100% ready! 🚀

✅ All set? Let's start coding!

Step 1

Create Your First Dart Project

Terminal

$ dart create greeting_generator

🤔 What just happened?

The dart create command is like a project wizard - it automatically creates all the files and folders you need. Think of it as setting up a new house with all the rooms already built!

Step 2

Explore the Project Structure

📁 greeting_generator/

📁 bin/

📄 greeting_generator.dart

📁 lib/

📁 test/

📄 pubspec.yaml

Click on a file to see what it does!

Each file and folder has a specific purpose in your project.

Step 3

Write Your First Dart Code

✏️ Code Editor 🔴 Live Preview

1 2 3 4 5 6 7 8

📤 Output

Hello from my first Dart app! 🎉
My name is Student

🔍 Code Anatomy

void main() The starting point - every Dart program begins here!

print() Shows text in the console - like talking to your program

String myName A container that holds text - like a labeled box

$myName Puts a variable's value inside text - like filling in a blank

Step 4

Variables: Your Program's Memory

🎨 Variable Types Visual Guide

📝

String

"Hello World"

Like a sticky note with text

🔢

int

Like a counter or score

📏

double

3.14

Like a ruler measurement

✅

bool

true/false

Like a light switch

🎮 Try It: Variable Playground

Name: Age: Favorite Number:


         String name = "Alice";


         int age = 25;


         double favoriteNumber = 7.5;

Output: Hello Alice, you are 25 years old and your favorite number is 7.5!

Step 5

Make It Interactive: Command Line Arguments

🖥️ Command Line Simulator

$ dart run greeting_generator.dart

💡 Try: dart run greeting_generator.dart Alice 25

📊 Before vs After

❌ Without Arguments

void main() {
  print('Hello World');
  // Can't get user input!
}

✅ With Arguments

void main(List args) {
  var name = args.isNotEmpty ? args[0] : 'Guest';
  print('Hello $name! 👋');
}

🎮 Knowledge Check: Quick Quiz

Loading question...

Score: 0/5 | Streak: 🔥 0

🚀

Practice Projects

Apply what you've learned by building these hands-on projects.

📦 Project 1 📦 Project 2