Flutter + Dart basics part 1

Flutter + Dart, Basics | 1

Hi, this is my first blog post and I will start with mobile app development, because this is what I’m learning right now for the needs of my internship. I just discovered Flutter, which is working with Dart language.

Flutter is an easy way to code native apps for android and iOS, with only one code. It will compile Dart code in native android and iOS apps, and release the final app on both plateforms. Dart is perfectly shaped for native apps developement, because of its two modes AOT (Ahead Of Time) and JIT (Just In Time). Where AOT offers the possibility for generating native application for each plateform (not only android and iOS, it seems that Windows/Mac/Linux are also supported), JIT mode helps development with a really cool hot reload functionality. React people know.

From what I’ve seen until now, it’s quite easy to learn and use. Flutter works like a tree of widgets. It strangely looks like… a DOM. For web guys, it should be easy to start with a few tips you can find on the (really great) documentation.

I’ve started with the tutorial given in the doc, to do a simple app that generates start up names infinitely on scrolling. I think this tutorial is fun but not clear enough, I’ve not understand how to start my own app while doing this one, neither how to code simple things. I just copied and pasted big pieces of code, without enough explanations of these to understand how things worked out.

So, let’s dive in the basics of Flutter !

First, install. Nothing really difficult here. You’ll need to install Android Studio and get the Flutter SDK. You can download Flutter here and follow the tutorial. Don’t forget to update the path to run Flutter commands in the Windows console. I’m working on Windows 10 and Linux Mint, I installed Flutter on Windows to give it a try. It’s quite easy to set up. I use Visual Studio Code to use Flutter, so I added Flutter and Dart plugins.

Done ? You’re ready to go !

Widgets

Flutter is shaped like a tree of widgets. Almost everything inside the app is a widget, nested in another widget. Dart is an object oriented programming langage, so actually, a widget is just the Dart’s word for a class.

There are a lot of prepared widgets in Flutter, you can take a look at the widget catalog here. A widget has a bunch of properties to set up how it looks and how it’ll behave.

The text widget => properties : data, maxLines, semanticsLabel, softWrap, textAlign, style….

Types

Flutter is based on Dart programming langage, which is a statically typed langage. You can declare types, but this is optionnal because Dart can infer it.

According to the user manual, Dart supports the following types:

  • numbers (integer | double)
  • strings
  • booleans
  • lists (= arrays)
  • sets
  • maps
  • runes (for expressing Unicode characters in a string)
  • symbols
Dart code snippet:
String name = "Joshua";
int age = 36;
bool isGeek = true;

print(name);

You declare the type first (String), then the name of the variable (name), and its value (= “Joshua”). “print” is the Dart’s “console.log”, a simple way to display output.

You cannot change the type later, but you can override the value with another from the same type. You can also use the dynamic type to explicitly say that no type is expected, but it seems that this is not really a good practice.

Everything you can place in a variable is an object. Every object is an instance of the “Object” class, and inherits from it. This is the root of Dart class hierarchy, so every other Dart class is a subclass of Object.

Functions

Functions should have a type too, it refers to the type of the value we expect it to return :

code snippet

You have to return the expected type of value, or you’ll have an error.

void main() {…} is the top level function where app execution starts. It is a required function.

Lists

Lists are another Dart thing, which is quite the same that an array in Javascript. You still have to define what type of values are expected in that list, so you declare a list this way: list <type> name = […]

Lists are built-in Dart types, referring to an abstract class “List”, so you can access to its methods. Lists are iterable, the documentation describes it as “an indexable collection of objects with a length”. Subclasses of this class implement different kinds of lists (growableList[…], fixedLengthList[…], see the List class in the user manual).

code snippet

This is all for this first post. I’ll come back on Flutter basics in the next one. Thanks for reading !

Elya

Hi ! I'm a junior web developper and UX designer. Living in France, mother of 2, bookworm, cats lover, JS girl, yada yada yada. The usual stuff. Let's talk about code !

One thought on “Flutter + Dart, Basics | 1

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

back to top