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

Output: