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

26

Be First to Comment

Leave a Reply

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