Fast Flutter Maker Course — Tutorial 1.

I made complete app in 18 days! using the main concept in this tutorial.

Hello Gang!
Lets begin learning flutter and dart together.
It can be a lot of fun.

How to use this tutorial ?

If you already understand a code example, you can please skip the
code walk through explanation that follows each code example.
no installation is needed.Just study the lesson and please try out each example in Dartpad as you go.

Challenge 1 — Print Hello World in the output console using Dart Programming Language.

Checkout below code:

Try Challenge 1 in Dartpad.

Above Code Walk Through:
When a dart program runs, the main function is called automatically for you.
The print function takes a string argument.
“Hello World” is the String argument in above example.
The print function prints the string “Hello World” in the output console.

___________________________________________________________________

Challenge 2 — Print Hello World in an app using flutter.

The key idea in Flutter is:
User Interface is a tree of widgets.
You compose the widget tree in your code.

Check out the below code:

Try Challenge 2 in Dartpad Now.

Above Code Walk Through:

runApp function is present in the material.dart package
so we import the material.dart package.
runapp takes in the Text Widget as the argument.
the runApp function makes the Text widget the Root widget of the UI widget tree.
The Text Widget has the string ‘Hello, world!’ as the first argument.
We see that Hello World text is drawn at top of the screen.

___________________________________________________________________

Challenge 3 — Fix the alignment of Hello World.

checkout the below code:

Try out challenge 3 in dartpad

Above Code Walk Through

We just added the Center widget which contains the text widget as its child.
Everything UI component is a widget in flutter.
We write code to compose the widget tree of our UI.
Center widget takes in one child.
In above example, Center widget is the root widget.
Center widget is the parent of the Text Widget.

___________________________________________________________________

Challenge 4 — Add an app bar on top of the app to improve the UI

Check out the below code:

Above Code Walk Through:

runApp function takes in the HelloWorld widget as the argument.
HelloWorld is a stateless widget.
stateless widget is a class that extends StatelessWidget.

stateless widgets are static widgets.
Stateless widgets cannot change UI , no matter what event is triggered by the user.
variables of our stateless widget are final as they must not change.
All the code is within a scaffold widget.
Scaffold widget is a built in flutter widget.
It provides an appbar at the top (and some other features).
the body of the app is the Center widget with a text widget as its child.

Try out challenge 4 in dartpad.

___________________________________________________________________

Challenge 5 — Change ‘hello world’ text into ‘goodbye world’ when ‘hello world’ text is tapped:

We will use the Gesture Detector widget to wrap the center widget which contains the text widget.
check out the below code:

Try above code in dartpad.

Ouch That didnt work.
Can you guess why?

Remember — Stateless widgets are static widgets.
When the hello world text is tapped — we need to change the user interface.
Stateless widgets cannot change the user interface.
so above code did not work.
What can we do to fix this?
We can fix above code with a stateful widget.
stateful widgets are dynamic widgets.
they can change the state in response to an event triggered by user.
Stateful widgets can call the setState function to change the state.
When setState is called, Flutter automatically triggers a redraw of the UI.
Stateless widgets cannot call setState function.

Checkout below code to fix previous example by using a stateful widget instead of a stateless widget.

Try out challenge 5 in dartpad.

Above code walkthrough:

We use a stateful widget. the createstate method is called by flutter. The private state object is initialized.

In Dart if we begin a variable name with an underscore, it becomes a private variable.
_HelloWorldState is a private state object.

Inside the private state class, we can call the setState function to change the state in response to any event triggered by user.

The variable mytext is the data.
The variables/data that determine how to build the user interface are called the state of the application.
Our build method code in the State class will compose the user interface widget tree based on the values of the state variables.
UI = f (state)
For all possible values of state, the UI tree can be declared in build method.
Your code specifies the UI tree corresponding to the value of the state variables.

When the text “Hello World” is tapped, the goodbyeText function is called.
The goodbyetext function calls setstate to change the mytext variable.
Whenever setState is called => Flutter automatically triggers a redraw of the user interface.
Flutter gives us Automatic Redraw.

The new value of mytext appears in the user interface after the build method is called automatically by flutter.

User Event occurs => setState is called => Flutter calls build method => UI is updated

All this happens really fast at 60 frames per second, so user feels it is instant change.

___________________________________________________________________

Summary:

The Key Big idea of flutter is — we compose the widget tree as a function of the state.For all possible values of state , the UI tree is declaratively defined in the build method.

When a user event occurs, and we need to modify the UI — we call the setstate function to alter the state. Whenever setState is called — flutter automatically redraws the UI by calling the build method and the UI is updated.

Thats pretty much it friends.

Practice Excercise => You can try to toggle Hello World, Goodbye world to get accustomed to flutter syntax.

To receive the Tutorial 2 , quiz, practice worksheet,video and audio lesson — you can choose to subscribe to:

Programmer and Entrepreneur.