Skill Development Course

UI Designs-Flutter Project
Title: Implementation of Calculator Using Infix notation

By:

GVH Vardhan Reddy 22911A05M2

K. Vamshi Reddy 22911A05N2

Section: CSE-D

Under the guidance of

Mrs. S. Sri Lakshmi

Assistant Professor
ABSTRACT:
This project is a Flutter-based Calculator Application designed to perform
basic arithmetic operations with a modern and user-friendly interface. Built using
the Flutter framework, it leverages the math_expressions package to
evaluate mathematical expressions efficiently. The application provides a
responsive and visually appealing layout compatible with both Android and iOS
platforms.

Key features include:

● A dynamic display that shows the input expression and the calculated
result.
● A simple keypad with buttons for numbers, operators, and functional
actions like clearing inputs or evaluating expressions.
● Real-time error handling to display "Error" for invalid inputs or
calculations.

This project showcases the integration of Flutter's widget system to build

interactive UI elements and emphasizes clean state management for seamless user
interaction. It serves as a foundational example for creating lightweight,
cross-platform utility apps using Flutter.
INTRODUCTION:
The Calculator Application is a cross-platform mobile app developed using the
Flutter framework, designed to perform basic arithmetic operations such as
addition, subtraction, multiplication, and division. Calculators are essential tools
in everyday life, aiding in quick computations for academic, professional, and
personal use. This project demonstrates the development of an interactive and
efficient calculator with a clean, user-friendly interface.

Flutter, a popular framework for building natively compiled applications for

mobile, web, and desktop from a single codebase, was chosen for its flexibility
and ability to create responsive UIs. The application utilizes Flutter's powerful
widget system to design the interface and the math_expressions package to
handle mathematical expression parsing and evaluation.

Key features of the application include:

1. Dynamic Expression Display: Real-time visualization of user inputs and

results.
2. Custom Keypad: A layout of buttons for numbers, operators, and essential
functions like "Clear" and "Evaluate."
3. Error Handling: Displays error messages for invalid expressions to enhance
user experience.
4. Cross-Platform Compatibility: A single codebase ensures seamless
functionality across both Android and iOS devices.

This project not only serves as a functional calculator but also highlights the use
of Flutter for building lightweight, interactive applications. It provides an
excellent foundation for beginners learning Flutter and can be further extended to
include advanced features like scientific calculations or history tracking.
Components:
The Calculator Application is composed of several key components, each playing
a specific role in its functionality and user experience. These components are
broadly categorized into UI Components, Logic Components, and Supporting
Tools.

1. UI Components

These are the visual and interactive elements of the application, built using
Flutter's widget system.

● AppBar:
The top bar of the application, displaying the title "Calculator." It provides
a consistent navigation structure across Flutter apps.
● Display Panel:
○ Expression Display: Shows the mathematical expression entered by
the user.
○ Result Display: Displays the calculated result or error messages.
This panel ensures real-time feedback for user inputs and outputs.
● Keypad:
○ A grid of buttons for numbers (0–9), operators (+, -, *, /), and
actions (C for clearing, = for evaluating).
○ ElevatedButton: Each button is built using Flutter's
ElevatedButton widget, styled with styleFrom to define size,
color, and appearance.

2. Logic Components

These components handle the application’s functionality, including state

management and mathematical computations.

● State Management:
○ Implemented using a StatefulWidget (CalculatorScreen)
to dynamically update the UI based on user input.
○ The _expression variable stores the user's input as a string, and
 _result holds the calculated output.
● Input Handling:
○ The _onPressed method captures button presses, updates the
expression string, and triggers evaluation when the "=" button is
pressed.
● Expression Evaluation:
○ math_expressions Package:
■ This library is used to parse and evaluate the mathematical
expression entered by the user.
■ The Parser class converts the string input into a
mathematical expression object, which is then evaluated using
the ContextModel class.
● Error Handling:
○ Invalid expressions (e.g., dividing by zero or syntax errors) are
caught in a try-catch block, and "Error" is displayed in the result
area.

