Creating a Calculator using Calculator Widget in Flutter
If you need a Calculator in Flutter or need to do a small calculation in your flutter application, Writing your own code going to be tough, but Flutter gives you a SimpleCalculator Widget, Which allows you to create a Beautiful simple calculator. Only you need to set up the package in pubspec.yaml file and return the widget simpleCalculator.
A sample video given below gives an idea of what we are actually going to do.
Step By Step Implementation
Step 1: Create a New Project in Android Studio
To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.
Step 2: Installation of Package
Install the package into the pubspec.yaml file that you will find in the root directory of the project.
flutter pub add flutter_simple_calculator
This will add a line like this to your package’s pubspec.yaml (and run an implicit flutter pub get):
Step 3: Import the Package
import 'package:flutter_simple_calculator/flutter_simple_calculator.dart';
Step 4: Create simpleCalculator Widget
Now all setups are done, Now we have to make a simpleCalculator Widget that is provided by the simple_calculator package. SimpleCalculator Widget allows us to set the parameters such as value, hideExpression, hideSurroundingBorder, autofocus, onChanged, theme.
Dart
double _currentValue; SimpleCalculator( value: _currentValue!, hideExpression: false , hideSurroundingBorder: true , autofocus: true , onChanged: (key, value, expression) { setState(() { _currentValue = value ?? 0; }); }, theme: const CalculatorThemeData( borderColor: Colors.black, borderWidth: 2, displayColor: Colors.black54, displayStyle: TextStyle(fontSize: 80, color: Color.fromARGB(255, 18, 218, 24)), expressionColor: Colors.indigo, expressionStyle: TextStyle(fontSize: 20, color: Colors.white), operatorColor: Color.fromARGB(255, 130, 192, 85), operatorStyle: TextStyle(fontSize: 30, color: Colors.white), commandColor: Colors.orange, commandStyle: TextStyle(fontSize: 30, color: Colors.white), numColor: Colors.grey, numStyle: TextStyle(fontSize: 50, color: Colors.white), ), ); |
Code Example:
Dart
import 'package:flutter/material.dart' ; import 'package:flutter_simple_calculator/flutter_simple_calculator.dart' ; void main() => runApp( const RunMyApp()); class RunMyApp extends StatelessWidget { const RunMyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( // materialApp with debugbanner false debugShowCheckedModeBanner: false , theme: ThemeData(primarySwatch: Colors.green), // default theme home: Scaffold( // scaffold allows set appbar and it title appBar: AppBar( title: const Text( 'SimpleCalculator' ), ), body: SizedBox( width: double .infinity, // width of the sizedbox. child: Calc(), // sizedbox taking class Calc ), ), ); } } class Calc extends StatefulWidget { const Calc({Key? key}) : super(key: key); @override _CalcState createState() => _CalcState(); } class _CalcState extends State<Calc> { double ? _currentValue = 0; // Variable that holds the any changes in the calc @override Widget build(BuildContext context) { var calc = SimpleCalculator( // SimpleCalculator widget to allow us to set it parameters value: _currentValue!, // value is to currentValue hideExpression: false , hideSurroundingBorder: true , autofocus: true , onChanged: (key, value, expression) { setState(() { // setState method call everytime when every changes occur _currentValue = value ?? 0; }); }, theme: const CalculatorThemeData( // setting the theme of the calculator borderColor: Colors.black, borderWidth: 2, displayColor: Colors.black54, displayStyle: TextStyle(fontSize: 80, color: Color.fromARGB(255, 18, 218, 24)), expressionColor: Colors.indigo, expressionStyle: TextStyle(fontSize: 20, color: Colors.white), operatorColor: Color.fromARGB(255, 130, 192, 85), operatorStyle: TextStyle(fontSize: 30, color: Colors.white), commandColor: Colors.orange, commandStyle: TextStyle(fontSize: 30, color: Colors.white), numColor: Colors.grey, numStyle: TextStyle(fontSize: 50, color: Colors.white), ), ); return SafeArea(child: calc); // showing the calculator } } |
Contact Us