Building a Simple Calculator App with Flutter

3 min readAug 9, 2023

I hope you might be interested in building your own calculator using Flutter. In this blog, I’ll guide you through the process of creating a basic calculator app from scratch. Before we dive into the coding section, it is important to check whether Flutter and Dart are properly installed in the machine.

Step 1: Creating the Project

Open your terminal and run the following command to create a new Flutter project:

flutter create calculator_app

This will create a new Flutter project named calculator_app.

Step 2: Writing the Calculator Logic

Navigate to the lib directory of your project and replace the contents of main.dart with the following code:

//main.dart
import 'package:calculator_app/color.dart';
import 'package:flutter/material.dart';
import 'package:math_expressions/math_expressions.dart';

void main(){
  runApp(MaterialApp(
    home: CalculatorApp(),
  ));
}
  
class CalculatorApp extends StatefulWidget {
  const CalculatorApp({super.key});

  @override
  State<CalculatorApp> createState() => _CalculatorAppState();
}

class _CalculatorAppState extends State<CalculatorApp> {
  //variables
  double firstNum = 0.0;
  double secondNum = 0.0;
  var input = "";
  var output = "";
  var operation = "";
  var hideInput = false;
  var outputSize = 3.0;

  onButtonClick(value){
    if(value == "AC"){
      input = "";
      output = "";
    }else if (value == "<"){
      if (input.isNotEmpty){
        input = input.substring(0,input.length-1);
      }
    }else if (value == "="){
      if (input.isNotEmpty){
        var userInput = input.replaceAll("x", "*");
        Parser p = Parser();
        Expression expression = p.parse(userInput);
        ContextModel cm = ContextModel();
        var finalValue = expression.evaluate(EvaluationType.REAL, cm);
        output = finalValue.toString();
        if(output.endsWith(".0")){
          output = output.substring(0,output.length-2);
        }
        input = output;
        hideInput = true;
        outputSize = 52;
        
      }
    }else{
      input = input + value;
      hideInput = false;
      outputSize = 34;
    }

    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Column(
        children: [
        //input output area
        Expanded(child: Container(
          width: double.infinity,
          padding: const EdgeInsets.all(12),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              Text(
                hideInput ? "" : input,
                style: TextStyle(
                  fontSize: 48,
                  color: Colors.white,
                ),
              ),
              SizedBox(
                height: 20,
              ),
              Text(
                output,
                style: TextStyle(
                  fontSize: outputSize,
                  color: Colors.white.withOpacity(0.7),
                ),
              ),
              SizedBox(
                height: 30,
              ),
            ],
            ),
          )),
        //buttons area
        Row(
          children: [
            button(text: "AC", buttonBgColor: operatorColor, tColor: orangeColor),
            button(text: "<", buttonBgColor: operatorColor, tColor: orangeColor),
            button(text: "", buttonBgColor: Colors.transparent),
            button(text: "/", buttonBgColor: operatorColor, tColor: orangeColor),
          ],
        ),
        Row(
          children: [
            button(text: "7"),
            button(text: "8"),
            button(text: "9"),
            button(text: "x", tColor: orangeColor, buttonBgColor: operatorColor),
          ],
        ),
        Row(
          children: [
            button(text: "4"),
            button(text: "5"),
            button(text: "6"),
            button(text: "-", tColor: orangeColor, buttonBgColor: operatorColor),
          ],
        ),
        Row(
          children: [
            button(text: "1"),
            button(text: "2"),
            button(text: "3"),
            button(text: "+", tColor: orangeColor, buttonBgColor: operatorColor),
          ],
        ),
        Row(
          children: [
            button(text: "%", tColor: orangeColor, buttonBgColor: operatorColor),
            button(text: "0"),
            button(text: "."),
            button(text: "=", buttonBgColor: orangeColor),
          ],
        ),
      ]),
    );
  }

  Widget button({
    text, tColor = Colors.white, buttonBgColor = buttonColor
  }){
    return Expanded(
              child: Container(
                margin: const EdgeInsets.all(8),
                child: ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(12)
                    ),
                    padding: const EdgeInsets.all(22),
                    primary: buttonBgColor,
                  ),
                  onPressed: () => onButtonClick(text),
                  child: Text(
                    text,
                    style: TextStyle(
                      fontSize: 18,
                      color: tColor,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  ),
              ),
            );
  }

}

Step 3: Styling and UI

To make your calculator app visually appealing, we’ll add some styling. Create a new file named color.dart in the same lib directory and define your color constants:

// color.dart

import 'package:flutter/material.dart';

const operatorColor = Color(0xff272727);
const buttonColor = Color(0xff191919);
const orangeColor = Color(0xffD9802E);