Text, TextField

📖 Theory

Screen सुनना सीखता है

अब तक FestConnect Flutter जो कुछ भी दिखाता है वह one-way है: posters और titles student से TALK करते हैं। Registration को reverse चाहिए: एक field जहाँ वे अपना नाम type करें, और एक तरीका जिससे आपका code असल में वह नाम GET करे जब Book tap हो।

Unit 1 में इसके लिए EditText, findViewById और getText() चाहिए था। Flutter का answer एक widget और एक छोटा object है: TextField और इसका controller: plus एक per-keystroke hook जिससे आप अब तक दो और platforms पर मिल चुके हैं।

📖 Theory

Text: Fine Print जो Marks के लायक है

Text के पास पिछले lesson के TextStyle से आगे 2 properties हैं जो exams और real layouts दोनों को चाहिए:

• maxLines: line count cap कीजिए
• overflow: TextOverflow.ellipsis: जब capped text fit नहीं होता, इसे mid-letter clip करने के बजाय ... से end कीजिए

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

यह pair वह तरीका है जिससे event titles narrow phones को gracefully survive करते हैं: पिछले lesson की overflow stripes याद कीजिए: ellipsis POLITE overflow है।

📖 Theory

TextField: Dressed, Typed, Read

Minimal field है TextField(): पर तीन named parameters इसे useful बनाते हैं:

• decoration: InputDecoration(...): dressing: labelText (floating label), hintText, border: OutlineInputBorder(), prefixIcon
• controller: TextEditingController: READING wire: controller को एक बार बनाइए, field को hand कीजिए, और controller.text जो भी typed है वह hold करता है: आपका getText()
• onChanged: (text) { ... }: EVERY keystroke पर current text के साथ fire होता है: live hook

Plus 2 specialists: keyboardType: TextInputType.number numeric keyboard summon करता है; obscureText: true passwords mask करता है।

⌨️ Practical

Live Counter के साथ Name Field, Book पर Read

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

Book button को TextField में user ने जो type किया वह पढ़ना ज़रूरी है। Standard mechanism क्या है?

1. textField.getText() call कीजिए, Android की तरह
2. Field के controller: को एक TextEditingController assign कीजिए, फिर onPressed में controller.text पढ़िए
3. TextFields अपना text globally announce करते हैं; TextField.lastTyped पढ़िए
4. हर onChanged value को एक database में store कीजिए और उसे वापस query कीजिए

💭 Think first

Hook की तीसरी Passport Stamp

onChanged हर keystroke पर पूरे current text के साथ fire होता है। Unit 1 Android और BCA405-01 के web unit से इसके exact twins नाम दीजिए, और बताइए तीनों ने कौन सा live feature बनाया। फिर tap कीजिए।

⚠️ Watch out

TextField Slips

बिना Controller Read करना: widget खुद पर कोई field.text नहीं है; कोई controller नहीं, कोई read नहीं: सबसे common first-form bug।

Final Value के लिए onChanged: Riya Kumari type करते हुए यह 20 बार fire होता है; SUBMIT moment को controller.text चाहिए, एक बार।

dispose() भूल जाना: controllers resources hold करते हैं; dispose() में free कीजिए (listing की आख़िरी lines): वह polished habit जिसे examiners reward करते हैं।

Wrong Keyboard: keyboardType: TextInputType.number के बिना एक phone-number field users को digits ढूँढने पर मजबूर करता है।

📖 Theory

Input State है: Pieces Assemble होते हैं

नोटिस कीजिए यह lesson कहाँ रहना था: एक State class के अंदर: typed text changing data IS है, तो field की screen नेचर से stateful है: widget-types lesson ने exactly यही predict किया। अब आपके पास display (Text), input (TextField), और state gate (setState) हैं: हर form के raw ingredients। अगला lesson decision-makers add करता है: सारे variants में buttons, और Slider, जहाँ dragging continuously setState से मिलता है।

✅ Summary

Key takeaways

• Text fine print: polite truncation के लिए maxLines + overflow: TextOverflow.ellipsis।
• TextField decoration: InputDecoration(labelText, hintText, border, prefixIcon) से dress होता है।
• Reading: controller: पर TextEditingController, demand पर controller.text पढ़िए (button का moment)।
• onChanged current text के साथ per keystroke fire होता है: live counters और filters; dispose() में controllers dispose कीजिए।
• keyboardType keyboard चुनता है; obscureText passwords mask करता है।
• Same hook, तीसरा platform: TextWatcher (Android), keyup (web), onChanged (Flutter)।
• Memory hook: controller demand पर पढ़ता है, onChanged per key react करता है।