Flutter using Add Two Numbers | Flutter Tutorials

Add Two Numbers using Flutter

In this presentation, we'll explore how to build a simple Flutter app that can add two numbers together. We'll cover the basics of the Dart programming language, Flutter's widget system, and the steps to create a functional user interface and add the necessary logic.

main.dart:

import 'package:add_two_numbers/addtwonumbers.dart';
import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const AddTwoNumbers(),
    );
  }
}

addtwonumbers.dart:

import 'package:flutter/material.dart';
class AddTwoNumbers extends StatefulWidget {
  const AddTwoNumbers({super.key});
  @override
  State<AddTwoNumbers> createState() => _AddTwoNumbersState();
}
class _AddTwoNumbersState extends State<AddTwoNumbers> {
  final TextEditingController _num1Controller = TextEditingController();
  final TextEditingController _num2Controller = TextEditingController();
  final TextEditingController _resultController = TextEditingController();
  void _addNumbers(){
    setState(() {
      
      double num1 = double.tryParse(_num1Controller.text)?? 0;
      double num2 = double.tryParse(_num2Controller.text)?? 0;
      double result = num1 + num2;
      _resultController.text = result.toString();
 
    });
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("LogicLab Academy"),
        centerTitle: true,
        backgroundColor: Colors.red,
      ),
      body: SafeArea(child: Container(
        padding:EdgeInsets.symmetric(horizontal: 15, vertical: 20),
        child: Column(
          children: [
            Text("Add Two Numbers",style: TextStyle(fontSize: 30,color: Colors.blue),),
            SizedBox(height: 15,),
            TextField(
              controller: _num1Controller,
              decoration: InputDecoration(
                labelText: "First Number",
                labelStyle: TextStyle(fontSize: 15,color: Colors.grey.shade400),
                border: OutlineInputBorder(borderRadius: BorderRadius.circular(10))
              ),
            ),
            SizedBox(height: 15,),
            TextField(
              controller: _num2Controller,
              decoration: InputDecoration(
                labelText: "Second Number",
                labelStyle: TextStyle(fontSize: 15,color: Colors.grey.shade400),
                border: OutlineInputBorder(borderRadius: BorderRadius.circular(10))
              ),
            ),
            SizedBox(height: 15,),

            ElevatedButton(
              
              style: ButtonStyle(
                padding: WidgetStatePropertyAll(EdgeInsets.only(
                  left: 150,
                  right: 150,
                  top: 10,
                  bottom: 10,
                )),
                backgroundColor: WidgetStatePropertyAll(Colors.red),
                foregroundColor: WidgetStatePropertyAll(Colors.white),
                textStyle: WidgetStatePropertyAll(TextStyle(fontSize: 20 ))
              ),
              onPressed: _addNumbers, 
              child: Text("ADD")
              ),
              SizedBox(height: 15,),
            TextField(
              controller: _resultController,
              decoration: InputDecoration(
                labelText: "Result",
                labelStyle: TextStyle(fontSize: 15,color: Colors.grey.shade400),
                border: OutlineInputBorder(borderRadius: BorderRadius.circular(10))
              ),
            ),
          ],
        ),
      )),
    );
  }
}

Implementing the Add Function:

Declare Variables

Define integer variables to store the two input numbers.

Get User Input

Retrieve the values entered by the user into the text fields.

Perform Adiition

Write the logic to add the two numbers and store the result.

Display Result

Update the UI to show the calculated sum to the user.