EditText in Flutter

Editable text boxes in Flutter using basic examples like adding two numbers, multiplying, and calculating factorial.

---

✏️ Editable Text Boxes in Flutter

Editable text boxes (also called input fields) are used to take input from the user in a Flutter app. For example, if you want your app to ask the user their name or two numbers to add — you’ll use an editable text box.

In Flutter, we use the TextField widget for this.

---

🔹 What is a TextField?

A TextField is a widget that allows the user to type some text. We can also use a controller to get the value typed.

🧪 Example:

TextField(
  decoration: InputDecoration(
    hintText: 'Enter something',
  ),
)

---

🧮 Example 1: Add Two Numbers

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AddTwoNumbers(),
    );
  }
}

class AddTwoNumbers extends StatefulWidget {
  @override
  _AddTwoNumbersState createState() => _AddTwoNumbersState();
}

class _AddTwoNumbersState extends State<AddTwoNumbers> {
  TextEditingController num1 = TextEditingController();
  TextEditingController num2 = TextEditingController();
  String result = '';

  void addNumbers() {
    int a = int.tryParse(num1.text) ?? 0;
    int b = int.tryParse(num2.text) ?? 0;
    setState(() {
      result = 'Sum is ${a + b}';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Add Two Numbers')),
      body: Padding(
        padding: EdgeInsets.all(20),
        child: Column(
          children: [
            TextField(
              controller: num1,
              decoration: InputDecoration(labelText: 'First number'),
              keyboardType: TextInputType.number,
            ),
            TextField(
              controller: num2,
              decoration: InputDecoration(labelText: 'Second number'),
              keyboardType: TextInputType.number,
            ),
            SizedBox(height: 10),
            ElevatedButton(onPressed: addNumbers, child: Text('Add')),
            SizedBox(height: 10),
            Text(result, style: TextStyle(fontSize: 20)),
          ],
        ),
      ),
    );
  }
}

---

✖️ Example 2: Multiply Two Numbers

You can simply change the addNumbers() function:

void multiplyNumbers() {
  int a = int.tryParse(num1.text) ?? 0;
  int b = int.tryParse(num2.text) ?? 0;
  setState(() {
    result = 'Product is ${a * b}';
  });
}

Change the button to call multiplyNumbers() instead.

---

🧠 Example 3: Factorial of a Number

void findFactorial() {
  int n = int.tryParse(num1.text) ?? 0;
  int fact = 1;
  for (int i = 1; i <= n; i++) {
    fact *= i;
  }
  setState(() {
    result = 'Factorial of $n is $fact';
  });
}

Use only one input field (num1) and one button that says "Find Factorial".

---

🧩 Summary

What you learned	Tool used
Taking user input	TextField
Getting input text	TextEditingController
Showing result	setState() and Text()
Performing math	Dart operators

---

🤔 Your Turn

Try these small tasks:

• Subtract two numbers.

• Divide two numbers and show a message if the second number is 0.

• Create a simple calculator with +, -, *, / buttons.

---

Contact us for software training, education or development