Introduction to Dart

By Syncfusion®, Inc. · Last updated

What Dart is, why Google made it, how it works with Flutter, where it is used, how to set it up, and how to write your first program with comments.

What Is Dart?

Dart = a programming language made by Google.

Programming language = a set of words and rules you use to give instructions to a computer.

With Dart, you can build:

  • apps for phones
  • websites
  • apps for laptops and desktops
  • programs that run on servers

You write the code once, and Dart can make it work in all these places.

Simple lesson: Dart is one language you can use to build apps for almost every screen.

A Real-World Example

Your school wants an app. Students want it on their phones. Parents want it on a website. The office wants it on the school computer.

With Dart and Flutter, one team writes one code for all three.

Boxes with a Run button run your code right here in your browser, with the course's own Dart runner.

  • Left side: the code. You can edit it.
  • Right side: the Input box and the Output.
  • The runner supports the Dart taught in these early lessons. For full Dart, use DartPad or the Dart SDK.

What You Will Learn

In this lesson, you will learn:

  1. What Dart is, why Google made it, and how it works with Flutter.
  2. The main features of Dart.
  3. Where Dart is used.
  4. How to set up Dart and run a program.
  5. How a Dart program is built, and how to write comments.

Why Dart Was Created

Google showed Dart to the world in 2011.

Google had three problems with the languages it used to build apps:

  • Big apps became messy. Mistakes were found late, when users saw them.
  • Apps were slow to start. Users waited too long.
  • Each screen needed its own language. Phone, web and desktop teams wrote the same thing again and again.

Dart was made to fix these problems:

  • Easy to read, so new learners pick it up quickly.
  • Finds mistakes early, before the app reaches users.
  • Runs fast, on phones, browsers and servers.

How Dart Grew

YearWhat happened
2011Google announces Dart.
2013Dart 1.0 is released.
2018Flutter 1.0 is released, and it uses Dart.
2021Dart adds null safety, which stops a very common kind of crash.
2023Dart 3 is released. Null safety is now always on.

Simple lesson: Google made Dart to build large, fast apps without writing the same code many times.

Dart and Flutter

Many people mix up Dart and Flutter. Here is a small story first.

Think about writing an essay in English.

  • English is the language. You use it to write every sentence.
  • A ready-made essay kit gives you a title page, headings and borders.
  • You still write the sentences yourself, in English.
  • The kit only saves you time.

Now the mapping:

  • Dart = the language. Like English.
  • Flutter = a toolkit of ready-made screen parts, written in Dart. Like the essay kit.

What Each One Does

  • Dart gives you the rules: how to store values, make decisions and repeat work.
  • Flutter gives you buttons, text boxes, lists and pages.
  • A Flutter app is written fully in Dart.
  • Dart also works without Flutter, for example for servers and command-line tools.

Learn Dart first, then Flutter.

Flutter is much easier when the Dart rules are already clear to you.

Simple lesson: Dart is the language. Flutter is a toolkit built with Dart for making screens.

Features of Dart

Here are the five features you will notice first.

1. Easy to Read

Dart looks like other popular languages, such as Java, C# and JavaScript. If you learn Dart, those languages feel familiar too.

2. Type Safe

Type = the kind of a value, like a number or some text.

Dart checks that every value is the right type before the program runs. So many mistakes are found early, on your computer, not on a user's phone.

3. Null Safe

Null = "no value at all".

Using a value that is not there is a very common cause of app crashes. Dart does not let a value be empty unless you allow it. You will learn this in Null Safety.

4. Fast to Build and Fast to Run

Dart has two ways to turn your code into a running program.

  • JIT (Just-In-Time) = Dart prepares the code while it runs. Changes show in about a second.
  • AOT (Ahead-Of-Time) = Dart prepares all the code before it runs. The final app starts fast.

Hot reload = see your change in a running Flutter app in about a second, without starting again. Hot reload works because of JIT.

5. Runs Almost Everywhere

The same Dart code can become a phone app, a website, a desktop app or a server program. The next section shows how.

Simple lesson: Dart is easy to read, finds mistakes early, and is fast while you build and when users run it.

Where Dart Is Used

Dart is used in four main places.

Click each tab and compare:

  • The tool in the middle box.
  • What your code becomes in the last box.

