How To Create a Standard Calculator App Using Flutter



In this project,we embark on an exciting journey to develop a user-friendly calculator app. This app aims to bring a versatile and interactive calculator right to your mobile device. With this flutter app, you can perform a wide range of mathematical operations with ease and create complex expressions effortlessly. The primary objective of calculator app is to provide a seamless and interactive platform for performing mathematical calculations on your mobile device. Whether you need to add, subtract, multiply, divide, or even tackle more advanced operations, this app has got you covered. Our app is not just about calculations; it's about convenience, versatility, and efficiency. It empowers you to handle your mathematical needs on the go, making it an essential addition to your mobile device.


Source Code for the main.dart file




Add the following Code inside your main.dart file :



                
import 'package:flutter/material.dart';
import 'package:calculator/Homepage.dart';

void main() {
    runApp(const MyApp());
}

class MyApp extends StatelessWidget {
    const MyApp({super.key});

    @override
    Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Calculator App',
        theme: ThemeData.dark(),
        home:HomePage(),
    );
    }
}
                    
                
            

            


Source Code for the Homepage.dart file




Add the following Code inside your Homepage.dart file :



                
import 'package:flutter/material.dart';
import 'package:calculator/buttonele.dart';
import 'package:math_expressions/math_expressions.dart';
import 'package:calculator/buttoncustom.dart';

class HomePage extends StatefulWidget {
    const HomePage({super.key});

    @override
    State< HomePage> createState() => _HomePageState();
}

class _HomePageState extends State< HomePage> {

    final buttonele=Button.buttonele;
    String Input="";
    String Output="";



    void Resetdisplay(){
    setState(() {
        Input="";
        Output="";
    });

    }


    void evaluate(){

    //if last is operator then dont do anything
    String lastchar=Input[Input.length-1];
    if(!Chkoperator(lastchar)){

        String eval=Input;
        eval=eval.replaceAll('x', '*');
        Parser parserobj= Parser();

        Expression expobj= parserobj.parse(eval);
        ContextModel cm= ContextModel();

        double evalres=expobj.evaluate(EvaluationType.REAL, cm);
        setState(() {

        //to show decimal if double other wise not
        if(evalres==evalres.toInt()){
            Output=evalres.toInt().toString();

        }
        else{
            Output=evalres.toString();
        }
        });
    }

    }



    bool Chkoperator(String n)
    {
    if(n=="/" || n=="x" || n=="-" || n=="+" || n=="="){
        return true;
    }
    else
        return false;
    }


    @override
    Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
        title: Text('Calculator'),
        centerTitle: true,
        ),
    body: Column(
    children: [
        Container(
        color: Colors.black,
        width: double.infinity,
        padding: EdgeInsets.all(12),
            child: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
                Container(
                alignment: Alignment.bottomLeft,
                height: 65,
                child: ListView(
                    scrollDirection:Axis.horizontal,
                    reverse: true,
                    children: [
                    Text(
                        Input,
                        style: TextStyle(

                            fontSize: 44,
                            color: Colors.white
                        ),
                        textAlign: TextAlign.left,
                    ),
                    ],
                ),
                ),


                SizedBox(height: 20,),
                Text(
                Output,
                style: TextStyle(
                    fontSize: 28,
                    color: Colors.white.withOpacity(0.8),

                ),
                ),
                SizedBox(
                height: 30,
                )
            ],
            ),
        ),
    Expanded(
    flex: 2,
    child: Container(
    padding: EdgeInsets.all(3),
    decoration: BoxDecoration(
    color: Colors.black,
    ),
    child: GridView.builder(
    physics: NeverScrollableScrollPhysics(),
    itemCount: buttonele.length,
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 4
    ),
    itemBuilder: (context,index){
        if(index==0)
        {
        return  Buttoncustom(
            tap:(){
            Resetdisplay();
            },
            colour:Color(0xFF9EA3A7),
            text:buttonele[index],
            textColor:Colors.black,
        );
        }

        else if(index==1)
        {
        return  Buttoncustom(
            tap: (){
            setState(() {
                Input=Input+buttonele[index];
            });

            },
            colour: Color(0xFF9EA3A7),
            text: buttonele[index],
            textColor: Colors.black,
        );
        }
        else if(index==2){
        return  Buttoncustom(
            tap: (){
            setState(() {
                // when length becomes zero then dont dont delete data
                if(Input.length!=0)
                Input= Input.substring(0,(Input.length-1));
            });
            },
            colour: Color(0xFF9EA3A7),
            text: buttonele[index],
            textColor: Colors.black,
        );
        }
        else if(index==19)
        {
        return  Buttoncustom(
            tap: (){
            evaluate();

            },
            colour: Color(0xFF9EA3A7),
            text: buttonele[index],
            textColor: Colors.black,
        );
        }
        else{
        return  Buttoncustom(
            tap: (){
            if(Output=='') {
                setState(() {
                Input += buttonele[index];
                });
            }
            else{
                if(Chkoperator(buttonele[index]))
                {
                Input=Output+buttonele[index];
                Output='';
                }
                else{
                Input='';
                Output='';
                Input+=buttonele[index];

                }

                setState(() {

                });
            }

            },
            colour: Chkoperator(buttonele[index])?Color(0xFFFE9000):Color(0xFF333333),
            text: buttonele[index],
            textColor: Chkoperator(buttonele[index])?Colors.black:Colors.white,
        );
        }

    }
    )
    )
    )]
    ),
    );
    }
}
                    
                    
                
            

            


Source Code for the buttoncustom.dart file




Add the following Code inside your buttoncustom.dart file :



                
import 'package:flutter/material.dart';

class Buttoncustom extends StatefulWidget {
    const Buttoncustom({required this.tap,required this.colour,required this.text,required this.textColor});

    final VoidCallback tap;
    final Color colour;
    final String text;
    final Color textColor;

    @override
    State< Buttoncustom> createState() => _ButtoncustomState();
}

class _ButtoncustomState extends State< Buttoncustom> {
    @override
    Widget build(BuildContext context) {
    return Container(
        margin: EdgeInsets.all(8),
        child: ElevatedButton(
        onPressed: widget.tap,
        style: ElevatedButton.styleFrom(
            backgroundColor: widget.colour,
            foregroundColor: widget.textColor,
            shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(30.0), // Adjust the radius as needed
            ),
        ),
        child: Center(
            child: Text(
                widget.text,
                style: TextStyle(
                    fontSize:21,
                    fontWeight: FontWeight.w500
                ),
            )
        ),
        ),
    );

    }
}

                    
                
            

            


Source Code for the buttonele.dart file




Add the following Code inside your buttonele.dart file :



                
import 'package:flutter/material.dart';

class Button{
    static final List< String> buttonele=[
    "C",
    "%",
    "DEL",
    "/",
    "7",
    "8",
    "9",
    "x",
    "4",
    "5",
    "6",
    "-",
    "1",
    "2",
    "3",    
    "+",
    "00",
    "0",
    ".",
    "="
    ];
}                    
                    
                
            

            


The Output is shown below :




Contact Us

REACH US

SERVICES

  • CODING
  • ON-LINE PREPARATION
  • JAVA & PYTHON

ADDRESS

B-54, Krishna Bhawan, Parag Narain Road, Near Butler Palace Colony Lucknow
Contact:+ 919839520987
Email:info@alexsir.com