simple calculator in flutter

simple flutter calculator app

Hi, welcome to codeplayon to learn share and explore your skill. Let’s Lean more on flutter in this flutter tutorial we make a simple calculator app. So this flutter article is very interesting for begginer how learn flutter for crosh platform. hare we can create a simple calculator in fluter so that you can learn sahree more thinks like.

  1. Simple degien a calculater in flutter.
  2. making login for ( + , – ,*, /  ) of two value and get results.
  3. Button click Listner.
  4.  get value on button click and show on text filed.
  5.  Result on multipal value.
  6. math_expressions: ^1.1.1  dependency.

So let’s make  flutter calculator widget and do that follow the code and below step to make easy.

 flutter calculator widget

First of you can create an flutter project click on file –> New –> New Flutter project and build your project. after build successfully.

in you pubspec.yaml file open and math_expressions: ^1.1.1  dependency and get pub .

pubspec.yaml file source code

name: first_flutter_app
description: A new Flutter application.

version: 1.0.0+1

environment:
  sdk: ">=2.12.0  <3.0.0"

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  math_expressions: ^1.1.1

dev_dependencies:
  flutter_test:
    sdk: flutter


# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

 

You can follow these for create button Widget

Widget buildButton(String buttonText, double buttonHeight, Color buttonColor){
  return Container(
    height: MediaQuery.of(context).size.height * 0.1 * buttonHeight,
    color: buttonColor,
    child: FlatButton(
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(0.0),
            side: BorderSide(
                color: Colors.white,
                width: 1,
                style: BorderStyle.solid
            )
        ),
        padding: EdgeInsets.all(16.0),
        onPressed: () => buttonPressed(buttonText),
        child: Text(
          buttonText,
          style: TextStyle(
              fontSize: 30.0,
              fontWeight: FontWeight.normal,
              color: Colors.white
          ),
        )
    ),
  );
}

On Button click to Caluculate result and value login

in these method you can see all logic like ( C )  to Clear al Result for TextFild  ( X ) remove last value , ( = ) Get Result etc.

buttonPressed(String buttonText){
  setState(() {
    if(buttonText == "C"){
      equation = "0";
      result = "0";
      equationFontSize = 38.0;
      resultFontSize = 48.0;
    }

    else if(buttonText == "⌫"){
      equationFontSize = 48.0;
      resultFontSize = 38.0;
      equation = equation.substring(0, equation.length - 1);
      if(equation == ""){
        equation = "0";
      }
    }

    else if(buttonText == "="){
      equationFontSize = 38.0;
      resultFontSize = 48.0;

      expression = equation;
      expression = expression.replaceAll('×', '*');
      expression = expression.replaceAll('÷', '/');

      try{
        Parser p = Parser();
        Expression exp = p.parse(expression);

        ContextModel cm = ContextModel();
        result = '${exp.evaluate(EvaluationType.REAL, cm)}';
      }catch(e){
        result = "Error";
      }

    }

    else{
      equationFontSize = 48.0;
      resultFontSize = 38.0;
      if(equation == "0"){
        equation = buttonText;
      }else {
        equation = equation + buttonText;
      }
    }
  });
}

 

Making UI like Button click add button in a row and set text on button to follow below code .

in these method you can lear how to make a UI in flutter like how to mange mutipal widget ina row and how to set test and stype for button text color button color etc.

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('Calculator')),
    body: Column(
      children: <Widget>[


        Container(
          alignment: Alignment.centerRight,
          padding: EdgeInsets.fromLTRB(10, 20, 10, 0),
          child: Text(equation, style: TextStyle(fontSize: equationFontSize),),
        ),


        Container(
          alignment: Alignment.centerRight,
          padding: EdgeInsets.fromLTRB(10, 30, 10, 0),
          child: Text(result, style: TextStyle(fontSize: resultFontSize),),
        ),


        Expanded(
          child: Divider(),
        ),


        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              width: MediaQuery.of(context).size.width * .75,
              child: Table(
                children: [
                  TableRow(
                      children: [
                        buildButton("C", 1, Colors.redAccent),
                        buildButton("⌫", 1, Colors.blue),
                        buildButton("÷", 1, Colors.blue),
                      ]
                  ),

                  TableRow(
                      children: [
                        buildButton("7", 1, Colors.black87),
                        buildButton("8", 1, Colors.black87),
                        buildButton("9", 1, Colors.black87),
                      ]
                  ),

                  TableRow(
                      children: [
                        buildButton("4", 1, Colors.black87),
                        buildButton("5", 1, Colors.black87),
                        buildButton("6", 1, Colors.black87),
                      ]
                  ),

                  TableRow(
                      children: [
                        buildButton("1", 1, Colors.black87),
                        buildButton("2", 1, Colors.black87),
                        buildButton("3", 1, Colors.black87),
                      ]
                  ),

                  TableRow(
                      children: [
                        buildButton(".", 1, Colors.black87),
                        buildButton("0", 1, Colors.black87),
                        buildButton("00", 1, Colors.black87),
                      ]
                  ),
                ],
              ),
            ),


            Container(
              width: MediaQuery.of(context).size.width * 0.25,
              child: Table(
                children: [
                  TableRow(
                      children: [
                        buildButton("×", 1, Colors.blue),
                      ]
                  ),

                  TableRow(
                      children: [
                        buildButton("-", 1, Colors.blue),
                      ]
                  ),

                  TableRow(
                      children: [
                        buildButton("+", 1, Colors.blue),
                      ]
                  ),

                  TableRow(
                      children: [
                        buildButton("=", 2, Colors.redAccent),
                      ]
                  ),
                ],
              ),
            )
          ],
        ),

      ],
    ),
  );
}

 

 

