Open In App

Advanced Calculator App using Flutter

Improve
Improve
Like Article
Like
Save
Share
Report

Flutter SDK is an open-source software development kit for building beautiful UI which is natively compiled. In this article, we are going to create an advanced calculator app by using some advanced packages available in Flutter. In this app, you get some functionality. In this app you have only one screen in that screen we perform our whole calculator functionality.

  • In this calculator app, you can add the number
  • In this calculator app, you can subtract the number
  • In this calculator app, you can multiply the number
  • In this calculator app, you can divide the number
  • In this calculator, you can reverse the number

Here is the UI of the Calculator App:

calculator screen

A sample video is given below to get an idea about what we are going to do in this article.

This is the calculator app screen and now see the whole code.

Code:

Dart




// ignore_for_file: prefer_const_constructors
  
import 'package:flutter/material.dart';
import 'dart:math' as math;
import 'package:math_expressions/math_expressions.dart';
  
import 'home.dart';
  
void main() {
  runApp(const MyApp());
}
  
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.dark(),
      home: MyCalculator(),
    );
  }
}
  
class MyCalculator extends StatefulWidget {
  const MyCalculator({super.key});
  
  @override
  State<MyCalculator> createState() => _MyCalculatorState();
}
  
class _MyCalculatorState extends State<MyCalculator> {
  double num1 = 0.0;
  double num2 = 0.0;
  var input = '';
  var output = '';
  var operation = '';
  //var hideinput=false;
  var outputSize=32.0;
  
  _onButtonClicked(value) {
    if (value == "AC") {
      input = '';
      output = '';
    } else if (value == "A") {
      if (input.isNotEmpty) {
        input = input.substring(0, input.length - 1);
      }
    } else if (value == "=") {
      if (input.isNotEmpty) {
        var userinput = input;
        userinput = input.replaceAll("", "");
        Parser P = Parser();
        Expression expression = P.parse(userinput);
        ContextModel cm = ContextModel();
        var finalvalue = expression.evaluate(EvaluationType.REAL, cm);
        output = finalvalue.toString();
        if (output.endsWith(".0")) {
          output = output.substring(0, output.length - 2);
        }
        // input=output;
        // hideinput=true;
        // outputSize=50;
        
      }
    } else {
      input = input + value;
    }
    setState(() {});
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        // ignore: prefer_const_literals_to_create_immutables
        children: [
          Expanded(
            child: Container(
              height: 200,
              width: double.infinity,
              color: Colors.transparent,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.end,
                mainAxisAlignment: MainAxisAlignment.end,
                // ignore: prefer_const_literals_to_create_immutables
                children: [
                  Text(
                    input,
                    style: TextStyle(fontSize: 48, color: Colors.white),
                  ),
                  SizedBox(
                    height: 10,
                  ),
                  Text(
                    output,
                    style: TextStyle(
                    fontSize: 30,
                      color: Colors.white.withOpacity(0.7),
                    ),
                  ),
                  SizedBox(
                    height: 20,
                  ),
                ],
              ),
            ),
          ),
          Row(
            // ignore: prefer_const_literals_to_create_immutables
            children: [
              button("AC", Colors.black, Colors.orangeAccent),
              button("A", Colors.black, Colors.orangeAccent),
              button("", Colors.transparent, Colors.white),
              button("/", Colors.black, Colors.orangeAccent),
            ],
          ),
          Row(
            // ignore: prefer_const_literals_to_create_immutables
            children: [
              button("7", Colors.black, Colors.white),
              button("8", Colors.black, Colors.white),
              button("9", Colors.black, Colors.white),
              button("*", Colors.black, Colors.orangeAccent),
            ],
          ),
          Row(
            // ignore: prefer_const_literals_to_create_immutables
            children: [
              button("4", Colors.black, Colors.white),
              button("5", Colors.black, Colors.white),
              button("6", Colors.black, Colors.white),
              button("-", Colors.black, Colors.orangeAccent),
            ],
          ),
          Row(
            // ignore: prefer_const_literals_to_create_immutables
            children: [
              button("1", Colors.black, Colors.white),
              button("2", Colors.black, Colors.white),
              button("3", Colors.black, Colors.white),
              button("+", Colors.black, Colors.orangeAccent),
            ],
          ),
          Row(
            // ignore: prefer_const_literals_to_create_immutables
            children: [
              button("%", Colors.black, Colors.orangeAccent),
              button("0", Colors.black, Colors.white),
              button(".", Colors.black, Colors.white),
              button("=", Colors.orangeAccent, Colors.white),
            ],
          ),
        ],
      ),
    );
  }
  
  button(text, color, tcolor) {
    return Expanded(
      child: Container(
        padding: EdgeInsets.all(10),
        child: ElevatedButton(
          style: ElevatedButton.styleFrom(
            padding: EdgeInsets.all(10),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(5),
            ),
            primary: color,
          ),
          onPressed: () => _onButtonClicked(text),
          child: Text(
            text,
            style: TextStyle(
                fontSize: 15, fontWeight: FontWeight.bold, color: tcolor),
          ),
        ),
      ),
    );
  }
}


Copy the code from here and paste it into your main screen when you paste this code then it shows some error to you due to lack of some dependencies. So simply you have to tap on the error and add dependencies in your pubsec.yml and the error will go you can easily use the app and also use it as a collage mini project if you are in the first year or second year, not for the third year students.

Output:



Last Updated : 08 Apr, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads