Flutter Tutorial for beginner

simple calculator in flutter

simple calculator in flutter
simple flutter calculator app
2.1kviews

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

  1. Simple design of a calculator in a flutter.
  2. making login for ( + , – ,*, /  ) of two value and get results.
  3. Button Click Listener.
  4.  get value on button click and show on a text file.
  5.  Result on multiple values.
  6. math_expressions: ^1.1.1  dependency.

So let’s make a flutter calculator widget and do that follow the code below step to make it 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 simple calculator in flutter.

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

Read More Tutorial