Full Source Code for fullter calculater App.

Main.Dart File

import 'package:flutter/material.dart';
import 'package:math_expressions/math_expressions.dart';

void main(){
  runApp(Calculator());
}

class Calculator extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Calculator',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: SimpleCalculator(),
    );
  }
}

class SimpleCalculator extends StatefulWidget {
  @override
  _SimpleCalculatorState createState() => _SimpleCalculatorState();
}

class _SimpleCalculatorState extends State<SimpleCalculator> {

  String equation = "0";
  String result = "0";
  String expression = "";
  double equationFontSize = 38.0;
  double resultFontSize = 48.0;

  buttonPressed(String buttonText){
    setState(() {
      if(buttonText == "C"){
        equation = "0";
        result = "0";
        equationFontSize = 38.0;
        resultFontSize = 48.0;
      }

      else if(buttonText == "⌫"){
        equationFontSize = 48.0;
        resultFontSize = 38.0;
        equation = equation.substring(0, equation.length - 1);
        if(equation == ""){
          equation = "0";
        }
      }

      else if(buttonText == "="){
        equationFontSize = 38.0;
        resultFontSize = 48.0;

        expression = equation;
        expression = expression.replaceAll('×', '*');
        expression = expression.replaceAll('÷', '/');

        try{
          Parser p = Parser();
          Expression exp = p.parse(expression);

          ContextModel cm = ContextModel();
          result = '${exp.evaluate(EvaluationType.REAL, cm)}';
        }catch(e){
          result = "Error";
        }

      }

      else{
        equationFontSize = 48.0;
        resultFontSize = 38.0;
        if(equation == "0"){
          equation = buttonText;
        }else {
          equation = equation + buttonText;
        }
      }
    });
  }

  Widget buildButton(String buttonText, double buttonHeight, Color buttonColor){
    return Container(
      height: MediaQuery.of(context).size.height * 0.1 * buttonHeight,
      color: buttonColor,
      child: FlatButton(
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(0.0),
              side: BorderSide(
                  color: Colors.white,
                  width: 1,
                  style: BorderStyle.solid
              )
          ),
          padding: EdgeInsets.all(16.0),
          onPressed: () => buttonPressed(buttonText),
          child: Text(
            buttonText,
            style: TextStyle(
                fontSize: 30.0,
                fontWeight: FontWeight.normal,
                color: Colors.white
            ),
          )
      ),
    );
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Calculator')),
      body: Column(
        children: <Widget>[


          Container(
            alignment: Alignment.centerRight,
            padding: EdgeInsets.fromLTRB(10, 20, 10, 0),
            child: Text(equation, style: TextStyle(fontSize: equationFontSize),),
          ),


          Container(
            alignment: Alignment.centerRight,
            padding: EdgeInsets.fromLTRB(10, 30, 10, 0),
            child: Text(result, style: TextStyle(fontSize: resultFontSize),),
          ),


          Expanded(
            child: Divider(),
          ),


          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                width: MediaQuery.of(context).size.width * .75,
                child: Table(
                  children: [
                    TableRow(
                        children: [
                          buildButton("C", 1, Colors.redAccent),
                          buildButton("⌫", 1, Colors.blue),
                          buildButton("÷", 1, Colors.blue),
                        ]
                    ),

                    TableRow(
                        children: [
                          buildButton("7", 1, Colors.black87),
                          buildButton("8", 1, Colors.black87),
                          buildButton("9", 1, Colors.black87),
                        ]
                    ),

                    TableRow(
                        children: [
                          buildButton("4", 1, Colors.black87),
                          buildButton("5", 1, Colors.black87),
                          buildButton("6", 1, Colors.black87),
                        ]
                    ),

                    TableRow(
                        children: [
                          buildButton("1", 1, Colors.black87),
                          buildButton("2", 1, Colors.black87),
                          buildButton("3", 1, Colors.black87),
                        ]
                    ),

                    TableRow(
                        children: [
                          buildButton(".", 1, Colors.black87),
                          buildButton("0", 1, Colors.black87),
                          buildButton("00", 1, Colors.black87),
                        ]
                    ),
                  ],
                ),
              ),


              Container(
                width: MediaQuery.of(context).size.width * 0.25,
                child: Table(
                  children: [
                    TableRow(
                        children: [
                          buildButton("×", 1, Colors.blue),
                        ]
                    ),

                    TableRow(
                        children: [
                          buildButton("-", 1, Colors.blue),
                        ]
                    ),

                    TableRow(
                        children: [
                          buildButton("+", 1, Colors.blue),
                        ]
                    ),

                    TableRow(
                        children: [
                          buildButton("=", 2, Colors.redAccent),
                        ]
                    ),
                  ],
                ),
              )
            ],
          ),

        ],
      ),
    );
  }
}

Flutter Calculator App Source Code on Github

Facebooktwitterredditpinterestlinkedinmail
Recommended
Hi everyone In this flutter tutorial I share a shared…