Build Calculator App UI using basic Flutter Widgets

Let's first look into the design of the calculator app that we are going to build

In this post we will just be building the design of the calculator using the basic widgets of flutter.

Every thing in flutter is a widget. Widgets are the basic building blocks of a Flutter app's user interface. Each widget is an immutable declaration of part of the user interface. Unlike other frameworks that separate views, view controllers, layouts, and other properties, Flutter has a consistent, unified object model: the widget.

Creating a Project in Android Studio
Open Android Studio

Go to File -> New -> New Flutter Project

Select "Flutter Application" and click "Next"

Write Project Name and Description and click "Next"

Click Finish.

When your project is set up you will find lib/main.dart. This is the dart file where the main method goes. In simple words this is the entry file for our application.
We are going to build our app from scratch, hence delete all the code from the main.dart file

Now Let's get our hands dirty by writing our first code snippet. You can find this code on my git project.

Did it seem complicated to you. Don't worry I will try to explain you each and every line of code.
The first line imports the Flutter Material package. Like in Java, C++, in Dart too, the main method is the entry point of the program. Hence the third line creates the main method and runs an inbuilt Flutter method runApp.

We are then creating a class called MyApp which is a Stateless Widget. We are building a Widget with the help of build method. The build method returns a new Material App, where we give the title of our application, set the theme and the home page.

Next we create a Stateful Widget called "CalculatorPage".

Now lets look into the structure of our layout.

Firstly we can see that we can divide the app design into 2 columns in the ratio of 3:5. (See 2 white boxes).

Second, We can divide the bigger container into 5 more columns each of same ratio. (See 5 blue boxes) .

Next we see that the 4 buttons in first 4 each blue boxes can be seen as a row with 4 divisions each of equal ratio. And the last blue box can be seen as a row with 3 divisions of ratio 2:1:1.

Whenever you want to design a UI I recommend you all to take a pen and paper and simplify the design as we did.

Now lets see how to implement this design in flutter.

Before doing so we need to understand some basic widgets that we will be using.

Container Widget

The Container widget is used to contain a child widget with the ability to apply some styling properties.
If the Container widget has no child it will automatically fill the given area on the screen, otherwise it will wrap the height & width of the given child element.

Lets start designing our layout with the container widget. From the layout we can see that the background colour is black. So lets set the background colour as black.

Now lets run our app. You can see the output at the left hand side.

Lets move ahead. As per our structure we need to divide the layout into two parts vertically in the ratio of 3:5. We will do so using the Column Widget.

Column Widget
A Column is a widget used to display child widgets in a vertical manner. The Column widget does not scroll. If you have a line of widgets and want them to be able to scroll if there is insufficient room, consider using a ListView.

Note: To distinguish the 2 columns i have used 2 different colours black and white.

In the above code we implemented a Column with 2 children. Also we have used the crossAxisAlignment property to align our child widget in the desired direction. In this case crossAxisAlignment.start would place the children with their start edge aligned with the start side of the cross axis.

We have also used a one new widget called as Flexible Widget.

Flexible Widget

A widget that controls how a child of a Row, Column, or Flex flexes.
Using a Flexible widget gives a child of a Row, Column, or Flex the flexibility to expand to fill the available space in the main axis (e.g., horizontally for a Row or vertically for a Column).
Let's move ahead by structuring the internal layout of the bottom child of Column widget. Here we need to divide the layout into 5 parts each with equal ratio.

Here we have used a Column widget inside the second child of the parent Column. Inside this we have defined 5 Flexible widget each with a ratio of 1.

Next, we need to define the a Row widget inside each of these Flexible widgets.

Row Widget

A Row is a widget used to display child widgets in a horizontal manner. The Row widget does not scroll. If you have a line of widgets and want them to be able to scroll if there is insufficient room, consider using a ListView Class.

Before implementing the Buttons of the calculator using row widget lets design the Button.

We have defined a new Stateless Widget called CustomButton that takes an input text parameter. This input text parameter defines the text to be shown on the button. Now let us discuss the parameters defined inside the Container Widget.

margin: A margin is just a property specifying to add empty space to surround of the container using an EdgeInsets constant value. The EdgeInsets is typically used to define the offset from each of the four sides of the box.

height & width: To stretch the container to match its parent we have used double.infinity for the height and width properties.

alignment: We use an Alignment Class with the alignment property for aligning the child widgets. Here we have aligned the child widget at the centre.

decoration: Decoration is usually used on a Container widget to change how the container looks. Using the borderRadius and colour property of BoxDecoration we styled our container.

Next we used a Text Widget as a child to write the text to be shown on the button. The style parameter inside the Text Widget helps to style the look of the text like fontSize and color.

We can use this CustomButton Widget everywhere we want to show a button. This Widget can be said as a reusable component.

Now let's move ahead and design the buttons of the calculator inside the Row widgets.

Want to add a caption to this image? Click the Settings icon.
Now we have implemented a row inside each Column Widget. In the first 4 Columns we have defined a row with 4 children each of equal ratio.

For the last column we have used a row with 3 children in the ratio of 2:1:1.

Also we have added a Padding Widget as a child of our first Container widget to space on all four sides or our container.

Yipeeeeee.....We have developed the calculator UI in just a few steps. Next we need to add functionality to our calculator. So stay tuned for my next blog post to see how to add functionality to our calculator.

Thanks You for you patience reading.

Github Link to Source Code. https://github.com/akshaygupta1996/fluttercalculator

Thank You guys. Keep following me....

More blogs coming soon with some awesome UI Designs and animations.