Home Flutter Books Dart Apprentice

1
Hello, Dart! Written by Jonathan Sande

This first chapter is designed to help you set up your development environment so that you can get the most out of the following chapters.

There are several different tools that Dart developers use when building apps:

  • DartPad: This is a simple browser-based tool for writing and executing Dart code. It’s available at dartpad.dev.

DartPad
DartPad

  • IntelliJ IDEA: IntelliJ is a powerful Integrated Development Environment, or IDE, that supports Dart development through a Dart plugin. Although Android Studio, a popular IDE for Flutter development, is built on IntelliJ, this book recommends that you use plain IntelliJ for pure Dart projects. The IntelliJ Dart plugin makes this an easier task than doing it in Android Studio.

IntelliJ IDEA
IntelliJ IDEA

  • Visual Studio Code: Also known as VS Code, this is a lightweight IDE with a clean and simple interface. It fully supports Dart development with its Dart extension.

Visual Studio Code
Visual Studio Code

This book uses Visual Studio Code for all of the examples contained within, but if you have another IDE you prefer, then by all means, continue using that one for your Dart development. If you don’t have a preference, though, I think you’ll find using VS Code an enjoyable experience. VS Code also supports Flutter development through an extension, so you won’t be limiting yourself for future Flutter development if you choose to go the VS Code route now.

Installing Visual Studio Code

Visual Studio Code is a cross-platform, open-source IDE from Microsoft. It runs on Windows, MacOS and Linux, so unless the only device you’ve got at your disposal is a mobile phone, then you’re covered!

Note: If you do only have a mobile phone, don’t despair! You can run the majority of the code examples in this book on dartpad.dev, which should work fine in any modern mobile browser.

Download Visual Studio Code at code.visualstudio.com, and follow the directions provided on the site to install it.

You’ll also need the Dart SDK, which you’ll install in the next section.

Installing the Dart SDK

The Dart Software Development Kit, or SDK, is a collection of command line tools that make it possible to develop Dart applications.

Go to https://dart.dev/get-dart and follow the directions on that site to download and install the Dart SDK on your platform. Make a note of the folder to where you installed the SDK; you’ll need that in just a minute.

Note: The path where Dart is installed will most likely be different to the folder from which you run the installation commands. Check terminal when the process finishes, as it will indicate the exact path where the SDK was installed.

Verifying the Dart SDK installation

After you’ve installed Dart, run the following command in a terminal to ensure that it’s working:

dart --version

You should see the current Dart version displayed; at the time of this writing it was 2.9.0.

Browsing the contents of the SDK

Now go to the Dart SDK installation folder that you noted earlier, and look at the contents of the bin folder. You’ll see the tools that form part of the SDK. These are a few important ones to note at the moment:

  • dart: This is the Dart Virtual Machine, or VM. The Dart VM compiles your code right before it’s needed. This is known as just-in-time, or JIT, compilation, which will let you make small changes to your code and rerun it almost instantly. This is especially useful for applications like Flutter where you’ll need to make lots of little changes as you refine the UI.
  • dart2js: Web technologies have always been an important consideration for Dart. The dart2js tool fully converts Dart code to JavaScript.
  • dart2native: This tool compiles Dart code into a native executable program for Windows, Linux or MacOS. In contrast to JIT, this is ahead-of-time, or AOT, compilation, and it optimizes the code in ways that JIT compilation can’t.
  • dartfmt: You know how indentation in your code will inevitably get messed up? This nice little tool will automatically fix it.
  • pub: This tool lets you manage third-party packages for use in your Dart project.

Now that you have the Dart SDK installed, you’re going to use the Dart VM to run a few lines of code.

Running Dart on the command line

Find or create a convenient folder on your computer where you can save the Dart projects that you create in this book. Create a new file in that folder and name it hello.dart.

Then add the following Dart code to that empty file:

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

This creates a Dart function named main(). Inside that function, you call another function, print, which displays the text Hello, Dart! on the screen.

Save the file. Then run the following command in the same folder as hello.dart:

