Learn Dart before you Flutter
Tags: dart, flutterio, beginners, webdev
Published: 2018-04-21 21:51:34

---
title: Learn Dart before you Flutter
published: true
description: Learn the basics of the Dart programming language
tags: dart, flutterio, beginners, webdev
cover_image: https://thepracticaldev.s3.amazonaws.com/i/dkoa4w88939ds6gp3ub4.jpg
canonical_url: https://creativebracket.com/learn-dart-before-you-flutter/
---

Given the ‘gold rush’ of tech innovations targeting the mobile, developing apps have never been easier, thanks to cross-platform solutions like Flutter, React Native, NativeScript, PhoneGap and so on.

Flutter, in particular, has managed to successfully grab the attention of the development community by allowing an expressive style that makes it a joy building UIs for mobile apps. It incorporates certain concepts familiar to modern development experiences like reactive programming and widget composition, using the Dart platform as its main base of operations.

### Prefer a video?
{% youtube F4o1tK0U5N4 %}

## So, what's Dart?

Dart is an object-oriented programming language by Google, which aims to help the developer build modern web applications. It covers client, server and now mobile with Flutter. It comes with a range of tools including a virtual machine, core libraries and package management repository, lending enough ammunition to get started with on your next project.

Although Flutter is gaining traction, it can easily obscure the beauty of the Dart platform and what it offers, independently of Flutter.

In this article we will look at how we can write a Dart program, exploring some of its language features. This will hopefully gear you up with an overview to help you see Dart shining through as you develop your next app.

→ [**Continue reading on my blog**](https://creativebracket.com/learn-dart-before-you-flutter/)

## First Steps

Here is an example of a Dart program:

{% gist https://gist.github.com/graphicbeacon/8022aeff9df872e58b1a8ecc8653be39 %}

This demonstrates the blueprint for an Order with properties and methods. The `main()` top-level function is where you would bootstrap your Dart application.

Here, I’m hoping that you’ll begin to see how the syntax looks pretty familiar with other OO languages and you’ll feel right at home if you’ve programmed in Java, C# or even JavaScript(_ES2015 and above_).

That being said, Dart comes with some language features that will surely make you more productive as a developer. See this tweak to our earlier class:

{% gist https://gist.github.com/graphicbeacon/96905070d810ace5a97da698883841b8 %}

Not much done here, however we now have a shorthand constructor that saves the repetition of reassigning the parameters passed into the class properties.

We’re also using *_adjacent strings_* by removing the plus(+) symbols from our `getIntro` method. _Oh, and prefixing class properties with underscore (\_) makes them private. It’s conventional and saves the need for typing the private keyword_.

Ok, so let’s see how far we could go with this. Our constructor parameters are defined in a positional manner. *_This means that they are required_*. Dart allows us to define parameters that are optional, with two flavours: *optional positional* and *optional named*. These essentially allow us to have better flexibility in the way we define and use them:

```dart
Order(this._id, this._reference, [date]); // optional positional
Order(this._id, this._reference, {date}); // optional named
```
And their usage:

```dart
new Order(1, 'ref1', new DateTime.now()); // optional positional
new Order(2, 'ref2', date: new DateTime.now()); // optional named
```
And surely we can map this onto our internal property, although for optional named parameters the property needs to be public:

```dart
Order(this._id, this._reference, [this.date]); // optional positional
Order(this._id, this._reference, {this.date}); // optional named
```
I hope this seems predictable so far. Let’s now enforce some type information on our properties:

```dart
int _id;
String _reference;
DateTime _date;
```
Another common feature that OO languages have is the ability to declare a constructor multiple times, differentiated by the amount of parameters you pass into it. Dart instead gives you named constructors, which essentially allows you to add a namespace to your constructor, saving you from worrying about the parameter count:

```dart
Order(this._id, this._reference, [this.date]); // normal
Order.withDiscount(this._id, this._reference, this.code); // named
```
And we’ll instantiate that like so: `new Order.withDiscount(...)`. Let’s see our refactoring so far:

{% gist https://gist.github.com/graphicbeacon/7865fc2b94b8896d79699f6371963064 %}

One last feature I would like to cover are *_method cascades_*. These allow you to use the chaining pattern for your getters and setters, made popular by JavaScript libraries namely jQuery. To demonstrate this, we'll another public property named `bookings`:

```dart
int _id;
String _reference;
DateTime _date;
String code;
List<String> bookings;
```

and when we instantiate our object we’ll do:

```dart
Order order1 = new Order.withDiscount(1, 'ref1', 'WEEKENDFTW1')
   ..code = 'WEEKENDFTW1'
   ..bookings = ['booking1', 'booking2', 'booking3'];
```
The double period(..) shows the cascades in action which always returns the instance each time. The chaining works with setters and also when you invoke methods.

Here's a complete solution:

{% gist https://gist.github.com/graphicbeacon/bd7899cddbcf3726d8c01d8ee2d9ff5b %}

## Conclusion

Thanks for reading through to the end. Learning these Dart concepts will take you far once you start building your Flutter applications, so it doesn’t come to you as a surprise.

*_To start off, why not try modifying the printed output to include the other order information?_* The complete example is readily accessible through the [online Dart editor](https://dartpad.dartlang.org/bd7899cddbcf3726d8c01d8ee2d9ff5b).

## Further reading
* [A Tour of the Dart language](https://www.dartlang.org/guides/language/language-tour)
* [Try out DartPad online](https://dartpad.dartlang.org/)
* **[Free Dart screencasts on Egghead.io](https://egghead.io/instructors/jermaine-oppong)**

---

## Sharing is caring 🤗

If you enjoyed reading this article, please share this through the various social channels. Also, check out and [**subscribe to my YouTube channel**](https://youtube.com/c/CreativeBracket) (hit the bell icon too) for videos on Dart.

[**Subscribe to my email newsletter**](http://eepurl.com/gipQBX) to download my Free 35-page **Get started with Dart** eBook and to be notified when new content is released.

Like, share and [**follow me**](https://twitter.com/creativ_bracket) 😍 for more content on Dart.