How to build a Simple Calculator App with Flutter Part 1

Photo by mnm.all on Unsplash

Using Flutter, you can easily create Android and iOS Apps. This post will show you how to build simple Flutter calculator app step by step.

This is what I built with Flutter

0. Prerequisites & SetUp

If you are new to Flutter, please first follow the Flutter Setup guide, and create new Flutter project.

This is my project structure, but you don’t have to follow my structure.

Project Structure

create lib/src/app.dart, and setup main.dart and app.dart file.

lib/main.dart & lib/src/app.dart

1. Build Calculator Screen UI

The first step, create lib/src/ui/screens/home_screen.dart and HomeScreen class extended from StatefulWidget

lib/src/ui/screens/home_screen.dart

2. Add Logic to Calculator Screen

Add this inside of _HomeScreenState class

// Add onPressed function to OutlineButton
onPressed: () => _pressButton(buttonText)

Congratulations 🎉

The result will be like this. Here is source code of HomeScreen.

Continue to Part 2 which explains how to manage theme color with color setting screen

How to build a Simple Calculator App with Flutter Part 2

If you want to know how to set app icon and splash screen, Part 3 may help

How to build a Simple Calculator App with Flutter Part 3 AppIcon and Splash Screen