Advanced Calculator App using Flutter
Flutter SDK is an open-source software development kit for building beautiful UI which is natively compiled. In this article, we are going to create an advanced calculator app by using some advanced packages available in Flutter. In this app, you get some functionality. In this app you have only one screen in that screen we perform our whole calculator functionality.
- In this calculator app, you can add the number
- In this calculator app, you can subtract the number
- In this calculator app, you can multiply the number
- In this calculator app, you can divide the number
- In this calculator, you can reverse the number
Here is the UI of the Calculator App:
A sample video is given below to get an idea about what we are going to do in this article.
This is the calculator app screen and now see the whole code.
Code:
Dart
// ignore_for_file: prefer_const_constructors import 'package:flutter/material.dart' ; import 'dart:math' as math; import 'package:math_expressions/math_expressions.dart' ; import 'home.dart' ; void main() { runApp( const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo' , theme: ThemeData.dark(), home: MyCalculator(), ); } } class MyCalculator extends StatefulWidget { const MyCalculator({super.key}); @override State<MyCalculator> createState() => _MyCalculatorState(); } class _MyCalculatorState extends State<MyCalculator> { double num1 = 0.0; double num2 = 0.0; var input = '' ; var output = '' ; var operation = '' ; //var hideinput=false; var outputSize=32.0; _onButtonClicked(value) { if (value == "AC" ) { input = '' ; output = '' ; } else if (value == "A" ) { if (input.isNotEmpty) { input = input.substring(0, input.length - 1); } } else if (value == "=" ) { if (input.isNotEmpty) { var userinput = input; userinput = input.replaceAll( "" , "" ); Parser P = Parser(); Expression expression = P.parse(userinput); ContextModel cm = ContextModel(); var finalvalue = expression.evaluate(EvaluationType.REAL, cm); output = finalvalue.toString(); if (output.endsWith( ".0" )) { output = output.substring(0, output.length - 2); } // input=output; // hideinput=true; // outputSize=50; } } else { input = input + value; } setState(() {}); } @override Widget build(BuildContext context) { return Scaffold( body: Column( // ignore: prefer_const_literals_to_create_immutables children: [ Expanded( child: Container( height: 200, width: double .infinity, color: Colors.transparent, child: Column( crossAxisAlignment: CrossAxisAlignment.end, mainAxisAlignment: MainAxisAlignment.end, // ignore: prefer_const_literals_to_create_immutables children: [ Text( input, style: TextStyle(fontSize: 48, color: Colors.white), ), SizedBox( height: 10, ), Text( output, style: TextStyle( fontSize: 30, color: Colors.white.withOpacity(0.7), ), ), SizedBox( height: 20, ), ], ), ), ), Row( // ignore: prefer_const_literals_to_create_immutables children: [ button( "AC" , Colors.black, Colors.orangeAccent), button( "A" , Colors.black, Colors.orangeAccent), button( "" , Colors.transparent, Colors.white), button( "/" , Colors.black, Colors.orangeAccent), ], ), Row( // ignore: prefer_const_literals_to_create_immutables children: [ button( "7" , Colors.black, Colors.white), button( "8" , Colors.black, Colors.white), button( "9" , Colors.black, Colors.white), button( "*" , Colors.black, Colors.orangeAccent), ], ), Row( // ignore: prefer_const_literals_to_create_immutables children: [ button( "4" , Colors.black, Colors.white), button( "5" , Colors.black, Colors.white), button( "6" , Colors.black, Colors.white), button( "-" , Colors.black, Colors.orangeAccent), ], ), Row( // ignore: prefer_const_literals_to_create_immutables children: [ button( "1" , Colors.black, Colors.white), button( "2" , Colors.black, Colors.white), button( "3" , Colors.black, Colors.white), button( "+" , Colors.black, Colors.orangeAccent), ], ), Row( // ignore: prefer_const_literals_to_create_immutables children: [ button( "%" , Colors.black, Colors.orangeAccent), button( "0" , Colors.black, Colors.white), button( "." , Colors.black, Colors.white), button( "=" , Colors.orangeAccent, Colors.white), ], ), ], ), ); } button(text, color, tcolor) { return Expanded( child: Container( padding: EdgeInsets.all(10), child: ElevatedButton( style: ElevatedButton.styleFrom( padding: EdgeInsets.all(10), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(5), ), primary: color, ), onPressed: () => _onButtonClicked(text), child: Text( text, style: TextStyle( fontSize: 15, fontWeight: FontWeight.bold, color: tcolor), ), ), ), ); } } |
Copy the code from here and paste it into your main screen when you paste this code then it shows some error to you due to lack of some dependencies. So simply you have to tap on the error and add dependencies in your pubsec.yml and the error will go you can easily use the app and also use it as a collage mini project if you are in the first year or second year, not for the third year students.
Contact Us