Input & Forms (TextField)

စိတ်လျှော့ပါ။ ဒီခန်းကို စာအုပ်လိုမဟုတ်ဘဲ စကားပြောသလိုပဲ၊ နားလည်လွယ်အောင် ရှင်းပါမယ်။

TextField က user ဆီက text input ရယူဖို့သုံးပါတယ်။ Login form, search box, contact form, comment box စတဲ့နေရာတိုင်းမှာအသုံးဝင်ပါတယ်။ TextEditingController ကိုသုံးရင် input ထဲကစာကိုဖတ်နိုင်ပြီး dispose() ထဲမှာ controller ကိုရှင်းပေးတာက memory leak မဖြစ်အောင် ကောင်းတဲ့အလေ့အကျင့်ပါ။

dart

class NameForm extends StatefulWidget {
  const NameForm({super.key});

  @override
  State<NameForm> createState() => _NameFormState();
}

class _NameFormState extends State<NameForm> {
  final nameController = TextEditingController();
  String greeting = '';

  @override
  void dispose() {
    nameController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          controller: nameController,
          decoration: const InputDecoration(
            labelText: 'Enter your name',
            border: OutlineInputBorder(),
          ),
        ),
        const SizedBox(height: 12),
        ElevatedButton(
          onPressed: () {
            setState(() {
              greeting = 'Hello, ${nameController.text}';
            });
          },
          child: const Text('Submit'),
        ),
        Text(greeting),
      ],
    );
  }
}

You should see

Name ထည့်ပြီး Submit နှိပ်လိုက်ရင် အောက်မှာ Hello, name ဆိုပြီး greeting ပေါ်လာပါမယ်။

နောက်တစ်ဆင့်

Input ကနေ state ပြောင်းလာပြီဆိုရင် State Management concept ကိုဆက်ဖတ်ပါ။