Let’s Flutter: How I built a Simple Calculator with Flutter
Disclaimer: I am no expert on flutter. I too, am exploring flutter just like you. I hope this article helps you get started with it.
If you are a mobile application developer, you might have probably heard about Flutter.
But what is Flutter?
Flutter is an open-source SDK, by Google, used for creating high-performance, high-fidelity mobile apps for iOS and Android. The Flutter framework makes it easy for you to build user interfaces that react smoothly in your app, while reducing the amount of code required to synchronize and update your app’s view. Flutter makes it easy to build beautiful apps with its rich set of Material Design widgets and behaviors.
Without wasting anymore time let’s jump to the interesting part.
What we will build?
In this article I will show you how to make a simple calculator app with flutter. I will try my best to make it easy to understand.
The app performs simple calculation like addition, subtraction, multiplication and division. I will show you how I built the UI. I will also tell you how you can write methods that change the state of the app, how to define variables. It is you who has to build the logic of the application, if you get stuck somewhere here is the link to the repo.
Installing Flutter SDK
You need the Flutter SDK and a code editor (Android Studio, Visual Studio Code). Installing the Flutter SDK and setting up the code editor is quite easy.
To install the SDK, follow the below mentioned steps:
- Go to https://flutter.io/get-started/install/ and choose your environment. (For this article I will be using Windows, you can follow the steps given on the website if you are using another platform)
- Download the given .zip or .tar.xz file and extract this file.
- Place the content flutter in desired location for Flutter SDK.
- Double click on the flutter_console.bat file, which is found inside the flutter directory.
Setting the PATH
If you wish to run Flutter commands in the regular Windows command prompt, take these steps to add Flutter to the PATH environment variable:
- Go to “Control Panel > User Accounts > User Accounts > Change my environment variables”
- Under “User variables” check if there is an entry called “Path”:
- If the entry does exist, append the full path to flutter\bin using ; as a separator from existing values.
- If the entry does not exist, create a new user variable named Path with the full path to flutter \bin as its value.
Reboot Windows to fully apply this change.
And you are done! Open command prompt and run flutter doctor.
flutter doctor checks your environment and displays the report on the terminal window.
To configure your editor you can follow the steps mentioned here.
Creating The Project
To create a new flutter project:
- Open VS Code
- Open the Command Palette (Ctrl+Shift+P) and type Flutter: New Project.
- Enter the project name calcapp and hit enter (The name of the project can’t contain any uppercase letter, hence calcApp is not allowed).
- Specify the location to place the project and press OK.
Wait for some time for the project setup.
Once completed test the sample application by running the command flutter run. (Make sure your emulator is running or your phone is connected to your laptop in developer mode)
Well, you just built your first Flutter application! Play along with the sample app and feel free to explore more.
If you explore the directories, 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 and put this code instead.
The first line imports the Flutter Material package. The second line imports the home_page.dart file where our the logic and design of our application resides.
Like in Java, C++, in Dart too, the main method is the entry point of the program. Hence the fourth line creates the main method and runs an inbuilt Flutter method runApp.
Note: Flutter applications are built with widgets.
We are then creating a class called MyApp which is a statelesswidget (Don’t worry we are going to talk about stateless and stateful widget in some time). 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.
Stateless vs Stateful Widgets
In Flutter, widgets are of two types, they can either be stateless or stateful.
Stateful widgets are the ones with which we can change the state of the app. Example when we click on the numbers button of the calculator the display changes.
Stateless widgets are the static widgets. No changes take place here.
The home_page.dart file that we imported in the main.dart file is the heart of our application code.
Create this new file in the lib directory, paste the following code.
We are returning Scaffold, which implements the basic material design visual layout structure. The Scaffold class provides APIs for showing App Bar, Drawers, Bottom Navigation etc.
The body is made of a container classwhich contains a child Text. The Text class is used to display the text.
Run the flutter run command. Your output should be similar to this.
Congratulations, you built your first flutter app!
Creating the Layout for the App
Flutter provides different classes to design our application, like Container class, Column Class, Row class. We will use the column class to make two sections, one for the display of output, and the other for buttons.
Replace the code for the body widget in home_dart, with the above code.
The above code creates a display screen, where the output will be displayed, and will create a row of buttons below the screen.
We are using our custom widget
_button . The concept of re-usability can now be explained. Instead of hard coding each and every button we created a custom widget with some parameters and used this widget whenever we need to create a button.
Now it’s time to use your own grey cells. Try to finish the design of the app by creating rows containing the remaining numbers and operators. (Hint: A Row widget creates a single row, hence we need multiple row widgets to create multiple rows.)
The final output should be similar to this.
Displaying Desired Numbers
Here comes the fun part. We created the basic layout for the app, but when we click on the buttons nothing happens. Let’s see how to do that.
Create a variable called ansStr before the @override.
var ansStr = "0";
In flutter, to display a string variable we use $ operator. Change the text in the text widget for the display container and press r to hot reload.
child: new Text(
You will see that zero is still displayed on the screen, but when you change the value of ansStr to any other number, on hot reload that number is displayed.
Functions in Flutter
Now you might have got a clue for the logic behind getting the desired number on screen. Whenever we click any number button we concatenate the ansStr with that number.
This is the basic syntax required to write the function.
Since we are changing the state we need to call the setState method.
Remember for buttons widget we had a property called onPressed. After creating the appropriate methods we will assign these methods to the buttons respectively.
Congratulations on building your first successful flutter application. You can now run it on both iOS and Android. I hope you are taking something new with yourselves after reading this article.
If you have questions or feedback, please leave them as a comment below. I’d love to see what you have build. You can hit me up on Twitter @a_harshil1712