A simple Calculator using Flutter

Creating a new flutter project

Open up android studio(or visual studio) to create a new flutter project(If you don’t have flutter installed then follow steps in this video and proceed). Choose Start a new flutter project option

Start a new flutter project

Fetching the dependencies

Flutter provides various packages for simplifying the app building process. Here, we make use of such a package. We will be using math_expressions flutter package. This package helps in solving mathematical expressions in flutter. We can incorporate the package into our app by providing the package name with version in the pubspec.yaml in our flutter project, that is the configuration file.

dependencies:
math_expression:^2.3.0
import 'package:math_expressions/math_expressions.dart';

Building the app

In the default main.dart file we will be removing the unnecessary code and keep the necessary code only. Here we will be using a Material App() widget as the root widget under the runApp of the main function as shown

import 'package:flutter/material.dart';
import 'package:simple_calc/simple_calc_ui.dart';

void main() {
runApp(
MaterialApp(
home: SimpleCalc(),//YourWidgetName
debugShowCheckedModeBanner: false,
),
);
}
class YourWidgetName extends StatefulWidget {
@override
_YourWidgetNameState createState() => _YourWidgetNameState();
}

class _YourWidgetNameState extends State<YourWidgetName> {
@override
Widget build(BuildContext context) {
return Container();
}
}
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(),
);
}
App Bar
Scaffold(
appBar: AppBar(
backgroundColor: Colors.teal,
title: Text(
"Simple Calculator",
style: TextStyle(
color: Colors.white,
),
),
centerTitle: true,
)
),
Scaffold(
resizeToAvoidBottomInset: false,
),
Scaffold(
body:Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [

],
) ,
),
Number and operator input field
class _SimpleCalcState extends State<SimpleCalc> {
TextEditingController num1 = TextEditingController();
TextEditingController num2 = TextEditingController();
TextEditingController operator = TextEditingController();
String ans = '';

@override
Widget build(BuildContext context) {
double w = MediaQuery.of(context).size.width;
double h = MediaQuery.of(context).size.height;
double txt = MediaQuery.textScaleFactorOf(context);
return SafeArea(
);
//1st child of Column() widget
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
//1st number
Container(
padding: EdgeInsets.all(10 * txt),
width: w * 0.35,
child: TextFormField(
cursorColor: Colors.teal,
controller: num1,
onChanged: (val) {
setState(() {
num1.text = val;
num1.selection = TextSelection.fromPosition(
TextPosition(offset: num1.text.length),
);
});
},
keyboardType: TextInputType.number,
decoration: InputDecoration(
hintText: '1st number',
hintStyle: TextStyle(
color: Colors.grey.shade400,
),
),
),
),
//Operator
Container(
padding: EdgeInsets.all(10 * txt),
width: w * 0.25,
child: TextFormField(
textAlign: TextAlign.center,
cursorColor: Colors.teal,
controller: operator,
onChanged: (val) {
setState(() {
operator.text = val;
operator.selection = TextSelection.fromPosition(
TextPosition(offset: operator.text.length),
);
});
},
decoration: InputDecoration(
hintText: '(+,-, etc)',
hintStyle: TextStyle(
color: Colors.grey.shade400,
),
),
),
),
//2nd number
Container(
padding: EdgeInsets.all(10 * txt),
width: w * 0.35,
child: TextFormField(
cursorColor: Colors.teal,
controller: num2,
keyboardType: TextInputType.number,
onChanged: (val) {
setState(() {
num2.text = val;
num2.selection = TextSelection.fromPosition(
TextPosition(offset: num2.text.length),
);
});
},
decoration: InputDecoration(
hintText: '2nd number',
hintStyle: TextStyle(
color: Colors.grey.shade400,
)),
),
),
],
),
Area to display the result
//2nd child of Column() widget
Container(
width: double.infinity,
height: h * 0.4,
child: Center(
child: Text(
ans == '' ? 'Your Answer will be displayed here' : ans,
style: TextStyle(
fontSize: ans == '' ? 16 * txt : 25 * txt,
color: ans == '' ? Colors.grey.shade400 : Colors.teal,
),
),
),
),
//3rd child of Column() widget
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
//Calculate button
Container(
width: w * 0.4,
height: h * 0.08,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.teal,
),
onPressed: () {
ans = calc();
setState(() {});
},
child: Text(
'CALCULATE',
),
),
),
//Clear button
Container(
width: w * 0.4,
height: h * 0.08,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.teal,
),
onPressed: () {
num1.clear();
operator.clear();
num2.clear();
ans = '';
setState(() {});
},
child: Text(
'CLEAR',
),
),
),
],
)
String calc() {
Parser p = Parser();
Expression e = p.parse('${num1.text + operator.text + num2.text}');
ContextModel cm = ContextModel();
num ans = e.evaluate(EvaluationType.REAL, cm);
return ans.toString().length > 10
? ans.toStringAsPrecision(3)
: ans.toString();
}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ashna Nizam

Ashna Nizam

Electrical engineering student who is a tech enthusiast. Flutter app developer. Reach me in GitHub at https://github.com/AshNiz24