Insights from Our Experts

Blog image

How to build iPhone Calculator using Flutter

Author Image

Rijaz Rasheed,Associate Software Engineer

It was a simple idea to create a replica of iPhone’s system calculator in Flutter. The design is uncomplicated and the program logic is well-known. I am trying to focus on the UI designhere, since the logic can be tedious to teach. 

You can check out our Git Repo to get a complete idea.

 

Building iPhone Calculator App using Flutter 

This is the UI we got to design.

calculator-design

Now, let’s decompose this view into a number of components.

  1. The operands,operator,result and the buttons are vertically aligned using a column widget.
  2. Now, we use 5 row widgets to arrange buttons horizontally.
  3. Buttons are of different designs. So, we need to create separate widgets for each type.

The Number Button is designed like this:

The Number Button is a Stateless widget which takes a String “text” and a function “onPressed”. It is implemented using a RawMaterialButton because we needed the button size to be extra large. The shape is given to be a circle of size 60.

The Zero button has a bit different UI, so I created a custom widget for it.

The width of the zero button is given in relative to the screen width.
Now there is Binary Operator button and Unary Operator Button which is different from each other only in text color, background color and its action.

Now the entire layout is done in calculator.dart. The build method of it is given below.

 

The End Result

calculator-android-ios

This is how it looks on both the devices. My Flutter experiment has worked out for good. As a part of the SayOne mobile team, I have been working on Flutter since 2017. I have never been this drawn towards any other technology. Stay tuned as we experiment more with Flutter in the coming days!