dart hello.dart

You should see the following output in the console:

Hello, Dart!

Congratulations! You’ve built and run your first Dart program.

Next, you’ll learn how to enable Dart in VS Code.

Installing the Dart extension for VS Code

Open Visual Studio Code, go to File ▸ Open… and choose the hello.dart file that you just created.

If VS Code displays a pop-up with a message telling you about extensions that can help with .dart files, click Search Marketplace.

Otherwise, on the left hand side you’ll see a vertical toolbar called Activity Bar. Click the Extensions icon, which looks like four boxes. Then type dart in the search area. When the Dart extension appears, click the Install button to install it.

Next you’ll learn how to run your Dart file directly from VS Code.

Running Dart in VS Code

Click the Explorer icon at the top of the Activity Bar. Then click your hello.dart file.

There are a number of different ways that you can run your Dart file. Here are three of them:

  1. Choose Run ▸ Start Debugging from the menu.
  2. Press F5.
  3. Click the word Run that appears directly over the main() function.

In this book, I won’t explicitly tell you which way to run your code; feel free to choose the option you find most familiar or comfortable.

Run the program and you’ll see Hello, Dart! appear in the debug console.

Exploring the VS Code UI

This is a good opportunity to explore the various parts of the Visual Studio Code user interface.

The numbers below correspond to the various areas of the user interface:

  1. Activity Bar: Choose which content to show in the side bar.
  2. Side Bar: The Explorer is currently displaying the current project and file.
  3. Editor: Write your Dart code here.
  4. Panels: Show program output, run terminal commands, and more.
  5. Status Bar: Display information about the current project.

So far, you’ve learned how to run a single Dart file from the command line and also run it in VS Code. In a normal project, though, you would have multiple files that comprise your project. You’ll learn how to set up a full project in the next section.

Pub and Stagehand

Pub is the package manager for Dart; you use it to add Dart code that other people have written into your own project, which can save you an incredible amount of time as you don’t have to write it yourself. A bundle of third-party code is generally known as a package. A package can contain one or more libraries, whereas a library is a collection of Dart classes or functions that are spread over one or more files. You’ll learn more about packages and libraries later in the book.

You can browse the packages available to you on Pub by visiting pub.dev.

Stagehand is one of those packages, and it’s a useful tool you can use to create all the common folders and files you would want in any new Dart project. VS Code and other IDEs use Stagehand behind the scenes when they create new Dart projects, but you can use it straight from the command line.

Activating Stagehand

To activate Stagehand, run the following line in your terminal:

pub global activate stagehand

You saw pub earlier when you were looking at the contents of the Dart SDK; it’s the command line tool that handles communication with the Pub repository. The global keyword tells pub to install Stagehand globally so that you can run it from any folder location.

Note: If you receive a warning about the executable location not being in your path, follow the directions provided to add it to the path on your system. This is required if you want to use Stagehand on the command line. However, VS Code is still able to find Stagehand and start new projects, even if you don’t add it to your system path.

Creating a Dart project on the command line

Now that you have Stagehand activated and added to your path, you can use it to create a Dart project from the command line.

Choosing a location

First, choose a location under which you’d like to create your project. Then create a new folder for your project, and finally navigate into that new folder by running the following commands in your terminal:

mkdir hello_dart_project
cd hello_dart_project

Creating and running the project

Next, create the project by running the following command:

stagehand console-simple

Stagehand creates a simple Dart project with some default code. Run that project now with the following commands:

dart bin/hello_dart_project.dart

You’ll see the text Hello world!, which is created by the project that Stagehand generated.

The structure of a Dart project

Take a look at the structure and contents of the hello_dart_project folder:

