Calculator App Practical How-To For Flutter & Dart Beginners

Before we can start with the coding, we need to quickly create a new Flutter project.

This includes removing all the boilerplate code and starting the app for the first time.

Widgets are a core concept of Flutter. In order for you to understand the whole video course, I have included this excursion about widgets. If you already know about widgets in Flutter, you can skip it.

The first real widget we are going to use, is a "Scaffold" widget. Learn about it in this lecture.

The calculator consist of two parts:

• The result display on the top - responsible for output

• The keypad in the center - responsible for input

In this lecture, we are creating the former, making use of a predefined Flutter widget.

The second part of implementing the look is all about the keypad.

In order to keep the code clean, it's important to extract widgets into their own classes and files. This is what we're doing in this lecture.

Because we want the app to remember what we have entered, we need state. State can be easily represented using what's called StatefulWidget. Let's learn about it in this lecture.

Functions are a vital tool in programming that allow you to organize and reuse code. They simplify the process of creating complex software by breaking down large programs into smaller, manageable sections. By mastering the use of functions, you can greatly improve the efficiency and effectiveness of your code. This excursion about functions will equip you with a basic understanding of this concept.

In order for you to understand the upcoming lectures, I have included this excursion about functions here.

Again, If you already know about widgets in Flutter, you can skip it.

It's time to add some interactivity! Let's implement the ability for the user to press a number!

What is a calculation without an operator? Let's implement interaction with the operator buttons!

For the user to have a proper user experience, it's crucial to see what's being entered. Let's implement a proper display.

The best calculator is worth nothing if it can not calculate. Let's implement this last piece that is necessary for our calculator app to be functional.

After we have implemented a functional calculator app, it's a good idea to quickly reflect what we have actually achieved so far.

The calculator app is working, but is not very pretty. Neither regarding the design nor the code structure. Let's have a look at optimization potential.

The buttons are rectangular and not very pretty. Let's make them round buttons and create a separate widget for that.

Buttons without interaction are useless. Let's add tap behavior!

In order to improve the design of our keypad, we will add a little bit of spacing. Little effort, but huge impact.

For the code to become cleaner and the design to be more easily changeable, we extract the number buttons into their own widget.

For the code to become cleaner and the design to be more easily changeable, we extract the operator buttons into their own widget.

For the code to become cleaner and the design to be more easily changeable, we extract the clear calculation button into its own widget.

For the code to become cleaner and the design to be more easily changeable, we extract the calculate result button into its own widget.

The keypad could use a facelift with some prettier colors.