Mobile Apps

  • Built with Flutter.
  • One code makes an Android app and an iPhone app.
  • This is the most common use of Dart today.

Websites

  • Built with Flutter web, or with plain Dart.
  • Dart is turned into JavaScript or WebAssembly, which browsers understand.

Desktop Apps

  • Built with Flutter for Windows, macOS and Linux.
  • Good for tools used in offices and schools.

Backend (Servers)

Backend = the part of a system that runs on a server, not on your screen.

  • Dart runs on servers without Flutter.
  • It can send data, like marks or timetables, to an app.

Simple lesson: Dart runs on phones, websites, desktops and servers. Flutter is used for the first three.

Setting Up Dart

You can run Dart in two ways:

  • On your computer, after installing the Dart SDK.
  • In the browser, with DartPad. No install needed.

SDK (Software Development Kit) = a set of tools to write and run programs in a language.

Step 1: Install the Dart SDK

Pick your computer's system:

  • Windows: install with Chocolatey: choco install dart-sdk
  • macOS: install with Homebrew: brew tap dart-lang/dart, then brew install dart
  • Linux: follow the steps on dart.dev/get-dart

If you install Flutter, Dart comes with it. You do not need to install Dart again.

Step 2 to Step 5: Check, Create and Run

Click Next step to walk through the commands in a terminal.

Terminal = a window where you type commands, like Command Prompt or PowerShell on Windows.

Here are the commands again:

dart --version
dart create hello_app
cd hello_app
dart run
  • dart --version shows which Dart version is installed.
  • dart create hello_app makes a new project folder called hello_app.
  • cd hello_app moves you inside that folder.
  • dart run runs the program in the bin folder.

What Is Inside a Project

File or folderWhat it holds
bin/hello_app.dartThe program that dart run starts.
lib/Code that other files can reuse.
test/Code that checks your code.
pubspec.yamlThe project's name and the packages it uses.

You will learn pubspec.yaml in Libraries.

Using DartPad

DartPad = a free website, dartpad.dev, where you write and run Dart in the browser.

  • Left side: your code.
  • Run button: runs it.
  • Right side: the output.

It is the fastest way to try a small idea. It is also great when you cannot install anything, like on a school computer.

DartPad cannot read or write files on your computer.

For lessons about files, like File Handling, use Dart installed on your computer.

Common Setup Problems

ProblemWhy it happensHow to fix it
dart is not recognized or command not foundThe terminal cannot find Dart.Close the terminal and open a new one. If it still fails, add Dart's bin folder to your PATH.
dart --version shows an old versionAn older Dart is installed too.Remove the old one, or update with choco upgrade dart-sdk or brew upgrade dart.
Could not find a file named "pubspec.yaml"You ran dart run outside the project.Run cd hello_app first.
Project name error in dart createThe name has capital letters, spaces or dashes.Use small letters and underscores, like hello_app.

PATH = a list of folders where your computer looks for commands.

Simple lesson: install the SDK, check the version, create a project, then run it. Or just open DartPad.

Your First Dart Program

Here is the smallest useful Dart program. Press Run.

Your first Dart program

void main() {
  print('Hello, Dart!');
}

The output is:

Hello, Dart!

print() = shows text in the output.

The text goes inside quotes: 'Hello, Dart!'.

The Parts of the Program

Click each part to see what it means.

The main() Function

Function = a named group of instructions.

main() = the function where every Dart program starts.

  • Dart looks for main() first.
  • If there is no main(), the program cannot start.
  • void means main() gives nothing back.

Statements

Statement = one instruction for the computer.

  • print('Hello, Dart!'); is one statement.
  • Every statement ends with a semicolon ;.
  • A missing ; is the most common beginner error.

Code Blocks

Code block = a group of statements inside curly braces { }.

  • { opens the block.
  • } closes the block.
  • Everything inside belongs to main().
  • Every { needs its own }.

We indent the lines inside a block by two spaces. Dart does not need the spaces, but they make code easy to read.

Simple lesson: a program starts at main(), runs the statements in its block, and each statement ends with ;.

How Dart Runs Your Program

Dart runs statements from top to bottom, one at a time.

Press Play and watch the output grow.