3. Supporting Tools

● Flutter Framework:
○ Provides a comprehensive suite of pre-built widgets and tools to
create the application’s UI and handle interactivity.
● Dart Language:
○ The programming language used for developing Flutter applications,
known for its performance and ease of use.
● math_expressions Library:
○ A dependency that simplifies parsing and evaluation of mathematical
formulas without needing to manually implement a computation
engine.

4. Customization Options

● Themes and Styles:

○ The app’s appearance can be easily customized using Flutter’s
ThemeData and widget-specific styling properties like
 TextStyle and ButtonStyle.
● Extensibility:
○ The modular design allows for additional features, such as scientific
operations, history tracking, or user-defined themes.

Summary of Components and Roles

Component Role

AppBar Displays the app title and provides visual

structure.

Display Panel Shows the input expression and calculated

result.

Keypad Enables user interaction for entering inputs.

State Updates UI dynamically in response to user

Management actions.

Expression Evaluates mathematical expressions using a

Parser library.

Error Ensures robust user experience by managing

Handling invalid inputs.

These components work together to deliver a simple yet effective calculator

application, demonstrating the core principles of Flutter development.
Source Code:

Main.dart

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

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: CalculatorScreen(),
theme: ThemeData.dark(),
);
}
}

class CalculatorScreen extends StatefulWidget {

@override
_CalculatorScreenState createState() => _CalculatorScreenState();
}

class _CalculatorScreenState extends State<CalculatorScreen> {

String _expression = "";
String _result = "0";

void _onPressed(String input) {

setState(() {
if (input == "C") {
_expression = "";
_result = "0";
} else if (input == "=") {
 try {
Parser p = Parser();
Expression exp = p.parse(_expression);
ContextModel cm = ContextModel();
double eval = exp.evaluate(EvaluationType.REAL, cm);
_result = eval.toString();
} catch (e) {
_result = "Error";
}
} else {
_expression += input;
}
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Calculator"),
),
body: Column(
children: [
Expanded(
flex: 2,
child: Container(
padding: EdgeInsets.all(20),
alignment: Alignment.bottomRight,
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
_expression,
style: TextStyle(fontSize: 24, color: Colors.white70),
),
Text(
_result,
 style: TextStyle(fontSize: 48, fontWeight: FontWeight.bold, color:
Colors.white),
),
],
),
),
),
Divider(height: 1, color: Colors.white),
_buildKeypad(),
],
),
);
}

Widget _buildKeypad() {
final keys = [
['7', '8', '9', '/'],
['4', '5', '6', '*'],
['1', '2', '3', '-'],
['C', '0', '=', '+'],
];

return Column(
children: keys.map((row) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: row.map((key) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton(
onPressed: () => _onPressed(key),
child: Text(
key,
style: TextStyle(fontSize: 24, color: Colors.black),
),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white, // Use backgroundColor instead of
primary
 minimumSize: Size(80, 80),
),
),
);
}).toList(),
);
}).toList(),
);
}
}
Output:
CONCLUSION:
The Calculator Application is a practical and user-friendly tool that demonstrates
the power and versatility of Flutter for developing cross-platform mobile
applications. By combining a clean user interface with robust mathematical
evaluation capabilities, this project highlights the ease of creating interactive
applications with Flutter's widget-based architecture and the
math_expressions library.

Key takeaways from this project include:

● Efficient State Management: The dynamic UI updates in real-time based

on user input, ensuring a smooth and intuitive user experience.
● Cross-Platform Compatibility: A single codebase ensures consistent
functionality across both Android and iOS devices.
● Extensibility: The modular design allows for easy enhancements, such as
adding advanced features or customizing the UI.

This application serves as an excellent foundation for beginners learning Flutter

and a stepping stone toward building more complex utility apps. By leveraging
Flutter's capabilities and Dart's expressive syntax, the project not only fulfills its
functional requirements but also demonstrates how modern tools simplify app
development for a wide range of platforms.