Everything around us has a state. For example, what are the states of a thermometer? The color of the metal plate (white) The color of the liquid (red) The height of the liquid in the tube (e.g. 10 centimeters) And what are the states of weather? Temperature (40˚C) Speed of…

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. …

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…

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…

In order to draw custom shapes and lines in Flutter, there are basically four things involved: CustomPaint (It’s the exhibitor who gives you a paper to draw on, and then exhibits what you have drawn) 🖼️ CustomPainter (It’s you! The painter!) 👨‍🎨 Paint (It’s your brush) 🎨🖌️ Canvas (It’s your…

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…

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…

Our aim is to create the UI of an application called Slowly: In part 2, we implemented the UI up to the following point: