Watch this episode for free — or access the full course as a raywenderlich.com Professional Subscriber. Learn more here
Programming in Dart: Fundamentals
Part 1: Fundamentals Meet Dartpad & Write Comments
— Flutter & Dart

Lesson Complete

Play Next Lesson
Next

Meet Dartpad & Write Comments

This video was last updated on Apr 26 2022

Learn how to use Dartpad - an interactive tool for writing Dart code, then learning how comments work.

Contributors

The Dart programming language was written 2011 by Google as alternative way to write Javascript.

Javascript was too entrenched and thus the language didn’t catch on, but it was later repurposed to write native applications. This evolution made Dart into an just in time compiled language as well as ahead of time compiled language.

Well, what does that even mean? Well, when we write code, we write it in a specialized language that is designed to be compact and human readable. The computer doesn’t understand it. So we have a tool known as a compiler.

The compiler will read our code, and then translate it into instructions that the computer can understand and actually execute. Compiling can be a slow resource intensive process so often times, developer will compile the language into machine instructions and then hand off that binary.

When you download an app from the app store, that code has been compiled for you, so all you have to do is just run it. This is known as Ahead of Time compiling.

Now when you compile your program, you are compiling it for a specific CPU and platform. There’s actually another way to compile a program, and that’s compiling the code as the program is running otherwise known as Just In Time Compiling.

This makes for the code to be very fast, but since the target platform is doing the compiling itself, it allows you code to be platform independent. You may write your code to work on Windows, but by utilizing Just in Time compiling, your program can now run on Mac or Linux.

Most languages are either Ahead of Time compiled or Just in Time compiled.

Dart is special in that it is both. You can even write code in Dart that can be cross compiled into Javascript which can then be run in a browser. Conversely, you can compile your code into a binary. This is what allows us write mobile apps in Dart.

Why is this important? Because we can write Dart in a tool called DartPad. This allows us to actually write Dart code in a browser and see the results in realtime. This is also what allows us to write Flutter code and instantly see the results. Dart is an incredibly flexible language so let’s put it to work.

Open up your browser and head on over to dartpad.dev. You’ll see a very simple editor with some dart code already written in it. The left pane allows us to write code. The right hand pane gives us both our console and documentation. Press the run button.

It’ll take a moment, but you’ll see the results print out in the console. You can also read documentation about certain commands. Click the print command. You’ll see the documentation appear in the documentation pane along with a link to the official documentation.

Dartpad isn’t just for text. Click the Samples dropdown and select the implicit animations option. Now follow the instructions. Click a disk and you’ll see them animate. The code is on left hand side. It should look a little familiar. That’s because it is flutter code. This makes for an excellent tool to test and play around with Flutter.

Now, click the New Pad option. Choose Dart as the language and click Create. Okay. We are back where we started. First delete everything in the main function so it looks empty.

void main() {

}

Don’t worry about what a function or method is. That’s why you’re taking this course, and you’ll learn about functions soon enough. Just know that all your dart code goes between the two braces. Add the following:

void main() {
    String welcomeMessage = 'hello world';
}

Here we defined a variable called welcomeMessage with some simple text. Remember, all our statements must end in a semi-colon. We’ll also get a squiggle. This a warning letting us know that the variable isn’t being used. Let’s print it out.

void main() {
    String welcomeMessage = 'hello world';
    print(welcomeMessage);
}

Now click the run button! And voila - we get our hello world message. Now Dart uses type inference to make our code easier to read. In the case of the welcome message, it is pretty clear we are working with a string by the single quotes. So, we can just replace the String type with a var.

void main() {
    var welcomeMessage = 'hello world';
    print(welcomeMessage);
}

Var lets us know that the text can change. Lets add some more text. We will use the plus equals operator to add some additional text.

welcomeMessage += ', it is good to see you';

Here we just appended some more text using the plus sign. Now click the run button. This works because we can change our variable. But let’s make another change.

const welcomeMessage = 'hello world';

This time, we get an error because we set the variable to be unchanging. That is, a constant. Later, we try to change it which causes the error. Let’s correct this error by turning it back into a variable.

var welcomeMessage = 'hello world';

Our variables can also contain numbers such as the following:

const boilingPoint = 100;

Here we defined the boiling point to a hundred degrees. This is a whole number. Notice we didn’t use single quotes. If we did, the number would be treated like a string. We can also define decimal numbers otherwise known as doubles.

double gradePointAverage = 3.5;

Here we define a grade point average. Notice it is a type of double. Again, the decimal point indicates that it is a double so we can change this back to a var.

var gradePointAverage = 3.5;

Now, when you write Swift code, it’s really common to want to document what you’re doing, for yourself or someone you’re working with. Or maybe you want to add a note to remind yourself do something later. Or maybe you just want to put some dividers in there with some text to help organize your code.

But these things aren’t code; so how can you tell the Dart compiler to ignore these things? Basically, you want to add text that the Dart compiler will ignore. A comment is exactly that - text that is ignored by the compiler.

To add a comment, it’s as simple as typing two forward slashes followed by a message

// This space is for rent

Now click the run button. Our comment is ignored. Mind you this only works on one line. If you add a line break in the middle of your comment, you’ll get an error.

  // This space is
  for rent

For cases when you want to write lots of lines, you can write a multi-line comment. Start by typing a forward slash and an asterisk.

/*

All subsequent lines will be ignore until you put a closing comment.

/*
 * This space is 
 * for rent
 */

Using comments, you comment out code that you don’t want to run. For example, you man not want that print statement to run. Simply put it in a comment and now it won’t run.

// print(welcomeMessage);

If you comment out code, you should only do so temporarily! Remember to delete any unused or unnecessary code from your projects. Commented out code that’s left hanging around in your project is only going to confuse you in the future, as well as anyone else working on projects with you.

Reviews

Comments