(i) Flutter –<\/strong> You can refer to the link for installing Flutter<\/a> depending on your operating system. Now that the setup is ready, let\u2019s get started!<\/p>\n Please download the source code of Flutter Calculator App Project: Flutter Calculator App Project Code.<\/strong><\/a><\/p>\n First, let\u2019s create a new project for the App. Let\u2019s start with creating the main layout of the page. The below image shows the main.dart file which first executes when the app runs. Here we have set the background color for the AppBar as an Orange accent and background for the home page as black with a little white added to it. You can choose the colors according to your interest. Here, we have created a separate widget for HomeScreen, which is returned as the body for Scaffold.<\/p>\n Next, we start building the UI of the HomeScreen. We have used Stateful Widget for HomeScreen as can be seen below, the reason for this is that the UI needed to update as the user makes new calculations. We have also initialized two variables, userInput and finalResult, which will store the input expression by the user and the result of the expression, respectively.<\/p>\n The HomeScreen consists of two parts:-(i) The Display Screen and (ii) The Buttons to give Input. The below image shows the code for displaying part of the calculator. It consists of two text fields stored in a container, the input from the user and the result, which is displayed below. These two are stored in the Column widget as they need to be displayed vertically.<\/p>\n The specifications like fontSize, color, padding , alignment can be seen from the code below.<\/p>\n Next, let\u2019s create the buttons part of the calculator through which the user will give input as numbers and various operators like +, – *, etc. Here, we have used GridView builder to create the view for buttons, as the buttons will be arranged in the form of a grid. We have used crossAxisCount in the SilverGridDelegate as 4 so that each row will contain four buttons.<\/p>\n Using itemBuilder in GridView builder, we are returning the styled buttons where for each button we are passing the background color, text color, text and the function which will be executed when the button is pressed. Here StyledButton is a new widget which we have created, which is mentioned in the section.<\/p>\n For each unique type of button like numbers or operators, different styling is done.<\/p>\n The below code shows the styling of the button used in the calculator for which we have created a new widget. Here we are returning a GestureDetector as a button which takes the shape of a circle using the CircleAvatar widget. The font size is set to 26. The widget accepts the background color, text color, and text to be displayed as well as the function in its constructor function.<\/p>\n Here we have used the math expressions library available in Flutter for calculating the expression given by the user. As can be seen below before giving the input to the parser, the \u2018x\u2019 sign in the expression is replaced by the \u2018*\u2019 sign as the library recognizes the latter for multiplication. Then the expression is evaluated using the ContextModel.<\/p>\n 1. Multiplication<\/strong><\/p>\n 2. Divison<\/strong> 3. Addition<\/strong> I hope through this article, you get to know how to build a calculator in Flutter and the various components included in building it like GridView builder, Custom Styled Buttons, function to evaluate mathematical expressions and much more.<\/p>\n Thank you for reading! Keep Learning Flutter!<\/span><\/p>\n","protected":false},"excerpt":{"rendered":" Due to advancements in Flutter in recent years, several startups and organizations have been using it to create their apps. Flutter’s flexibility allows for the use of a single codebase to build apps on...<\/p>\n","protected":false},"author":86671,"featured_media":132526,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28289],"tags":[30255,30254,30257,30249,30253,30256,30251,30252,30250],"class_list":["post-120050","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-flutter-tutorials","tag-calculator-app","tag-calculator-app-using-flutter","tag-calculator-project","tag-flutter","tag-flutter-calculator-app","tag-flutter-calculator-app-project","tag-flutter-project-for-practice","tag-flutter-project-ideas","tag-flutter-projects"],"yoast_head":"\n
\n(ii) Android Studio –<\/strong> This is necessary as it will be used to run app in the Android<\/a> emulator.
\n(iii) Visual Studio Code –<\/strong> Although this is not necessary, you can also build apps in Android Studio. But in our case we have used VS code<\/a> as it is a good code editor.<\/p>\nDownload Flutter Calculator App Project<\/h3>\n
Create New Project<\/h3>\n
\nGo to the directory on your terminal\/command-line and enter the command $flutter create \u201cProject-Name\u201d.
\nHere as you can see from the below image, I am using the project-name as a calculator.<\/p>\n![\"flutter](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/12\/flutter-create-calcutator.webp\")
<\/a><\/p>\nSteps to Build Flutter Calculator App<\/h3>\n
1. Creating Main Layout for the App<\/h4>\n
import 'package:flutter\/material.dart';\r\n\r\nimport '.\/home_screen.dart';\r\n\r\nvoid main() {\r\n return runApp(\r\n MaterialApp(\r\n theme: ThemeData(primaryColor: Colors.orangeAccent),\r\n home: Scaffold(\r\n appBar: AppBar(\r\n title: const Text('Calculator'),\r\n backgroundColor: Colors.orangeAccent,\r\n ),\r\n backgroundColor: const Color.fromARGB(255, 20, 20, 20),\r\n body: const HomeScreen(),\r\n ),\r\n ),\r\n );\r\n}<\/pre>\n2. Building UI of HomeScreen<\/h4>\n
class HomeScreen extends StatefulWidget {\r\n const HomeScreen({super.key});\r\n\r\n @override\r\n State<HomeScreen> createState() {\r\n return _HomeScreenState();\r\n }\r\n}\r\n\r\nclass _HomeScreenState extends State<HomeScreen> {\r\n\r\n \/\/ These are the buttons that will be displayed on the calculator\r\n var buttons = [ 'AC', 'DEL', '%', '\/', '7', '8', '9', 'x', '4', '5', '6', '-', '1', '2', '3', '+', '', '0', '.', '='] ;\r\n var userInput = '';\r\n var finalResult = '';<\/pre>\n@override\r\n Widget build(BuildContext context) {\r\n return Column(\r\n children: [\r\n Expanded(\r\n \/\/ Display part of the Calculator\r\n child: Column(\r\n mainAxisAlignment: MainAxisAlignment.spaceEvenly,\r\n children: [\r\n \/\/ Input from User\r\n Container(\r\n padding: const EdgeInsets.all(20),\r\n alignment: Alignment.centerRight,\r\n child: Text(\r\n userInput,\r\n style: const TextStyle(fontSize: 21, color: Colors.white),\r\n ),\r\n ),\r\n \/\/ Answer to the Calculation\r\n Container(\r\n padding: const EdgeInsets.all(20),\r\n alignment: Alignment.centerRight,\r\n child: Text(\r\n finalResult,\r\n style: const TextStyle(fontSize: 24, color: Colors.white),\r\n ),\r\n ),\r\n ],\r\n ),\r\n ),<\/pre>\n\/\/ Buttons Part of the Calculator\r\n Expanded(\r\n flex: 2,\r\n child: GridView.builder(\r\n padding: const EdgeInsets.all(15),\r\n itemCount: buttons.length,\r\n gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(\r\n crossAxisCount: 4, mainAxisSpacing: 15, crossAxisSpacing: 15),\r\n itemBuilder: (BuildContext context, int index) {\r\n \/\/ When button is 'AC'\r\n if (index == 0) {\r\n return StyledButton(\r\n bgColor: const Color.fromARGB(255, 174, 174, 174),\r\n textColor: Colors.black,\r\n text: buttons[index],\r\n func: () {\r\n setState(() {\r\n userInput = '';\r\n finalResult = '';\r\n });\r\n });\r\n }\r\n \/\/ When Button is 'DEL'\r\n else if (index == 1) {\r\n return StyledButton(\r\n bgColor: const Color.fromARGB(255, 174, 174, 174),\r\n textColor: Colors.black,\r\n text: buttons[index],\r\n func: () {\r\n setState(() {\r\n userInput =\r\n userInput.substring(0, userInput.length - 1);\r\n });\r\n });\r\n }\r\n \/\/When Button is '%'\r\n else if (index == 2) {\r\n return StyledButton(\r\n bgColor: const Color.fromARGB(255, 174, 174, 174),\r\n textColor: Colors.black,\r\n text: buttons[index],\r\n func: () {\r\n setState(() {\r\n userInput += buttons[index];\r\n });\r\n });\r\n }\r\n \/\/ When Button is '\/' , 'x', '-', '+'\r\n else if (index == 3 || index == 7 || index == 11 || index == 15) {\r\n return StyledButton(\r\n bgColor: Colors.orangeAccent,\r\n textColor: Colors.white,\r\n text: buttons[index],\r\n func: () {\r\n setState(() {\r\n userInput += buttons[index];\r\n });\r\n });\r\n }\r\n \/\/ When Button is '='\r\n else if (index == 19) {\r\n return StyledButton(\r\n bgColor: Colors.orangeAccent,\r\n textColor: Colors.white,\r\n text: buttons[index],\r\n func: () {\r\n setState(() {\r\n finalResult = evaluate(userInput);\r\n });\r\n });\r\n }\r\n \/\/ For the remaining buttons\r\n else {\r\n return StyledButton(\r\n bgColor: const Color.fromARGB(221, 52, 51, 51),\r\n textColor: Colors.white,\r\n text: buttons[index],\r\n func: () {\r\n setState(() {\r\n userInput += buttons[index];\r\n });\r\n });\r\n }\r\n },\r\n ),\r\n ),<\/pre>\n3. Styling of Button<\/h4>\n
import 'package:flutter\/material.dart';\r\n\r\nclass StyledButton extends StatelessWidget {\r\n const StyledButton(\r\n {required this.bgColor,\r\n required this.textColor,\r\n required this.text,\r\n required this.func,\r\n super.key});\r\n\r\n final Color bgColor;\r\n final Color textColor;\r\n final String text;\r\n final func;\r\n\r\n @override\r\n Widget build(BuildContext context) {\r\n return GestureDetector(\r\n onTap: func,\r\n child: CircleAvatar(\r\n radius: 20,\r\n backgroundColor: bgColor,\r\n child: Text(\r\n text,\r\n style: TextStyle(\r\n color: textColor, fontSize: 26, fontWeight: FontWeight.w600),\r\n ),\r\n ),\r\n );\r\n }\r\n}<\/pre>\n4. Function to Evaluate Expression<\/h4>\n
import 'package:math_expressions\/math_expressions.dart';\r\n\r\nString evaluate(String exp) {\r\n String expModified = exp.replaceAll('x', '*');\r\n\r\n Parser p = Parser();\r\n Expression calc = p.parse(expModified);\r\n\r\n ContextModel cm = ContextModel();\r\n num eval = calc.evaluate(EvaluationType.REAL, cm);\r\n String result = eval.toString();\r\n\r\n return '= $result';\r\n}<\/pre>\nFlutter Calculator App Output<\/h3>\n
![\"flutter](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/12\/flutter-claculator-app-output.webp\")
<\/a><\/p>\n
\n![\"flutter](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/12\/flutter-claculator-app.webp\")
<\/a><\/p>\n
\n![\"output](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/12\/output-flutter-claculator-app.webp\")
<\/a><\/p>\n![\"flutter](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/12\/flutter-claculator.webp\")
<\/a><\/h3>\nConclusion<\/h3>\n