Creating a Calculator using Calculator Widget in Flutter

Last Updated : 26 Apr, 2025

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 
  } 
}

Output:

Flutter - Create Animation Using the AnimatedAlign Widget

ms471841

Improve

Article Tags :

Creating a Calculator using Calculator Widget in Flutter

Step By Step Implementation

Step 1: Create a New Project in Android Studio

Step 2: Installation of Package

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

Step 4: Create simpleCalculator Widget

Dart

Code Example:

Dart

Output:

Similar Reads