In this article, we are going to learn how to make simple Calculator android and ios application using flutter. For this purpose we are using two library which are given below.
material.dart math_expressions.dart
First library is used in any flutter application for GUI purpose, and second one is used for maths expression solve.
In pubspec.yaml file you have to add following library.
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.3
math_expressions: ^2.0.0
Now click on pub upgrade on upper side.
For more information about math_expression library visit this
For video Tutorial visit above video.
First of all we have to import both library in our main.dart file as below. And we have to create main method as below.
import 'package:flutter/material.dart'; import 'package:math_expressions/math_expressions.dart'; void main() => runApp(Calculator());
Now create Calculator class which extends StatelessWidgets and override build method as below.
class Calculator extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Calculator',
theme: ThemeData(primarySwatch: Colors.green),
home: SimpleCalculator(),
);
}
}
In this debugShowCheckedModeBanner: false is used to remove debug watermark from top of the screen, title: ‘Calculator’ is used for give title, theme: ThemeData(primarySwatch: Colors.green) is used to give primary color of the android app theme, home: SimpleCalculator() is used for main screen GUI, Here SimpleCalculator class is StatefulWidgets in which we can update the property of the Widgets.
Now create class SimpleCalculator as follow.
class SimpleCalculator extends StatefulWidget {
@override
_SimpleCalculatorState createState() => _SimpleCalculatorState();
}
class _SimpleCalculatorState extends State<SimpleCalculator> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Calculator'),),
body: Column(
children: <Widget>[
Container(
alignment: Alignment.centerRight,
padding: EdgeInsets.fromLTRB(10, 20, 10, 0),
child: Text(equation,style: TextStyle(fontSize: equFontsize),),
),
Container(
alignment: Alignment.centerRight,
padding: EdgeInsets.fromLTRB(10, 20, 10, 0),
child: Text(result,style: TextStyle(fontSize: resultFontsize),),
),
Expanded(
child: Divider(),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width * .75,
child: Table(
children: [
TableRow(
children: [
buildButton("C", 1, Colors.indigo),
buildButton("⌫", 1, Colors.pink),
buildButton("÷", 1, Colors.pink),
]
),
TableRow(
children: [
buildButton("7", 1, Colors.black87),
buildButton("8", 1, Colors.black87),
buildButton("9", 1, Colors.black87),
]
),
TableRow(
children: [
buildButton("4", 1, Colors.black87),
buildButton("5", 1, Colors.black87),
buildButton("6", 1, Colors.black87),
]
),
TableRow(
children: [
buildButton("1", 1, Colors.black87),
buildButton("2", 1, Colors.black87),
buildButton("3", 1, Colors.black87),
]
),
TableRow(
children: [
buildButton(".", 1, Colors.black87),
buildButton("0", 1, Colors.black87),
buildButton("00", 1, Colors.black87),
]
)
]
),
),
Container(
width: MediaQuery.of(context).size.width * 0.25,
child: Table(
children: [
TableRow(
children: [
buildButton("×", 1, Colors.pink),
]
),
TableRow(
children: [
buildButton("-", 1, Colors.pink),
]
),
TableRow(
children: [
buildButton("+", 1, Colors.pink),
]
),
TableRow(
children: [
buildButton("=", 2, Colors.green),
]
)
]
)
)
],
)
]
)
);
}
This class build method contains our design part. Here buildButton() is method which return the button for calculator class. The buildButton is as follow.
Widget buildButton(String buttonText, double buttonHeight,Color buttonColor)
{
return Container(
height: MediaQuery.of(context).size.height * 0.1 * buttonHeight,
color: buttonColor,
child: FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0.0),
side: BorderSide(
color: Colors.white,
width: 1,
style: BorderStyle.solid)
),
padding: EdgeInsets.all(16.00),
onPressed: () => buttonPressed(buttonText),
child: Text(
buttonText,
style: TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.normal,
color: Colors.white
),
),
),
);
}
Here buttonPressed is method which handles the calculator function as below.
String equation = "0";
String result = "0";
String expression = "";
double equFontsize = 38.0;
double resultFontsize = 48.0;
buttonPressed(String buttonText)
{
setState(() {
if(buttonText=="C")
{
equation="0";
result="0";
equFontsize = 38.0;
resultFontsize = 48.0;
}
else if(buttonText=="⌫")
{
equFontsize = 48.0;
resultFontsize = 38.0;
equation=equation.substring(0,equation.length -1);
if(equation=="")
equation="0";
}
else if(buttonText=="=")
{
equFontsize = 38.0;
resultFontsize = 48.0;
expression=equation;
expression=expression.replaceAll('×', '*');
expression=expression.replaceAll('÷', '/');
try{
Parser p=Parser();
Expression exp=p.parse(expression);
ContextModel cm=ContextModel();
result= '${exp.evaluate(EvaluationType.REAL, cm)}';
}catch(e){
result = "Error";
}
}
else
{
equFontsize = 48.0;
resultFontsize = 38.0;
if(equation=="0"){
equation=buttonText;
}
else {
equation = equation + buttonText;
}
}
});
}
Here is the full code of the Calculator class.
import 'package:flutter/material.dart';
import 'package:math_expressions/math_expressions.dart';
void main() => runApp(Calculator());
class Calculator extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Calculator',
theme: ThemeData(primarySwatch: Colors.green),
home: SimpleCalculator(),
);
}
}
class SimpleCalculator extends StatefulWidget {
@override
_SimpleCalculatorState createState() => _SimpleCalculatorState();
}
class _SimpleCalculatorState extends State<SimpleCalculator> {
String equation = "0";
String result = "0";
String expression = "";
double equFontsize = 38.0;
double resultFontsize = 48.0;
buttonPressed(String buttonText)
{
setState(() {
if(buttonText=="C")
{
equation="0";
result="0";
equFontsize = 38.0;
resultFontsize = 48.0;
}
else if(buttonText=="⌫")
{
equFontsize = 48.0;
resultFontsize = 38.0;
equation=equation.substring(0,equation.length -1);
if(equation=="")
equation="0";
}
else if(buttonText=="=")
{
equFontsize = 38.0;
resultFontsize = 48.0;
expression=equation;
expression=expression.replaceAll('×', '*');
expression=expression.replaceAll('÷', '/');
try{
Parser p=Parser();
Expression exp=p.parse(expression);
ContextModel cm=ContextModel();
result= '${exp.evaluate(EvaluationType.REAL, cm)}';
}catch(e){
result = "Error";
}
}
else
{
equFontsize = 48.0;
resultFontsize = 38.0;
if(equation=="0"){
equation=buttonText;
}
else {
equation = equation + buttonText;
}
}
});
}
Widget buildButton(String buttonText, double buttonHeight,Color buttonColor)
{
return Container(
height: MediaQuery.of(context).size.height * 0.1 * buttonHeight,
color: buttonColor,
child: FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0.0),
side: BorderSide(
color: Colors.white,
width: 1,
style: BorderStyle.solid)
),
padding: EdgeInsets.all(16.00),
onPressed: () => buttonPressed(buttonText),
child: Text(
buttonText,
style: TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.normal,
color: Colors.white
),
),
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Calculator'),),
body: Column(
children: <Widget>[
Container(
alignment: Alignment.centerRight,
padding: EdgeInsets.fromLTRB(10, 20, 10, 0),
child: Text(equation,style: TextStyle(fontSize: equFontsize),),
),
Container(
alignment: Alignment.centerRight,
padding: EdgeInsets.fromLTRB(10, 20, 10, 0),
child: Text(result,style: TextStyle(fontSize: resultFontsize),),
),
Expanded(
child: Divider(),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width * .75,
child: Table(
children: [
TableRow(
children: [
buildButton("C", 1, Colors.indigo),
buildButton("⌫", 1, Colors.pink),
buildButton("÷", 1, Colors.pink),
]
),
TableRow(
children: [
buildButton("7", 1, Colors.black87),
buildButton("8", 1, Colors.black87),
buildButton("9", 1, Colors.black87),
]
),
TableRow(
children: [
buildButton("4", 1, Colors.black87),
buildButton("5", 1, Colors.black87),
buildButton("6", 1, Colors.black87),
]
),
TableRow(
children: [
buildButton("1", 1, Colors.black87),
buildButton("2", 1, Colors.black87),
buildButton("3", 1, Colors.black87),
]
),
TableRow(
children: [
buildButton(".", 1, Colors.black87),
buildButton("0", 1, Colors.black87),
buildButton("00", 1, Colors.black87),
]
)
]
),
),
Container(
width: MediaQuery.of(context).size.width * 0.25,
child: Table(
children: [
TableRow(
children: [
buildButton("×", 1, Colors.pink),
]
),
TableRow(
children: [
buildButton("-", 1, Colors.pink),
]
),
TableRow(
children: [
buildButton("+", 1, Colors.pink),
]
),
TableRow(
children: [
buildButton("=", 2, Colors.green),
]
)
]
)
)
],
)
]
)
);
}
}