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