Press "Enter" to skip to content

Add Two Numbers App in Flutter Codes

As a flutter beginner, adding two numbers program is important to practice multiple text field controls, button and label.

This program code is simple and more beginner friendly.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appTitle = 'Add Two Numbers';

    return MaterialApp(
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(
          title: Text(appTitle),
        ),
        body: AddTwoNumbers(),
      ),
    );
  }
}
class AddTwoNumbers extends StatefulWidget {
  @override
  _AddTwoNumbersState createState() => _AddTwoNumbersState();
}

class _AddTwoNumbersState extends State<AddTwoNumbers> {
  TextEditingController num1controller = new TextEditingController();
  TextEditingController num2controller = new TextEditingController();
  String result = "0";
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              Text("Number 1:"),
              new Flexible(
                child: new TextField(
                  keyboardType: TextInputType.number,
                  controller: num1controller,
                ),
              ),
            ],
          ),
          Row(
            children: <Widget>[
              Text("Number 2:"),
              new Flexible(
                child: new TextField(
                  keyboardType: TextInputType.number,
                  controller: num2controller,
                ),
              ),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              RaisedButton(
                child: Text("Add"),
                onPressed : () {
                  setState(() {
                    int sum = int.parse(num1controller.text) + int.parse(num2controller.text);
                    result = sum.toString();
                  });
                },
              )
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text("Result:",
                 style: TextStyle(
                  fontSize: 30,
               ),),
                child: new Text(result,
                 style: TextStyle(
                  fontSize: 30,
               ),),              
            ],
          ),
        ],
      ),
    );
  }
}

Code Explanation:

Basics for a flutter application is explained here.

In this program, two TextFields, one RaisedButton and a Text control are designed using Rows and Columns.

TextEditingController num1controller = new TextEditingController();
TextEditingController num2controller = new TextEditingController();

Here two TextEditiongController named num1controller and num2controller are used to manage two number text fields’ contents.

keyboardType: TextInputType.number,
controller: num1controller,

keyboardType is selected as number type layout to type numbers on device keyboard.
num1controller is assigned for the first TextField, similarly num2contoller is assigned on second TextField.

RaisedButton(
        child: Text("Add"),
        onPressed : () {
        setState(() {
        int sum = int.parse(num1controller.text) + int.parse(num2controller.text);
        result = sum.toString();
            });
         },
       )

On RaisedButton Control, onPressed event adds texts on both text fields’ numbers after converting into interger(number) type using int.parse method.
The ‘result‘ is the common variable which is assigned as the text on result Text.

child: new Text(result),  

Here text of the ‘Text‘ control is ‘result‘ which is dynamic and gets sum (result) of two numbers made by ‘Add’ button.

Sample Output:

12

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *