DART Tutorial: The first steps

Despite its relative youth, the DART programming language has already established itself, particularly in the programming of mobile applications. Google has launched Flutter, its software development kit (SDK) which uses DART and promotes the use and distribution of this programming language. One of its strengths is that it can be used to program apps for all mobile operating systems i.e. Apple iOS, Google Android or Microsoft Windows Phone.

Learn how to program with DART: Our DART tutorial takes you through the first steps to become familiar with Google’s programming language. It’s not very hard. To learn more about this programming language, see our article on the DART language. You can find more information in our article on the Flutter Software Development Kit.

The origin of DART

Originally, DART was created to solve problems with JavaScript that, from a developer perspective, could no longer be solved in this already established programming language.

This observation was the starting point of a long search to find ways to simplify or summarize certain internal logics without compromising all the possibilities offered by this language. For example, a code in JavaScript:

getElementsById()
getElementsByTagName()
getElementsByName()
getElementsByClassName()
querySelector()
querySelectorAll()
document.links
document.images
document.forms
document.scripts
formElement.elements
selectElement.options

The same code with DART :

elem.query(‘#foo’);
elem.queryAll(‘.foo’);

Getting started with DART

A programming language is a universe that is made up in particular of a “vocabulary” making it possible to structure and design processes (algorithms). For this, the language uses a fixed number of terms, the variables, which have a precise function. In DART, we can name the variables “var”, “int”, “if”, “else” or even “while”. The combination of variables, operators, conditions, functions, and many other elements leads to the flow of the program which produces a result.

DART in practice

To learn programming with DART, our tutorial first offers simple and understandable examples that you can then develop and experiment with. Each routine begins with the call of the main function. Here’s a classic example in the programming world:

void main () {
  print("Hello World!"); 
}

The “main” function is preceded by the return type “void”, which indicates that the function returns nothing. The parenthesis “()” indicates that it is a function and the DART code is indicated in the brackets “{….}”. Here it is a command which aims to display something on the screen. Anything after the slashes “//” is considered a comment and is invisible. Comments can also be specified as “/ * this is a multiline comment … * /” as in PHP. This allows you to comment on your own code in a structured way for your own use or for other programmers, which greatly facilitates teamwork.

Note

As with Java, C, and PHP, all DART commands must end with a semicolon.

Try out the example below for yourself. For this, use the free open-source platform DartPad. This pad has the particular advantage of numbering the lines of the program and of displaying messages if an error occurs. In addition, it provides some programming examples in the drop-down menus.

In the following examples, “void main () {…}” is no longer specified in the code.

Define and use variables

Variables are used to define fixed sizes for the program. Let’s start with the numbers.

var mySize = 174;

This allows a new variable to be defined for “MySize”. Here, it is assigned the value “174”. The value of this variable remains fixed throughout the course of the program until it is actively modified by operators or functions. The “ print “ command is used to display the value of the variables.

var mySize = 174;
print(mySize);
int yourSize = 174;
print(yourSize);
double thisSize = 1.74;
print(thisSize);
dynamic oneSize = 'Onehundredseventyfor' + ': ' + '174';
print(oneSize);

Using the “print” command in DartPad, lines 3, 6, 9 and 12 show the following results:

The DART variables have type specific. These can be whole numbers (“int”) or floating point numbers (“double”). The variable type “dynamic” can take different values ​​and expressions during the course of the program. However, empty lines, tabs or paragraphs are not taken into account when processing the routine. It is for this reason that the values ​​are displayed one below the other, to the right of the console.

Assigning an incorrect value to a particular variable type generates an error message describing the error in DartPad:

int mySize = 1.74; // integer is expected, but double comes
print(mySize);

Strings

The character strings corresponding to the “ String ” data type (Warning: do not forget the capital S at the beginning), which allows any character to be processed in DART. This also enables programming of multiline text formatting with DART to be approached.

String text1 = 'this is a single line string';
String text2 = '''this is a multiline
	line string with a break''';
print(text1);
print(text2);

To display the text as a string, enclose the content with single or regular quotes: ‘or “. If the text is surrounded by a series of three single or double quotes (‘ ‘’ or” “”) it will be displayed in Dart with the original line breaks. This gives you a technique to format the display.

Advice

Under Windows , typographical quotes (English) can easily be inserted into text using the keyboard shortcuts [Alt] + 0147 (opening) and [Alt] + 0148 (closing). They are also displayed in this form in a DART string. In macOS, the keyboard shortcuts for these quotes are: [Alt] + [Shift] + [W] and [Alt] + [2].

Play with numbers in DART

From the definition of variables to calculations with variables, there is only one step. It is possible to add numbers or even expressions. To perform the calculations, DART uses arithmetic operators. As an example, consider an item in an online store that the customer would like to purchase in triplicate. In the basket function, the individual price must therefore be multiplied by “3” and the total price must be displayed. In the code below, we can see the use of different methods of grouping data and the comments in the corresponding lines:

String product = 'calendar';
String curr = 'EUR';
String isFor = 'for'; // 3 strings for later print use
double singlePrice = 7.96; // floating comma for single price
int amount = 3; // number of ordered calendars
var totalPrice = (amount*singlePrice); // calculation oft he total price with multiplier *
var invTotal = '$totalPrice $curr'; /* Merging of two variables in a new one by adding a $ sign before the old variables.*/
var result = '$amount $product\s'; //also plus adding a letter “s” for plural
print (invTotal); //creating the screen output
print (isFor);
print (result);

With strings, floating-point numbers, whole numbers and element mergers, new variables are introduced in programming. When merging two existing variables into a new variable to display on the screen, it should be noted that the predefined variables are in this case preceded by a dollar sign “$” (lines 8 and 9 in the screenshot DartPad above).

Define conditions

Conditions play an essential role in programming. Find out how to program a condition with DART. A condition always leads to a decision: if ( if ) case A occurs, the sign X is displayed on the screen; if case B occurs ( elseif ), the Y sign is displayed; when neither occurs ( else ), the Z sign is displayed. The following code is generated using the DART commands in parentheses:

var tOol = 'Glove';
if (tOol == 'Pliers' || tOol == 'Ruler') 
  { print('That is a tool.');
  } else if (tOol == 'brush') 
  { print('That is a tool.');  
  } else { print('That is not a tool.');
  }
}

