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:

10 Comments

  1. Jane Doe Jane Doe 25th April 2020

    THANK YOU !!! This simple code was very useful for me

    • yourowncodes yourowncodes Post author | 25th April 2020

      You are welcome…

      • Vasav Chaturvedi Vasav Chaturvedi 6th July 2020

        error coming

        • yourowncodes yourowncodes Post author | 6th July 2020

          What error..? Give us the error list..
          We have posted whole app code on above.. Try to replace entire app code with above code and run

          • Vasav Chaturvedi Vasav Chaturvedi 11th July 2020

            I replaced the entire code, but these two errors are detected.

            1) error: Expected to find ‘]’. (expected_token at [flutteryapp] lib\main.dart:78
            2) error: Undefined name ‘child’. (undefined_identifier at [flutteryapp] lib\main.dart:78)

          • yourowncodes yourowncodes Post author | 11th July 2020

            You will not get such an error if you replace entire code.
            1. Error means you have missing a ‘]’ symbol
            2. you need to declare variable child first.

            There should be some missing on your code. Try replace whole code again

  2. Vasav Chaturvedi Vasav Chaturvedi 13th July 2020

    yes i replace whole code again, so i declared variable child but missing ‘]’ symbol error still coming?

  3. Vasav Chaturvedi Vasav Chaturvedi 15th July 2020

    i can give u any desk code so that you can handle my pc.

    • yourowncodes yourowncodes Post author | 16th July 2020

      Send the screenshots into contact@yourowncodes.com

    • TmpMan TmpMan 5th November 2020

      here at the end;

      Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
      Text(“Result:”,
      style: TextStyle(
      fontSize: 30,
      ),),
      child: new Text(result,
      style: TextStyle(
      fontSize: 30,
      ),),
      ],
      ),

      Just remove child: new
      and let Text be a Widget…

      And here you go

Leave a Reply

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