Look at two things:

  • The highlighted line is the one running now.
  • The output gets one new line for each print().

Now try it yourself. Change the order of the lines, then press Run.

Statements run from top to bottom

void main() {
  print('Good morning, class!');
  print('Today is Maths day.');
  print('Bring your geometry box.');
}

A Missing Semicolon

Run this code. One ; is missing.

One semicolon is missing

void main() {
  print('Name: Arjun')
  print('Class: 8B');
}

Dart stops and says something like Expected ';' after this.

  • The error message gives a line number.
  • Go to that line and add the missing ;.

Typing Input into Your Program

A program can also read what you type.

  • import 'dart:io'; gives your program access to the keyboard input.
  • stdin.readLineSync() reads one line of input.

Type a name in the Input box, then press Run.

A program that reads your name

import 'dart:io';

void main() {
  print('What is your name?');
  String? name = stdin.readLineSync();
  print('Welcome to Green Valley School, $name!');
}
  • String? means "some text, or nothing". You will learn it in Null Safety.
  • $name puts the value of name inside the text. You will learn it in Strings.

Simple lesson: Dart runs lines in order, and it stops if a line breaks a rule.

Comments

Comment = a note in your code for people. Dart skips it.

Comments help you:

  • explain why the code does something
  • remember things when you open the code later
  • switch a line off for a moment, without deleting it

Dart has three kinds of comments.

Single-Line Comments

Start with //. Dart skips everything after it, up to the end of the line.

Single-line comments

void main() {
  // Print the student's name
  print('Name: Priya');
  print('Class: 7A'); // A comment can also go after code
}

Multi-Line Comments

Start with /* and end with */. Everything between them is skipped, across many lines.

A multi-line comment

void main() {
  /* This program prints a report card.
     Marks are out of 100.
     Update them at the end of each term. */
  print('Maths: 92');
}

Documentation Comments

Start with ///. Put them just above a function or class.

  • Editors like VS Code show them when you point at the name.
  • The dart doc tool turns them into web pages of help.

A documentation comment

/// Prints a welcome message for new students.
void welcome() {
  print('Welcome to Green Valley School!');
}

void main() {
  welcome();
}

See What Dart Skips

Switch to What Dart runs and compare:

  • Comment lines are crossed out, because Dart skips them.
  • Code lines stay, and only they print something.

Easy way to remember

  • // = one line
  • /* */ = many lines
  • /// = help for others who use your code

Simple lesson: comments are notes for people, and Dart never runs them.

TL;DR

  1. Dart = a programming language by Google for phones, web, desktop and servers.

    • Flutter = a toolkit of screen parts, written in Dart.
  2. Features = easy to read, type safe, null safe, fast (JIT and AOT), runs almost everywhere.
  3. Setup = install the SDK, or use DartPad in the browser.

    • dart --version, then dart create hello_app, then dart run
  4. Program = starts at main().

    • Statement = one instruction, ending with ;.
    • Code block = statements inside { }.
  5. Comments = //, /* */ and ///. Dart skips them.

Common mistakes

MistakeWrong ideaCorrect ideaWhat goes wrong
No main() functionDart starts at the first lineDart starts at main()The program cannot start.
Missing ;Line breaks end a statementEvery statement ends with ;Expected ';' after this.
Missing }Dart can guess where the block endsEvery { needs a }An error at the end of the file.
Print('Hi');Capital letters do not matterDart cares about case: printMethod not found: 'Print'.
Text without quotesprint(Hello); prints HelloPut text in quotes: 'Hello'Undefined name 'Hello'.
Dart and Flutter are the sameFlutter is a languageFlutter is a toolkit written in DartConfusion when reading guides and errors.
dart run outside the projectIt works from any folderRun it inside the project folderCould not find a file named "pubspec.yaml".

Check Yourself

Exercises

What to Remember

  • Dart is a language by Google. Flutter is a toolkit written in Dart.
  • Dart runs on phones, websites, desktops and servers.
  • dart create makes a project, and dart run runs it. DartPad needs no install.
  • Every program starts at main(). Statements end with ; and sit inside { }.
  • Comments are notes for people. Dart skips them.

Next: Variables and Constants. You will learn how to store values like names and marks, and use them in your program.