In DartPad:

Expand your knowledge acquired during the DART tutorial and replace the word “glove” in the DartPad with “gripper”, “ruler” or “brush” and observe the changes in the programmed display on the console. This example can be modified at will and applied to different cases. The operator “|| Appears for the first time in this example. This double vertical bar replaces the logical “or” connector which is not used in the “OR” form in DART.

Increases and decreases

To program the next section, we need to familiarize ourselves with what is known as increments and decrement in DART. This is the gradual increase or decrease of an output value. In this example, the number 50 is modified using the operators “++” and “-”.

var upAndDown = 50;
print (upAndDown);
print('----');
++upAndDown;
print (upAndDown);
print('----');
upAndDown++;
print (upAndDown);
print('----');
--upAndDown;
print (upAndDown);
print('----');
upAndDown--;
print (upAndDown);

You can also see that it is possible to display a single string of characters without specifying a prior definition; to do this, it suffices to introduce it in the code between parentheses and quotes preceded by the “Print” function. In this case, the character string is used to structure the display of the result. With this knowledge, you are ready to program loops.

Programming loops in DART

Loops are also important program routines that are reused continuously, for example, to make comparisons with existing sizes . This is what the following “formulation” is for: we have the value A, modify this value until size (state) B is reached. Code in DART:

String myLabel = ' pieces';
var piece = 3;
while (piece < 12) {
var allThisStuff = '$piece $myLabel';
print(allThisStuff);
piece++;
  }

What does the DartPad do with this code?

In this example, it is also possible to use the conditions again if, for example, the words differ in the singular and in the plural:

int amount = 1;
var itemSing = 'blouse';
var itemPlural = 'blouses';
if (amount == 1) 
  { print(itemSing);
  } else { print(itemPlural);
  }

To learn how to program with DART, copy the codes from the examples into DartPad and modify the entire variable “quantity” so that the item “blouse” is displayed in the singular or in the plural.

Overview of DART operators

You have just familiarized yourself with some operators for programming with DART. In the table below, find the important operators available to you for programming with DART.

In the table, the value “example” is set to 35.

var exemple = 35;

Flutter is developed on Google’s own programming language called DART, which allows Flutter to use reactive styles without a JavaScript bridge. Hire our Flutter app developers who have good expertise in DART and can use it to build apps faster.