The purposes of each item in that folder are as follows:

  • bin: Contains the executable Dart code.
  • hello_dart_project.dart: Named the same as the same as the project folder, Stagehand created this for you to contain your Dart code.
  • .gitignore: Formatted to exclude Dart-related files that you don’t need if you’re going to host your project on GitHub or another Git repository.
  • analysis_options.yaml: Holds special rules that will help you detect issues with your code, a process known as linting.
  • CHANGELOG.md: Holds a manually-curated Markdown-formatted list of the latest updates to your project. Whenever you release a new version of a Dart project, you should let other developers know what you’ve changed.
  • README.md: Provides a basic (or not-so-basic) description of what your project does and how to use it. Other developers will appreciate this greatly.
  • pubspec.yaml: Contains a list of the third-party Pub dependencies you want to use in your project. The name “pubspec” stands for “Pub specifications”. You also set the version number of your project in this file.

Note: YAML stands for “YAML Ain’t Markup Language”, one of those recursive acronyms that computer programmers like to amuse themselves with. It’s a clean and readable way to format configuration files, and you’ll come across this file type often in your Dart career.

To create this structure, you used the console-simple option of Stagehand. However, if you had used stagehand console-full instead, it would have given you the following directories and files:

This gives you two additional directories: lib and test. In larger projects, you’ll have many .dart files that you’ll organize under the lib folder. You’ll also likely want to have tests to run against your Dart projects, and you can place those in the test folder.

For your work in this book, creating simple console projects will be enough. If you wish to create full console projects, though, it won’t make a difference to your progress through this book.

You’ve created a project from the command line, but it’s also possible to create projects from within VS Code. The next section will walk you through this process,

Creating a new Dart project in VS Code

To see how to create projects in VS Code, you’ll recreate the same simple console project in VS Code that you previously created from the command line.

To start, delete the hello_dart_project folder and its contents.

The Dart extension in VS Code works with Stagehand to make it easy to create a new Dart project.

You can create a new project from the Command Palette. To access the Command Palette, either go to View ▸ Command Palette… in the menu, or press the shortcut Command+Shift+P on a Mac or Control+Shift+P on a PC.

Start typing “dart” to bring up a list of matching commands, then choose Dart: New Project.

Next, choose Simple Console Application from the list.

As before, name your project hello_dart_project, and choose a location to save the project folder that VS Code will create.

Browsing the generated code

Open the file hello_dart_project.dart, and you’ll see it contains the following code:

void main(List<String> arguments) {
  print('Hello world!');
}

The List<String> arguments portion is only necessary when creating command-line apps that take arguments. For example, take a look at the following imaginary terminal command that prints information about a country:

lookup -n spain

The command-line app name is lookup and the arguments are -n spain.

Since you won’t be creating command-line apps in this book, you can remove the arguments portion to simplify things. Thus, replace the contents of hello_dart_project.dart with the following code:

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

Running your project

Still in VS Code, use one of the three methods you learned earlier to run the project. You should see Hello, Dart project! printed to the debug console.

Excellent! You’re all set to explore Dart further in the rest of this book.

Key points

  • Visual Studio Code is an Integrated Development Environment that you can use to write Dart code, when coupled with the Dart extension.
  • The Dart SDK provides the underlying tools needed to compile and run Dart apps.
  • Dart code run from the command line or in VS Code uses the Dart Virtual Machine.
  • The VS Code window is divided into the Activity Bar, Side Bar, Editor, Panel, and Status Bar.
  • Pub is the package manager that Dart uses to add third-party source code to your projects.
  • Stagehand is a tool to help you create all the files and folders typically needed in a new Dart project.

Where to go from here?

If you’re new to Visual Studio Code, there’s a lot more to learn about it. You can find many instructional resources by going to the Help menu.

Most of the time, you’ll be writing Dart code using VS Code on a computer, but if you find yourself waiting in a long line at the supermarket, you can while away the time running Dart code in DartPad, which will work on your mobile phone or tablet. You can also try out a bunch of sample Dart and Flutter projects at dartpad.dev.

Now that you have your programming environment all set up, you’ll go on to start writing real Dart code in the next chapter. See you there!

Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.

Have feedback to share about the online reading experience? If you have feedback about the UI, UX, highlighting, or other features of our online readers, you can send them to the design team with the form below:

© 2020 Razeware LLC