Text, TextField

📖 Theory

પડદો સાંભળતાં શીખે છે

FestConnect Flutter અત્યાર સુધી જે કંઈ બતાવે છે એ બધું એક દિશાનું છે: posters અને શીર્ષકો વિદ્યાર્થીને કહે છે. Registration ને એનાથી ઊલટું જોઈએ છે: એક field જ્યાં એ પોતાનું નામ લખે, અને Book દબાય ત્યારે તમારો code એ નામ ખરેખર મેળવી શકે એવો રસ્તો.

Unit 1 માં આ કામ EditText, findViewById અને getText() માગતું હતું. Flutter નો જવાબ એક widget અને એક નાનકડો object છે: TextField અને એનું controller, અને સાથે દરેક કળ દબાવ્યે ચાલતો એ hook જેને તમે બીજા બે મંચ પર મળી ચૂક્યા છો.

📖 Theory

Text: ગુણ અપાવે એવી ઝીણી શરતો

ગયા પાઠના TextStyle ઉપરાંત Text ને બીજી 2 properties છે, જે પરીક્ષા અને ખરેખરાં layouts બંનેને જોઈએ છે:

• maxLines: લીટીઓની સંખ્યા પર મર્યાદા બાંધે છે
• overflow: TextOverflow.ellipsis: મર્યાદિત લખાણ સમાય નહીં ત્યારે અક્ષરની વચ્ચેથી કાપી નાખવાને બદલે એને ... વડે પૂરું કરે છે

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

સાંકડા ફોન પર event ના શીર્ષકો શોભા સાચવીને ટકી જાય છે એ આ જોડીને લીધે જ: ગયા પાઠના overflow ના પટ્ટા યાદ કરો: ellipsis એ સભ્ય overflow છે.

📖 Theory

TextField: શણગારેલું, લખાયેલું, વંચાયેલું

સૌથી નાનું field એટલે TextField(), પણ ત્રણ named parameters એને ઉપયોગી બનાવે છે:

• decoration: InputDecoration(...): આ એનો શણગાર છે: labelText (ઉપર તરતું નામ), hintText, border: OutlineInputBorder(), prefixIcon
• controller: TextEditingController: આ વાંચવાનો તાર છે: controller એક વાર બનાવો, એને field ને સોંપો, અને પછી controller.text માં જે લખાયું હોય તે રહે છે: એટલે કે તમારું getText()
• onChanged: (text) { ... }: દરેક કળ દબાય ત્યારે હાલના લખાણ સાથે ચાલે છે: આ જીવંત hook છે

એ ઉપરાંત 2 ખાસ પ્રકારનાં parameters: keyboardType: TextInputType.number આંકડાનું keyboard બોલાવે છે; અને obscureText: true password ને ઢાંકી દે છે.

⌨️ Practical

જીવંત ગણતરી સાથેનું નામનું field, Book પર વંચાતું

class _RegisterState extends State<RegisterScreen> {
  final nameCtrl = TextEditingController();   // વાંચવાનો તાર
  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) {                 // દરેક કળ દબાય ત્યારે
            setState(() { typed = text.length; });
          },
        ),
        Text('$typed characters'),
        ElevatedButton(
          onPressed: () {
            final name = nameCtrl.text;       // જરૂર પડ્યે વાંચવું
            debugPrint('Booking for $name');
          },
          child: const Text('Book'),
        ),
      ],
    );
  }

  @override
  void dispose() {
    nameCtrl.dispose();                       // સારી ટેવ: તાર છોડી દો
    super.dispose();
  }
}

🧩 Quiz

Book ના button એ વપરાશકારે TextField માં જે લખ્યું હોય તે વાંચવું પડે છે. એની પ્રમાણભૂત રીત કઈ છે?

1. Android ની જેમ textField.getText() બોલાવવું
2. Field ના controller: ને એક TextEditingController સોંપવું, અને પછી onPressed માં controller.text વાંચવું
3. TextFields પોતાનું લખાણ બધે જાહેર કરે છે; TextField.lastTyped વાંચી લેવું
4. દરેક onChanged ની કિંમત database માં સાચવીને પછી એને query કરીને પાછી લાવવી

💭 Think first

Hook ના પાસપોર્ટ પરનો ત્રીજો સિક્કો

દરેક કળ દબાય ત્યારે onChanged હાલના આખા લખાણ સાથે ચાલે છે. Unit 1 ના Android માંથી અને BCA405-01 ના web વાળા unit માંથી એના બરાબર જોડિયા ભાઈઓનાં નામ આપો, અને કહો કે ત્રણેયે કઈ જીવંત સુવિધા બનાવી હતી. વિચારીને પછી tap કરો.

⚠️ Watch out

TextField માં થતી ભૂલો

Controller વગર વાંચવું: widget પર જ field.text જેવું કશું હોતું નથી; controller નહીં તો વાંચન નહીં: પહેલા form માં થતી આ સૌથી સામાન્ય ભૂલ છે.

છેલ્લી કિંમત માટે onChanged વાપરવું: Riya Kumari લખતાં એ 20 વાર ચાલે છે; જ્યારે submit ની ક્ષણને તો controller.text જોઈએ છે, એક જ વાર.

dispose() ભૂલી જવું: controllers સાધનો રોકે છે; એમને dispose() માં છોડી દો (listing ની છેલ્લી લીટીઓ): પરીક્ષકો આ ઓપવાળી ટેવને ગુણ આપે છે.

ખોટું keyboard: keyboardType: TextInputType.number વગરના ફોન નંબરના field માં વપરાશકારે આંકડા શોધવા પડે છે.

📖 Theory

Input પોતે જ state છે: ટુકડા ગોઠવાય છે

ધ્યાન આપો કે આ પાઠને ક્યાં રહેવું પડ્યું: એક State class ની અંદર. લખાયેલું લખાણ પોતે જ બદલાતો data છે, એટલે એ field વાળો પડદો સ્વભાવે જ stateful છે: widget ના પ્રકારો વાળા પાઠે બરાબર આ જ ભાખ્યું હતું. હવે તમારી પાસે બતાવવાનું (Text), લખવાનું (TextField) અને state નો દરવાજો (setState) ત્રણેય છે: એટલે કે દરેક form ના કાચા માલસામાન. હવે પછીનો પાઠ નિર્ણય લેનારાં ઉમેરે છે: buttons ના બધા પ્રકાર, અને Slider, જ્યાં ખેંચવાનું setState ને સતત મળતું રહે છે.

✅ Summary

Key takeaways

• Text ની ઝીણી શરતો: સભ્ય રીતે ટૂંકાવવા માટે maxLines વત્તા overflow: TextOverflow.ellipsis.
• TextField decoration: InputDecoration(labelText, hintText, border, prefixIcon) વડે શણગારાય છે.
• વાંચવું: controller: પર TextEditingController મૂકો, અને જરૂર પડ્યે controller.text વાંચો (button દબાય એ ક્ષણે).
• onChanged દરેક કળે હાલના લખાણ સાથે ચાલે છે: જીવંત ગણતરી અને ગાળણ માટે; controllers ને dispose() માં છોડી દો.
• keyboardType keyboard પસંદ કરે છે; obscureText passwords ને ઢાંકે છે.
• એ જ hook, ત્રીજા મંચ પર: TextWatcher (Android), keyup (web), onChanged (Flutter).
• યાદ રાખવાની કડી: controller જરૂર પડ્યે વાંચે, onChanged દરેક કળે પ્રતિભાવ આપે.