flutter + dart basics part 2

Flutter + Dart, Basics | 2

Hello there ! Ready for the second part of Flutter and Dart basics ? You can find the first part right here.

Classes in Dart

Classes in Dart are quite simple and very similar to other langages. You create a blueprint for objects by giving to a class properties and methods.

To create a class in Flutter, you have to use the “class” keyword and give a name to the class (to follow the convention, the first letter is an uppercase).

Then, you declare the variables you want to put in the class, but you don’t assign any value to them. Finally, you’ll need to create a special function called a constructor to set the values of the object properties (don’t forget this class is only a blueprint !). You’ll have to pass the values in arguments when you instanciate the class and the constructor will assign these values to the properties of the object it creates.

To do so, you have to tell the constructor that this property of this instance is equal to the property passed in parameters: this.name = name;

Great, the class is ready. Let’s instanciate it now.

In the main() function, where your app is running, you can create an instance of the Player class and stock it inside a variable. The type of this variable will be the name of the class, so here it’s “Player”. You have to pass properties of the instance in the parameters, so that the class can assign the value to the properties of each instance: Player(name, age, isStudent), in the expected order and the expected type. Remember in the class, I’ve defined the properties type like so: name = String, age = integer and isStudent = boolean.

At this point, the class is created and instanciated twice. You can access the Player object properties by calling instance.property; (for example, playerOne.name) and invoke its methods the same way: instance.method();

Extended Classes

Inheritance in Dart is very similar to Javascript once again. A class can inherit of another class to specialize it. Let’s create a SuperPlayer.

SuperPlayer inherits from the Player class, so it has all its properties and methods, and it will add its own properties and methods. To create an extended class, you have to use the keyword “extends” and the name of the parent class.

As you can see, the constructor is a bit different. You have to call “super” as a reference to the constructor of the parent class and pass it the values of inherited properties. Here, I pass the values of “name”, “age” and “isStudent” to the parent class Player, and I keep the value of “winner” in the SuperPlayer constructor because this is not an inherited property, but SuperPlayer’s own property. I only have to assign this.winner = winner because the other properties are assigned by the parent class constructor.

Stateless / Stateful / Inherited widget

In Flutter, there are 3 different types of widget. If I had a good comprehension of what I’ve read about that :

  • Stateless widget cannot change its state in the time, its properties cannot change, it’s immutable.
  • Stateful widget can rebuild itself and change its state.
  • Inherited widget define a context to hold data at the root of a sub-tree and can propagate informations to every widget throughout this sub-tree. It makes me think to a store like Redux.

In this really interesting Stack Overflow thread, I found this answer about the difference between stateless and stateful widgets :

“In Flutter, the difference is that stateless widgets can be defined by all the constructor arguments alone. … Actually, a stateful widget is immutable (stateless) itself, but Flutter manages a separate state object and associates that with the widget, as explained in the StatefulWidget doc.”

It seems the difference is essentially between repaint or rebuild a widget :

“A StatelessWidget will never rebuild by itself (but can from external events). A StatefulWidget can. That is the golden rule. BUT any kind of widget can be repainted any times. Stateless only means that all of its properties are immutable and that the only way to change them is to create a new instance of that widget.”

source: Stack Overflow

Continue reading…

Next episode, I will start a brand new Flutter app to give it a try, stay connected !

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 | 2

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