In this tutorial, we will guide you on how to create a calculator app using Flutter. Flutter is an open-source UI framework developed by Google for crafting beautiful, natively compiled applications for mobile, web, and desktop platforms from a single codebase.<\/p>\n
The calculator app we will build will be able to perform basic arithmetic operations such as addition, subtraction, multiplication, and division. We will also implement a clear button to reset the calculator display.<\/p>\n
Before we get started, ensure that you have Flutter installed on your machine. You can follow the official Flutter installation guide for instructions on how to set up Flutter: Flutter Installation Guide<\/a><\/p>\n To start, open your terminal or command prompt and navigate to the directory where you want to create your new Flutter project. Use the following command to create a new Flutter project:<\/p>\n This command will create a new directory named After creating the Flutter project, open it in your preferred code editor. Then, open the Add the following line under the This package will help us evaluate the mathematical expressions entered by the user.<\/p>\n Save the We will now design the user interface (UI) of our calculator app. Navigate to the Remove the default code in the In this code, we have defined the The We have also defined various helper methods to handle button presses and evaluate the mathematical expression using the The Congratulations! You have completed the coding part. Now, it’s time to run our calculator app.<\/p>\n In the terminal, navigate to the root directory of your Flutter project and run the following command:<\/p>\n This command will compile the code and launch the app on an available simulator or connected device. You will see your calculator app running on the screen.<\/p>\n In this tutorial, we learned how to create a calculator app using Flutter. We used Flutter’s UI framework to design the user interface and implemented the basic arithmetic operations.<\/p>\n Flutter enables developers to build high-quality apps for multiple platforms using a single codebase. By enhancing our calculator app, you can add more advanced features like parentheses handling, memory functions, and scientific calculations.<\/p>\n You can find the complete source code of the calculator app on GitHub: Calculator App Source Code<\/a><\/p>\n I hope you found this tutorial helpful in getting started with Flutter and building your own calculator app. Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"Step 1: Create a new Flutter project<\/h2>\n
flutter create calculator_app\n<\/code><\/pre>\ncalculator_app<\/code> with the basic project structure and files.<\/p>\nStep 2: Set up the project dependencies<\/h2>\n
pubspec.yaml<\/code> file located in the root of your project.<\/p>\ndependencies<\/code> section:<\/p>\nmath_expressions: ^2.0.3\n<\/code><\/pre>\npubspec.yaml<\/code> file, and run the following command in the terminal to fetch the newly added dependency:<\/p>\nflutter pub get\n<\/code><\/pre>\nStep 3: Design the user interface<\/h2>\n
lib<\/code> directory of your project and open the main.dart<\/code> file.<\/p>\nmain.dart<\/code> file, and replace it with the following code:<\/p>\nimport 'package:flutter\/material.dart';\nimport 'package:math_expressions\/math_expressions.dart';\n\nvoid main() {\n runApp(CalculatorApp());\n}\n\nclass CalculatorApp extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return MaterialApp(\n title: 'Calculator',\n theme: ThemeData(\n primarySwatch: Colors.blue,\n ),\n home: CalculatorHomePage(),\n );\n }\n}\n\nclass CalculatorHomePage extends StatefulWidget {\n @override\n _CalculatorHomePageState createState() => _CalculatorHomePageState();\n}\n\nclass _CalculatorHomePageState extends State<CalculatorHomePage> {\n String userInput = '';\n String result = '';\n\n void evaluateResult() {\n Parser p = Parser();\n Expression exp = p.parse(userInput);\n ContextModel cm = ContextModel();\n double eval = exp.evaluate(EvaluationType.REAL, cm);\n setState(() {\n result = eval.toString();\n });\n }\n\n void clear() {\n setState(() {\n userInput = '';\n result = '';\n });\n }\n\n Widget buildButton(String buttonText, Color buttonColor,\n {bool isClearButton = false}) {\n return Expanded(\n child: Container(\n margin: EdgeInsets.all(8.0),\n child: FlatButton(\n child: Text(\n buttonText,\n style: TextStyle(fontSize: 20.0, color: Colors.white),\n ),\n onPressed: () {\n setState(() {\n if (isClearButton) {\n clear();\n } else {\n userInput += buttonText;\n evaluateResult();\n }\n });\n },\n ),\n color: buttonColor,\n ),\n );\n }\n\n @override\n Widget build(BuildContext context) {\n return Scaffold(\n appBar: AppBar(\n title: Text('Calculator'),\n ),\n body: Column(\n children: <Widget>[\n Expanded(\n child: Container(\n padding: EdgeInsets.all(16.0),\n alignment: Alignment.bottomRight,\n child: Text(\n userInput,\n style: TextStyle(fontSize: 32.0),\n ),\n ),\n ),\n Expanded(\n child: Container(\n padding: EdgeInsets.all(16.0),\n alignment: Alignment.bottomRight,\n child: Text(\n result,\n style: TextStyle(\n fontSize: 32.0,\n fontWeight: FontWeight.bold,\n ),\n ),\n ),\n ),\n Row(\n children: <Widget>[\n buildButton('7', Colors.grey.shade700),\n buildButton('8', Colors.grey.shade700),\n buildButton('9', Colors.grey.shade700),\n buildButton('\/', Colors.orange.shade700),\n ],\n ),\n Row(\n children: <Widget>[\n buildButton('4', Colors.grey.shade700),\n buildButton('5', Colors.grey.shade700),\n buildButton('6', Colors.grey.shade700),\n buildButton('*', Colors.orange.shade700),\n ],\n ),\n Row(\n children: <Widget>[\n buildButton('1', Colors.grey.shade700),\n buildButton('2', Colors.grey.shade700),\n buildButton('3', Colors.grey.shade700),\n buildButton('-', Colors.orange.shade700),\n ],\n ),\n Row(\n children: <Widget>[\n buildButton('0', Colors.grey.shade700),\n buildButton('.', Colors.grey.shade700),\n buildButton('=', Colors.red.shade600),\n buildButton('+', Colors.orange.shade700),\n ],\n ),\n Row(\n children: <Widget>[\n buildButton('C', Colors.red.shade600, isClearButton: true),\n ],\n ),\n ],\n ),\n );\n }\n}\n<\/code><\/pre>\nCalculatorApp<\/code> class, which is the entry point of our Flutter app. Inside this class, we have defined a stateful widget named CalculatorHomePage<\/code>.<\/p>\nCalculatorHomePage<\/code> widget contains the UI layout for our calculator app. It has two Text<\/code> widgets to display the user input and the result. The user input is stored in the userInput<\/code> variable, and the result is stored in the result<\/code> variable.<\/p>\nmath_expressions<\/code> package.<\/p>\nbuildButton<\/code> method is responsible for creating the calculator buttons. Each button is represented by a FlatButton<\/code> wrapped inside a Container<\/code> with a specified color.<\/p>\nStep 4: Run the app<\/h2>\n
flutter run\n<\/code><\/pre>\nConclusion<\/h2>\n