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)) ), ),
], ), )),
); }}
