One of the strengths of Flutter as explained in the documentation is its system of HOT RELOADING, which allows the slightest change in the code to refresh the interface (and therefore the device on which the application is launched) without losing data or without modifying the state of the application

As we can see (for you it will be on your phone) the default project is a page with the title “Flutter Demo Home Page” which includes in its body a button (+) and a text that is incremented when the we click on the button.

In the doc, we are told that to test the hot reloading, you have to go to the / lib folder and the main.dart file to edit it.

For example, we will modify the text written in the middle of the screen, I found it on line 95:

So I replace the string, and I save (CTRL + S)

Honestly it did not take a second for the interface on my phone is refreshed, it’s pretty cool (but hey I’m used with React, Angular or Vue so far no effect Wahhooo)

We will test the little tutor made in google part 4 of the documentation. Until then I do not really know what the Dart language offers, but it is indicated that it is similar to object-oriented languages.

So a bit similar to Java. From what I see if we are familiar with the loops (for, while) conditions (if else) we can succeed this tutorial easily. This is what we will see

First step, replace the main.dart code with what we are offered, namely:

I forgot to specify but the first Debug: Start Debuging, the execution time was extremely long, and now it’s super fast, I think it’s only the first time!

According to the documentation, the code above makes it possible to create a “Material App” at first, as can be seen in line 8. Material Design is the kind of google graphic design on these web and mobile applications.

As in Javascript it is apparently possible to use Arrow Function (line 3). This is the case of the “main ()” method.

The application inherits (as in Java) StatelessWidget which allows to specify that the application itself is a widget. In Flutter most things are widgets. Including alignments, padding, and layout in general.

The application has a Title and a home object which is a Scaffold (also a widget) from the “Material” library.

It is this “object” that provides the main bar at the top of the screen (appBar) as well as the content of the page (body). Each has a widget in its properties (here we find 3 widgets: AppBar, Text and Center)

The main task of a widget is to provide a build method that describes how to display the widget according to others.

Until then I have the impression to see HTML or XML, I imagine with this structure:

MaterialApp

_Scaffold

___AppBar

______Text

___Center

______Text

If you know what I mean ! In any case I will rename to my ‘sauce’:

In the doc (providing a tutorial from codelabs.developers.google.com)

We are told how it is possible to download dependencies in the manner of a package.json Moreover there is a site to recover dependencies for Flutter which is called Pub.dev

As I said, like a package.json and package-lock.json we find the pubspec (.lock and .yam)

We will try to install the package “english_words” (which includes the 100 most used words in English from what I understood, I read quickly)

It suffices to add in the pubspec.yaml file in the dependencies section, the dependency that we want to install, here it will be:

english_words: ^3.1.0

After a CTRL + S I see that in the console an installation was done:

I think it worked, I hope! We must then import into our main.dart package previously downloaded. I admit that auto completion is not really bad on imports.

There I am already a little lost. The import cava, against the statement line 9 of the variable wordPair I want it to create random chains but the link between english_word and the WordPair object is not very obvious to determine by reading the code.

We must also add line 17 the call to this variable wordPair instead of our string previously declared. In addition we add a .asPascalCase that transforms this string into Pascal Case

(The Pascal Case for info is like camel case but with each first letter of each word in upper case)

Whenever I save (ctrl + s) the name changes indeed, in any case it works!

In doubt I searched the documentation of english_words and it is a failure, except the page on pub.dev and on github (https://github.com/filiph/english_words) I can not find anything .. and the WordPair is not mentioned anywhere I think (I searched quickly ..)

EDIT : in the end I found that https://pub.dev/documentation/english_words/latest/english_words/english_words-library.html but it is not super super clear either, and galley to find

Stateful Widget ?

We then discuss the part of stateless widgets (immutable widgets)

To implement such a widget, the doc states that it takes two things: a “StatefulWidget” class to create the instance of State class (which is the second thing to create)

The goal in this part of the documentation is very simple: Create a RandomWords widget that will create its State Class named “RandomWordsState.” We will make this widget a CHILD widget from our “MyApp” widget (which is a stateless widget)

In our main.dart located in the ./lib folder, let’s create a new RandomWordsState class that inherits from State <RandomWords>

So we understand that the State declaration <RandomWords> indicates that we use a special generic State class to use our RandomWords.

Most of the logic of the application and the state lies here. This class will save the WordPair generated in the previous step

To summarize: RandomWordsState depends on the RandomWords class.

So we need to create the RandomWords class because it does not exist otherwise we will have an error

We must also specify our class RandomWords to create its class State

For now we have:

But we also have an error that comes with:

From what I can understand the message is quite clear, it misses the implementation of the method build on the State

The documentation gives us a piece of code that is equivalent to what we have already implemented with our story of WordPair and PascalCase

But I admit I do not understand for the moment what we override and what good use the Widget build (BuildContext context)

In any case there is no more error!

We can see from the IDE, that the BuildContext is a class that we will always pass to our build method I think. We’ll see that later.

The last step is to replace our existing code with what we have just created.

For that I commented a piece of code, and modified another part of the code (the widget Text () which is replaced by our class)

It’s over for this part! In the next I will continue this example which has a lot of potential. We will still try to get the information that we do not understand the first time (like this story of BuildContext) to be sure of what we use!

PART 3. Available Here

In this part we will create a ListView with a scroll and infinite loading