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

Creating an advanced calculator app in Flutter involves additional features beyond basic arithmetic, such as scientific functions (e.g., trigonometry, logarithms) and better state management. Below is a step-by-step guide with source code.

Step 1: Set Up a New Flutter Project

1. Create a new Flutter project:

   flutter create advanced_calculator

2. Navigate to the project directory:

   cd advanced_calculator

Step 2: Update pubspec.yaml

Add the math_expressions package to handle complex mathematical calculations:

dependencies:
  flutter:
    sdk: flutter
  math_expressions: ^2.2.0

Run flutter pub get to install the package.

Step 3: Create the User Interface and Logic

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

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

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

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

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

class _CalculatorHomePageState extends State<CalculatorHomePage> {
  String expression = "";
  String result = "0";

  void buttonPressed(String buttonText) {
    setState(() {
      if (buttonText == "CLEAR") {
        expression = "";
        result = "0";
      } else if (buttonText == "=") {
        try {
          Parser p = Parser();
          Expression exp = p.parse(expression.replaceAll('X', '*'));
          ContextModel cm = ContextModel();
          result = '${exp.evaluate(EvaluationType.REAL, cm)}';
        } catch (e) {
          result = "Error";
        }
      } else {
        expression += buttonText;
      }
    });
  }

  Widget buildButton(String buttonText, {Color? color, Color? textColor}) {
    return Expanded(
      child: OutlineButton(
        padding: EdgeInsets.all(24.0),
        color: color,
        textColor: textColor ?? Colors.black,
        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('Advanced Calculator'),
      ),
      body: Column(
        children: <Widget>[
          Container(
            alignment: Alignment.centerRight,
            padding: EdgeInsets.symmetric(
              vertical: 24.0,
              horizontal: 12.0,
            ),
            child: Text(
              expression,
              style: TextStyle(
                fontSize: 32.0,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          Container(
            alignment: Alignment.centerRight,
            padding: EdgeInsets.symmetric(
              vertical: 24.0,
              horizontal: 12.0,
            ),
            child: Text(
              result,
              style: TextStyle(
                fontSize: 48.0,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          Expanded(
            child: Divider(),
          ),
          Column(
            children: <Widget>[
              Row(
                children: <Widget>[
                  buildButton("7"),
                  buildButton("8"),
                  buildButton("9"),
                  buildButton("/", color: Colors.blue, textColor: Colors.white),
                ],
              ),
              Row(
                children: <Widget>[
                  buildButton("4"),
                  buildButton("5"),
                  buildButton("6"),
                  buildButton("X", color: Colors.blue, textColor: Colors.white),
                ],
              ),
              Row(
                children: <Widget>[
                  buildButton("1"),
                  buildButton("2"),
                  buildButton("3"),
                  buildButton("-", color: Colors.blue, textColor: Colors.white),
                ],
              ),
              Row(
                children: <Widget>[
                  buildButton("."),
                  buildButton("0"),
                  buildButton("00"),
                  buildButton("+", color: Colors.blue, textColor: Colors.white),
                ],
              ),
              Row(
                children: <Widget>[
                  buildButton("sin"),
                  buildButton("cos"),
                  buildButton("tan"),
                  buildButton("sqrt", color: Colors.blue, textColor: Colors.white),
                ],
              ),
              Row(
                children: <Widget>[
                  buildButton("CLEAR", color: Colors.red, textColor: Colors.white),
                  buildButton("=", color: Colors.green, textColor: Colors.white),
                ],
              )
            ],
          ),
        ],
      ),
    );
  }
}

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 UI includes buttons for numbers, basic arithmetic operations, and additional scientific functions like sin, cos, tan, and sqrt.
• Math Expressions: The math_expressions package is used to evaluate the expressions entered by the user. It allows for more complex operations and ensures accurate calculations.
• State Management: The app uses a StatefulWidget to manage the state of the expression and result.

This advanced calculator app covers both basic and scientific functions, making it more versatile for various calculations. Advanced Calculator app in flutter

Output

Here is an image of the output for the advanced 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
• How to make custom BottomNavigationBar in flutter with source code
• Create fast food orders and bundle it up into a QR code with flutter