Text, TextField

📖 Theory

The screen learns to listen

Everything FestConnect Flutter shows so far is one-way: posters and titles TALK at the student. Registration needs the reverse: a field where they type their name, and a way for your code to actually GET that name when Book is tapped.

In Unit 1 this took an EditText, findViewById and getText(). Flutter's answer is one widget and one small object: TextField and its controller: plus a per-keystroke hook you have now met on two other platforms.

📖 Theory

Text: the fine print worth marks

Text has 2 properties beyond last lesson's TextStyle that exams and real layouts both need:

• maxLines: cap the line count
• overflow: TextOverflow.ellipsis: when capped text does not fit, end it with ... instead of clipping mid-letter

Text(longTitle, maxLines: 1, overflow: TextOverflow.ellipsis)

That pair is how event titles survive narrow phones gracefully: recall the overflow stripes from last lesson: ellipsis is the POLITE overflow.

📖 Theory

TextField: dressed, typed, read

The minimal field is TextField(): but three named parameters make it useful:

• decoration: InputDecoration(...): the dressing: labelText (the floating label), hintText, border: OutlineInputBorder(), prefixIcon
• controller: TextEditingController: the READING wire: create the controller once, hand it to the field, and controller.text holds whatever is typed: your getText()
• onChanged: (text) { ... }: fires on EVERY keystroke with the current text: the live hook

Plus 2 specialists: keyboardType: TextInputType.number summons the numeric keyboard; obscureText: true masks passwords.

⌨️ Practical

Name field with live counter, read on Book

class _RegisterState extends State<RegisterScreen> {
  final nameCtrl = TextEditingController();   // the reading wire
  int typed = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          controller: nameCtrl,
          decoration: const InputDecoration(
            labelText: 'Your name',
            hintText: 'As on your ID card',
            border: OutlineInputBorder(),
            prefixIcon: Icon(Icons.person),
          ),
          onChanged: (text) {                 // every keystroke
            setState(() { typed = text.length; });
          },
        ),
        Text('$typed characters'),
        ElevatedButton(
          onPressed: () {
            final name = nameCtrl.text;       // the read, on demand
            debugPrint('Booking for $name');
          },
          child: const Text('Book'),
        ),
      ],
    );
  }

  @override
  void dispose() {
    nameCtrl.dispose();                       // good manners: free the wire
    super.dispose();
  }
}

🧩 Quiz

The Book button must read what the user typed into the TextField. What is the standard mechanism?

1. Call textField.getText(), as in Android
2. Assign a TextEditingController to the field's controller:, then read controller.text in onPressed
3. TextFields announce their text globally; read TextField.lastTyped
4. Store every onChanged value into a database and query it back

💭 Think first

The hook's third passport stamp

onChanged fires with the full current text on every keystroke. Name its exact twins from Unit 1 Android and from BCA405-01's web unit, and say what live feature all 3 built. Then tap.

⚠️ Watch out

TextField slips

Reading without a controller: there is no field.text on the widget itself; no controller, no read: the most common first-form bug.

onChanged for the final value: it fires 20 times while typing Riya Kumari; the SUBMIT moment wants controller.text, once.

Forgetting dispose(): controllers hold resources; free them in dispose() (the listing's last lines): the polished habit examiners reward.

Wrong keyboard: a phone-number field without keyboardType: TextInputType.number makes users hunt for digits.

📖 Theory

Input is state: the pieces assemble

Notice where this lesson had to live: inside a State class: typed text IS changing data, so the field's screen is stateful by nature: the widget-types lesson predicted exactly this. You now hold display (Text), input (TextField), and the state gate (setState): the raw ingredients of every form. Next lesson adds the decision-makers: buttons in all their variants, and Slider, where dragging meets setState continuously.

✅ Summary

Key takeaways

• Text fine print: maxLines + overflow: TextOverflow.ellipsis for polite truncation.
• TextField dresses via decoration: InputDecoration(labelText, hintText, border, prefixIcon).
• Reading: TextEditingController on controller:, read controller.text on demand (the button moment).
• onChanged fires per keystroke with current text: live counters and filters; dispose controllers in dispose().
• keyboardType picks the keyboard; obscureText masks passwords.
• Same hook, third platform: TextWatcher (Android), keyup (web), onChanged (Flutter).
• Memory hook: controller reads on demand, onChanged reacts per key.