In this article, we’ll look at how to design and build a simple calculator app with Dart and Flutter. In our flutter series, we have completed almost all the widgets and properties required to complete the Flutter series for beginners. If you have gone through our complete flutter series then you may have already learned all the widgets required to make complete calculator application in Flutter.

How to build a simple calculator application in Flutter?

The calculator is one of the most popular and mostly build an application in almost every programming language. After learning most of the programming languages the first project the programmer take is to build a simple calculator application to enhance their skills. So, Let's start making a simple calculator with Dart and Flutter by creating a new flutter project and paste the below code in main.dart file.

import "package:flutter/material.dart";

void main() => runApp(MaterialApp(home: Calculator(),));

class Calculator extends StatefulWidget {
  @override
  _CalculatorState createState() => _CalculatorState();
}

class _CalculatorState extends State {
  String inputNum="";
  double doubleOutput;
  String outputSign;
  String outputNum="";

  double performOperation(String sign){

    switch(sign){
      case "+":
        doubleOutput= double.parse(outputNum) + double.parse(inputNum);
        break;
      case "-":
        doubleOutput= double.parse(outputNum) - double.parse(inputNum);
        break;
      case "*":
        doubleOutput= double.parse(outputNum) * double.parse(inputNum);
        break;
      case "/":
        doubleOutput= double.parse(outputNum) / double.parse(inputNum);
        break;
      case "-+":
        print(double.parse(outputNum));
        print(double.parse(inputNum));
        doubleOutput= double.parse(outputNum) + double.parse(inputNum);
        break;
      case "--":
        doubleOutput= double.parse(outputNum) - double.parse(inputNum);
        break;
      case "-*":
        doubleOutput= double.parse(outputNum) * double.parse(inputNum);
        break;
      case "-/":
        doubleOutput= double.parse(outputNum) / double.parse(inputNum);
        break;
    }
    return doubleOutput;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Calculator"),
      ),
      body: Container(
        height: MediaQuery.of(context).size.height,
        child: Column(
          children: [
            Padding(padding: const EdgeInsets.all(10.0)),
            Container(
              width: MediaQuery.of(context).size.height,
              height: 50.0,
              decoration: BoxDecoration(border: Border.all(color: Colors.black),),
              child: Row(
                children: [
                  Padding(padding: const EdgeInsets.only(left: 10.0)),
                  Text("Input Number: ", style: TextStyle(fontSize: 18.0, color: Colors.grey)),
                  Text(inputNum, style: TextStyle(fontSize: 18.0)),
                ],
              )
            ),
            Padding(padding: const EdgeInsets.all(10.0)),
            Container(
              width: MediaQuery.of(context).size.height,
              height: 50.0,
              decoration: BoxDecoration(border: Border.all(color: Colors.black)),
              child: Row(
                children: [
                  Padding(padding: const EdgeInsets.only(left: 10.0)),
                  Text("Output Number: ", style: TextStyle(fontSize: 16.0, color: Colors.grey)),
                  Text(outputNum, style: TextStyle(fontSize: 16.0)),
                ],
              )
            ),
            Expanded(
              child: Align(
                alignment: FractionalOffset.bottomCenter,
                child: GridView(
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
                    children: [
                      RaisedButton(child: Text("1"), onPressed: (){
                        setState(() {
                          inputNum= inputNum+"1";
                        }); },),
                      RaisedButton(child: Text("2"), onPressed: (){
                        setState(() {
                          inputNum= inputNum+"2";
                        });
                      },),
                      RaisedButton(child: Text("3"), onPressed: (){
                        setState(() {
                          inputNum= inputNum+"3";
                        });
                      },),
                      RaisedButton(child: Text("+"), onPressed: (){
                        setState(() {
                          if(outputNum == ""){
                            outputNum= inputNum+"+";
                            inputNum= "";
                          } else{
                            outputSign= outputNum.replaceAll(new RegExp('[0-9.]'), '');
                            if(outputSign.length==2){
                              outputSign= outputSign.substring(1);
                            }
                            outputNum= outputNum.replaceAll(outputSign,'');

                            outputNum = performOperation(outputSign).toString()+"+";
                            inputNum= "";
                          }
                        });
                      },),
                      RaisedButton(child: Text("4"), onPressed: (){
                        setState(() {
                          inputNum= inputNum+"4";
                        });
                      },),
                      RaisedButton(child: Text("5"), onPressed: (){
                        setState(() {
                          inputNum= inputNum+"5";
                        });
                      },),
                      RaisedButton(child: Text("6"), onPressed: (){
                        setState(() {
                          inputNum= inputNum+"6";
                        });
                      },),
                      RaisedButton(child: Text("-"), onPressed: (){
                        setState(() {
                          if(outputNum == ""){
                            outputNum= inputNum+"-";
                            inputNum= "";
                          } else{
                            outputSign= outputNum.replaceAll(new RegExp('[0-9.]'), '');
                            if(outputSign.length==2){
                              outputSign= outputSign.substring(1);
                            }
                            outputNum= outputNum.replaceAll(outputSign,'');

                            outputNum = performOperation(outputSign).toString()+"-";
                            inputNum= "";
                          }
                        });
                      },),
                      RaisedButton(child: Text("7"), onPressed: (){
                        setState(() {
                          inputNum= inputNum+"7";
                        });
                      },),
                      RaisedButton(child: Text("8"), onPressed: (){
                        setState(() {
                          inputNum= inputNum+"8";
                        });
                      },),
                      RaisedButton(child: Text("9"), onPressed: (){
                        setState(() {
                          inputNum= inputNum+"9";
                        });
                      },),
                      RaisedButton(child: Text("*"), onPressed: (){
                        setState(() {
                          if(outputNum == ""){
                            outputNum= inputNum+"*";
                            inputNum= "";
                          } else{
                            outputSign= outputNum.replaceAll(new RegExp('[0-9.]'), '');
                            if(outputSign.length==2){
                              outputSign= outputSign.substring(1);
                            }
                            outputNum= outputNum.replaceAll(outputSign,'');

                            outputNum = performOperation(outputSign).toString()+"*";
                            inputNum= "";
                          }
                        });
                      },),
                      RaisedButton(child: Text("0"), onPressed: (){
                        setState(() {
                          inputNum= inputNum+"0";
                        });
                      },),
                      RaisedButton(child: Text("."), onPressed: (){
                        setState(() {
                          inputNum= inputNum+".";
                        });
                      },),
                      RaisedButton(child: Text("C"), onPressed: (){
                        setState(() {
                          inputNum= "";
                          outputNum= "";
                        });
                      },),
                      RaisedButton(child: Text("/"), onPressed: (){
                        setState(() {
                          if(outputNum == ""){
                            outputNum= inputNum+"/";
                            inputNum= "";
                          } else{
                            outputSign= outputNum.replaceAll(new RegExp('[0-9.]'), '');
                            if(outputSign.length==2){
                              outputSign= outputSign.substring(1);
                            }
                            outputNum= outputNum.replaceAll(outputSign,'');

                            outputNum = performOperation(outputSign).toString()+"/";
                            inputNum= "";
                          }
                        });
                      },),
                    ],
                  shrinkWrap: true,
                  ),
                )
              ),
            Container(
              width: MediaQuery.of(context).size.width,
              height: 80.0,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.grey),
              ),
              child: SizedBox.expand(
                child: RaisedButton(child: Text("="), onPressed: (){
                  setState(() {
                    if(outputNum == ""){
                      outputNum= inputNum;
                      inputNum= "";
                    } else{
                      outputSign= outputNum.replaceAll(new RegExp('[0-9.]'), '');
                      if(outputSign.length==2){
                        outputSign= outputSign.substring(1);
                      }
                      outputNum= outputNum.replaceAll(outputSign,'');

                      outputNum = performOperation(outputSign).toString();
                      inputNum= "";
                    }
                  });
                },),
              )
            )
          ],
        )
      )
    );
  }
}

Output of Calculator app in Flutter

Calculator App in Flutter

Complete Flutter Series List: Click here 

Categories: Blog Tags: flutter, review2tech flutter series, calculator, calculator in flutter, bmi calculator flutter, create a basic app using flutter, flutter tutorial, flutter android, flutter ios


1 Comments

  • Comment

    longchamp bags

    2020-08-08 23:54:20

    Aw, this was a very nice post. In idea I want to put in writing like this moreover ?taking time and precise effort to make an excellent article?however what can I say?I procrastinate alot and under no circumstances seem to get something done.

    Reply

Leave a comment