How to make simple Calculator app in flutter with source code stepwise

Creating a simple calculator app in Flutter involves setting up the user interface and implementing the basic arithmetic operations. Below is a step-by-step guide with the source code.

Step 1: Set Up a New Flutter Project

1. Create a new Flutter project:

   flutter create calculator_app

2. Navigate to the project directory:

   cd calculator_app

Step 2: Update pubspec.yaml

Add any necessary dependencies if you’re planning to use external packages (for this basic calculator, no additional dependencies are required).

Step 3: Create the User Interface

In the lib directory, open main.dart and replace its content with the following code:

import 'package:flutter/material.dart';

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

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

class CalculatorHomePage extends StatefulWidget {
  @override
  _CalculatorHomePageState createState() => _CalculatorHomePageState();
}

class _CalculatorHomePageState extends State<CalculatorHomePage> {
  String output = "0";
  String _output = "0";
  double num1 = 0.0;
  double num2 = 0.0;
  String operand = "";

  buttonPressed(String buttonText) {
    if (buttonText == "CLEAR") {
      _output = "0";
      num1 = 0.0;
      num2 = 0.0;
      operand = "";
    } else if (buttonText == "+" || buttonText == "-" || buttonText == "/" || buttonText == "X") {
      num1 = double.parse(output);
      operand = buttonText;
      _output = "0";
    } else if (buttonText == ".") {
      if (_output.contains(".")) {
        return;
      } else {
        _output = _output + buttonText;
      }
    } else if (buttonText == "=") {
      num2 = double.parse(output);

      if (operand == "+") {
        _output = (num1 + num2).toString();
      }
      if (operand == "-") {
        _output = (num1 - num2).toString();
      }
      if (operand == "X") {
        _output = (num1 * num2).toString();
      }
      if (operand == "/") {
        _output = (num1 / num2).toString();
      }

      num1 = 0.0;
      num2 = 0.0;
      operand = "";
    } else {
      _output = _output + buttonText;
    }

    setState(() {
      output = double.parse(_output).toStringAsFixed(2);
    });
  }

  Widget buildButton(String buttonText) {
    return Expanded(
      child: OutlineButton(
        padding: EdgeInsets.all(24.0),
        child: Text(
          buttonText,
          style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
        ),
        onPressed: () => buttonPressed(buttonText),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Simple Calculator'),
      ),
      body: Column(
        children: <Widget>[
          Container(
            alignment: Alignment.centerRight,
            padding: EdgeInsets.symmetric(
              vertical: 24.0,
              horizontal: 12.0,
            ),
            child: Text(
              output,
              style: TextStyle(
                fontSize: 48.0,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          Expanded(
            child: Divider(),
          ),
          Column(
            children: <Widget>[
              Row(
                children: <Widget>[
                  buildButton("7"),
                  buildButton("8"),
                  buildButton("9"),
                  buildButton("/"),
                ],
              ),
              Row(
                children: <Widget>[
                  buildButton("4"),
                  buildButton("5"),
                  buildButton("6"),
                  buildButton("X"),
                ],
              ),
              Row(
                children: <Widget>[
                  buildButton("1"),
                  buildButton("2"),
                  buildButton("3"),
                  buildButton("-"),
                ],
              ),
              Row(
                children: <Widget>[
                  buildButton("."),
                  buildButton("0"),
                  buildButton("00"),
                  buildButton("+"),
                ],
              ),
              Row(
                children: <Widget>[
                  buildButton("CLEAR"),
                  buildButton("="),
                ],
              )
            ],
          ),
        ],
      ),
    );
  }
}

Step 4: Run the App

Now that the code is in place, run your app using the following command:

flutter run

Explanation:

• UI Structure: The calculator has a simple UI with rows of buttons. Each button is created using the buildButton method.
• State Management: The app uses a StatefulWidget to manage the state of the output and the calculations.
• Arithmetic Operations: Basic arithmetic operations are handled in the buttonPressed method.

This simple app covers the basic functionality of a calculator, including addition, subtraction, multiplication, and division, as well as handling decimals and clearing the input. Calculator app in flutter

Output

Here is an image of the output for the simple calculator app based on the code provided.

Related Articles

• How to make Ludo app in Flutter with Source Code Step by step
• How to make PDF Reader app in Flutter with Source Code Step by step
• How to make QR Scanner app in Flutter with Source Code Step by step
• How to Make a ToDo App with Flutter with source Code StepWise in 2024
• What is package in Flutter (Dart) with example in 2024
• What is class in Flutter(Dart) with example step by step
• Advantage of Flutter with examples in 2024
• Top 15 Amazing Applications Built with Flutter Framework
• Specialized PDF reader designed specifically for music sheets
• Flutter File Integrity Checker app for checking integrity of a file
• Christmas Quote Generator app built with flutter source code
• Create fast food orders and bundle it up into a QR code with flutter
• How to make custom BottomNavigationBar in flutter with source code