simple flutter calculator app

simple calculator in flutter

Flutter Tutorial for beginner

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