HOW TO BUILD A SIMPLE BASIC CALCULATOR APP IN FLUTTER

Osioreamhe Ugheoke
final calculator app

Open a new project in Flutter using your favourite IDE, you can name the project anything you want.

Now inside your main.dart file clear up all the code snippets written and add only the flowing lines of code.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'LesCalc',
debugShowCheckedModeBanner: false,
theme: ThemeData.dark(),
home: HomePage(),
);
}
}

Explanation:

- We created a Stateless Widget name MyApp,

- The build method returns a MaterialApp Widget.

- And the home takes a Widget of HomePage(), which we will go on and create.

Now, create a new dart file and name it homePage.

Import the material.dart file and create a Stateful Widget named HomePage .

Instead of returning a Container() Widget, rather return a Scaffold Widget and give it a body of Container(), Just like this…

Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: false,
appBar: AppBar(
title: Text('LesCalc'),
),
body: Container(),
);
}

now go back to your main.dart file and import the name of the HomePage dart file just like this..

import 'homePage.dart';

Run your app and see what it shows,

Now, back to our homepage.dart file let’s build something beautiful……….

inside our Container() add a padding just inside it like this…

padding: EdgeInsets.only(bottom:40.0, top: 15.0, left: 40.0, right: 40.0),

give the container a child of column,

body: Container(
padding: EdgeInsets.only(bottom:40.0, top: 15.0, left: 40.0, right: 40.0),
child: Column(),
),

From the Layout of our app in the picture above you’ll notice we have 6 Rows in 1 Column, go right ahead and add the following snippets to your Column Widget…..

mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(horizontal:42.0),
child: TextField(
keyboardType: TextInputType.number,
cursorColor: Colors.tealAccent,
enabled: false,
//enableInteractiveSelection: false,
decoration: InputDecoration(
fillColor: Colors.white,
hintText: 'Result: $res', hintStyle: TextStyle(fontSize: 20.0, color: Colors.tealAccent),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(18.0),
),
),
),
),
Padding(
padding: EdgeInsets.only(top: 20.0),
),
//The Text field for the First number
TextField(
keyboardType: TextInputType.number,
cursorColor: Colors.tealAccent,
controller: t1,
decoration: InputDecoration(
labelText: 'first',
fillColor: Colors.white,
hintText: 'Enter your First number',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(18.0),
),
),
),
Padding(
padding: EdgeInsets.only(top: 20.0),
),
//The Text field for the second number
TextField(
keyboardType: TextInputType.number,
cursorColor: Colors.tealAccent,
controller: t2,
decoration: InputDecoration(
labelText: 'second',
fillColor: Colors.white,
hintText: 'Enter your Second number',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(18.0),
),
),
),

Padding(
padding: EdgeInsets.only(top: 20.0),
),

Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
MaterialButton(
child: Text('+'),
shape: StadiumBorder(),
color: Colors.teal,
onPressed: () {
//TODO:
doAddition();
},
),
MaterialButton(
child: Text('*'),
shape: StadiumBorder(),
color: Colors.teal,
onPressed: () {
//TODO:
doMul();
},
),
],
),

Padding(
padding: EdgeInsets.only(top: 20.0),
),

Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
MaterialButton(
child: Text('-'),
color: Colors.teal,
shape: StadiumBorder(),
onPressed: () {
//TODO:
doSub();
},
),
MaterialButton(
child: Text('/'),
shape: StadiumBorder(),
color: Colors.teal,
onPressed: () {
//TODO:
doDiv();
},
),
],
),
Padding(
padding: EdgeInsets.only(top: 20.0),
),

Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
MaterialButton(
child: Text('C', textAlign: TextAlign.center,),
color: Colors.teal,
shape: StadiumBorder(),
padding: EdgeInsets.only(left: 110.0, right: 110.0, top: 15.0, bottom: 15.0),
onPressed: () {
//TODO:
doClear();
},
),
],
),
],

You’ll notice your IDE is giving you some errors right now, that’s because we haven’t declared those variables, directly under your _HomePageState Class declare the following variables….

double num1 = 0, num2 = 0, res = 0; //res = Result...................

TextEditingController t1 = TextEditingController(text: '');
TextEditingController t2 = TextEditingController(text: '');

Run your app and see how it appears, Beautiful!!!!!!!!!!!!!!!!

You’ll notice some functions in the onPressed value of our Material Buttons, not to worry we’ll fix those functions soon enough, you’ll also notice our calculator operators don’t do anything yet let’s fix that function right away. Add the following snippets directly under your _HomePageState class.

doAddition() {
setState(() {
num2 = double.parse(t2.text);
num1 = double.parse(t1.text);
res = num1 + num2;
});
}

doSub() {
setState(() {
num2 = double.parse(t2.text);
num1 = double.parse(t1.text);
res = num1 - num2;
});
}

doMul() {
setState(() {
num2 = double.parse(t2.text);
num1 = double.parse(t1.text);
res = num1 * num2;
});
}

doDiv() {
setState(() {
num2 = double.parse(t2.text);
num1 = double.parse(t1.text);
res = (num1 / num2);
});
}

doClear() {
setState(() {
t1 = TextEditingController(text: '');
t2 = TextEditingController(text: '');
res = 0;
});
}

Now run your app one more time and try the operators, Great Job!!!

please give me an applaud if you found this write up helpful, I’ll be walking you through more basic app builds, you and I will be great App Devs in no time. Cheers!!!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade