Press "Enter" to skip to content

Simple Calculator in Flutter – Add Subtract Multiply Divide

Creating apps on Flutter is crazy. Let’s create a simple calculator application with operation of addition, subtraction, multiplication and division with flutter programming.

Using Rows, Column, RaisedButtons and Texts we designed a structure of a simple calculator.

Full Programming Code:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appTitle = 'Add Two Numbers';

    return MaterialApp(
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(
          title: Text(appTitle),
        ),
        body: AddTwoNumbers(),
      ),
    );
  }
}
class AddTwoNumbers extends StatefulWidget {
  @override
  _AddTwoNumbersState createState() => _AddTwoNumbersState();
}

class _AddTwoNumbersState extends State<AddTwoNumbers> {
  TextEditingController num1controller = new TextEditingController();
  TextEditingController num2controller = new TextEditingController();
  String resulttext = "0";
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              Text("Number 1 : "),
              new Flexible(
                child: new TextField(
                  keyboardType: TextInputType.number,
                  controller: num1controller,
                ),
              ),
            ],
          ),
          Row(
            children: <Widget>[
              Text("Number 2 : "),
              new Flexible(
                child: new TextField(
                  keyboardType: TextInputType.number,
                  controller: num2controller,
                ),
              ),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              RaisedButton(
                child: Text("+"),
                onPressed : () {
                  setState(() {
                    int result = int.parse(num1controller.text) + int.parse(num2controller.text);
                    resulttext = result.toString();
                  });
                },
              ),
              RaisedButton(
                child: Text("-"),
                onPressed : () {
                  setState(() {
                    int result = int.parse(num1controller.text) - int.parse(num2controller.text);
                    resulttext = result.toString();
                  });
                },
              ),
              RaisedButton(
                child: Text("x"),
                onPressed : () {
                  setState(() {
                    int result = int.parse(num1controller.text) * int.parse(num2controller.text);
                    resulttext = result.toString();
                  });
                },
              ),
              RaisedButton(
                child: Text("/"),
                onPressed : () {
                  setState(() {
                    double result = double.parse(num1controller.text)/double.parse(num2controller.text);
                    resulttext = result.toStringAsPrecision(3);
                  });
                },
              )
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text("Result:",
                style: TextStyle(
                    fontSize: 30,
                ),),
               new Text(resulttext,
                 style: TextStyle(
                  fontSize: 30,
               ),),
            ],
          ),
        ],
      ),
    );
  }
}

Code Explanation:

We have already an article about adding two numbers and find the sum in flutter. The idea of above code is similar this program. As we shown codes for adding two numbers, here we use same code for addition, subtraction and multiplication with operation of ‘+’ , ‘-‘ and ‘*’ respectively except division. Each button’s onPressed event manages their on operation.

In division, the quotient may be a exponential number. So we used ‘double‘ datatype for ‘result‘ variable.

double result = double.parse(num1controller.text) / double.parse(num2controller.text);
resulttext = result.toStringAsPrecision(3);

In some cases, the exponential part may have infinity or too many digits. So we rounded the exponential part with a three digits of precious with function ‘toStringAsPrecision()’.

Sample Output:

simple calculator in flutter

3 Comments

  1. Talha Talha 24th July 2020

    My app structure is like this:

    1. Enter Value in first TextField.

    2. Enter Value in second TextField.

    3. Got the value after applying function of sum.

    4. TextField where some value to be put.

    5. I am getting the value after multiplying 3 & 4 value.

    But the issue is value of 5 is not changing automatically on changing the value of 3, it requires TAPPING on 4th value to change value in 5.
    I want the value of 5 should change automatically(Tapping on 4th TextField not required), as and when the value in 1 or 3 change.

    Please help.
    Thanks.

    • yourowncodes yourowncodes Post author | 24th July 2020

      We will reply the answer when we get free time.. wait

Leave a Reply

Your email address will not be published. Required fields are marked *