simple flutter calculator app
3.6kviews
Hi, welcome to codeplayon to learn share, and explore your skill simple calculator in flutter. Let’s Lean more on flutter in this flutter tutorial we make a simple calculator app. So this flutter article is very interesting for beginners on how to learn flutter for the cross-platform. hare we can create a simple calculator in fluter so that you can learn share more things like.
- Simple design of a calculator in a flutter.
- making login for ( + , – ,*, / ) of two value and get results.
- Button Click Listener.
- get value on button click and show on a text file.
- Result on multiple values.
- math_expressions: ^1.1.1 dependency.
So let’s make a flutter calculator widget and do that follow the code below step to make it easy.
flutter calculator widget
First of you can create an flutter project click on file –> New –> New Flutter project and build your project. after build successfully.
in you pubspec.yaml file open and math_expressions: ^1.1.1 dependency and get pub .
pubspec.yaml file source code
name: first_flutter_app
description: A new Flutter application.
version: 1.0.0+1
environment:
sdk: ">=2.12.0 <3.0.0"
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.2
math_expressions: ^1.1.1
dev_dependencies:
flutter_test:
sdk: flutter
# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec
# The following section is specific to Flutter.
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
You can follow these for create button Widget
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.0),
onPressed: () => buttonPressed(buttonText),
child: Text(
buttonText,
style: TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.normal,
color: Colors.white
),
)
),
);
}
On Button click to Caluculate result and value login
in these method you can see all logic like ( C ) to Clear al Result for TextFild ( X ) remove last value , ( = ) Get Result etc.
buttonPressed(String buttonText){
setState(() {
if(buttonText == "C"){
equation = "0";
result = "0";
equationFontSize = 38.0;
resultFontSize = 48.0;
}
else if(buttonText == "⌫"){
equationFontSize = 48.0;
resultFontSize = 38.0;
equation = equation.substring(0, equation.length - 1);
if(equation == ""){
equation = "0";
}
}
else if(buttonText == "="){
equationFontSize = 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{
equationFontSize = 48.0;
resultFontSize = 38.0;
if(equation == "0"){
equation = buttonText;
}else {
equation = equation + buttonText;
}
}
});
}
Making UI like Button click add button in a row and set text on button to follow below code .
in these method you can lear how to make a UI in flutter like how to mange mutipal widget ina row and how to set test and stype for button text color button color etc.
@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: equationFontSize),),
),
Container(
alignment: Alignment.centerRight,
padding: EdgeInsets.fromLTRB(10, 30, 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.redAccent),
buildButton("⌫", 1, Colors.blue),
buildButton("÷", 1, Colors.blue),
]
),
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.blue),
]
),
TableRow(
children: [
buildButton("-", 1, Colors.blue),
]
),
TableRow(
children: [
buildButton("+", 1, Colors.blue),
]
),
TableRow(
children: [
buildButton("=", 2, Colors.redAccent),
]
),
],
),
)
],
),
],
),
);
}
Full Source Code simple calculator in flutter.
Main.Dart File
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.blue),
home: SimpleCalculator(),
);
}
}
class SimpleCalculator extends StatefulWidget {
@override
_SimpleCalculatorState createState() => _SimpleCalculatorState();
}
class _SimpleCalculatorState extends State<SimpleCalculator> {
String equation = "0";
String result = "0";
String expression = "";
double equationFontSize = 38.0;
double resultFontSize = 48.0;
buttonPressed(String buttonText){
setState(() {
if(buttonText == "C"){
equation = "0";
result = "0";
equationFontSize = 38.0;
resultFontSize = 48.0;
}
else if(buttonText == "⌫"){
equationFontSize = 48.0;
resultFontSize = 38.0;
equation = equation.substring(0, equation.length - 1);
if(equation == ""){
equation = "0";
}
}
else if(buttonText == "="){
equationFontSize = 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{
equationFontSize = 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.0),
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: equationFontSize),),
),
Container(
alignment: Alignment.centerRight,
padding: EdgeInsets.fromLTRB(10, 30, 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.redAccent),
buildButton("⌫", 1, Colors.blue),
buildButton("÷", 1, Colors.blue),
]
),
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.blue),
]
),
TableRow(
children: [
buildButton("-", 1, Colors.blue),
]
),
TableRow(
children: [
buildButton("+", 1, Colors.blue),
]
),
TableRow(
children: [
buildButton("=", 2, Colors.redAccent),
]
),
],
),
)
],
),
],
),
);
}
}
