Everything around us has a state. For example, what are the states of a thermometer?

  • The color of the metal plate (white)
Photo by Jarosław Kwoczała on Unsplash

And what are the states of weather?

  • Temperature (40˚C)

Now what’s State Management? State management is updating the state of one thing, based on the state of another thing.

This state management happens automatically in nature. Whenever the sun rises, the state of birds changes to “singing”. Whenever it rains, the…


If we want to animate something, we have to either change the size or change the position of our object in consecutive frames. e.g. in frame 1 our object is in position x, in frame 2 it will be in position x+1, in frame 3 it’d be in position x+2 and so on.

Another concept when creating an animation is “frames per second” or FPS. How many times do we want to change the position or size of our object per second? Movies usually use 24 frames per second. …


The concept of Future data type is very easy to understand. Although the official documentation has explained this concept very well, in this article I will try to explain it in my own words, which will hopefully help you get your head around it, if you have not already.

When a function returns a Future, it means that it takes a while for its result to be ready, and the result will be available in the future.

The most famous example of a function that may take some time to return the result is http.get(url) which is usually used to…


In this article we are going to draw a curved dashed line like the following:

I suppose you are already familiar with how to draw custom shapes and lines in Flutter. If not, you can read the article I wrote on this topic.

Let’s get started by creating our main file:

The drawing will happen in the DrawingPage class:

As usual, our page starts with Scaffold which has an appBar and a body which is set to an instance of CustomPaint widget.

The empty Container I have used (for the child property) will expand and fill the whole…


In order to draw custom shapes and lines in Flutter, there are basically four things involved:

  1. CustomPaint (It’s the exhibitor who gives you a paper to draw on, and then exhibits what you have drawn) 🖼️

Yes, it’s that simple!

So let’s get started by creating our main file:

The drawing will happen in the DrawingPage class:

As usual, our page starts with Scaffold which has an appBar and a body which is set to an instance of CustomPaint widget.

The canvas…


Suppose that we want to show the logo of our application, at the top and center of the page, like this:

At first, it might seem like an easy task, but there is a lot to learn from it!

Let’s start by implementing the main function, which will instantiate and show the LoginPage widget:

It’d be very likely that we want to add another widget below our logo, like two input boxes for username and password. Therefore, it’s a good idea to start our widget tree with a Column:

So far we’ve got an empty page with “Logo”…


Today we are going to create the following layout using Flutter. Why should we do that? The answer is simple: “practice makes perfect”.

But how could we do that? Is it really possible to twist squares over and under each other like that?


In the previous parts of this tutorial, we have been able to create the following page:

In this part, we will learn how to add tabs to the bottom of this page.

In order to add a navigation bar to the bottom of the page, we have to set the bottomNavigationBar property of the Scaffold class.

If your bottom navigation bar items are more than three, you have to manually set the type of the navigation bar to BottomNavigationBarType.fixed, otherwise the navigation bar items won’t be shown! Each BottomNavigationBarItem has an icon and a title. Unfortunately, according to material…


Our aim is to create the UI of an application called Slowly:

In part 2, we implemented the UI up to the following point:


Our aim is to create the UI of an application called Slowly:

In part 1 we started building the application and created our widget tree up to this point:

Meysam Mahfouzi

Software Engineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store