ویژگی های ویجت Textfield ( بخش 1 ) ❤️

این اولین آموزش از مجموعه ای هست که قرار هست به طور مفصل برخی از ویجت های پیشنهادی Flutter و نکات و ترفندهایی رو برای اونها توضیح بدیم. در این آموزش به طور کامل به ویجت Flutter TextField می پردازیم و از ویژگی ها و خصوصیات اون مطلع می شیم خب اینم برای شروع خوب هست 🙂

مقدمه ای بر TextField

ویجت TextField امکان جمع آوری اطلاعات از کاربر را فراهم می کند. برای استفاده ازش دقیقا همین عبارت کلیدی Textfield و تایپ میکنیم

TextField()

کد بالا به تکس فیلد برای ما ایجاد میکنه مثل تصویر زیر:

گرفتن اطلاعات ار Textfield

توی تکس فیلد ، متن رو نمی تونیم به صورت پیش فرض بگیریم  و باید در یک متغیر ذخیره بشه یا از کنترل کننده ( Controller ) استفاده میکنیم
ساده ترین راه برای انجام این کار استفاده از متد onChanged و ذخیره مقدار فعلی در یک متغیر ساده هست. در اینجا کد نمونه اون رو در ادامه ببینید.

String value = "";
TextField(
  onChanged: (text) {
    value = text;
  },
)

روش دوم برای این کار استفاده از TextEditingController هست. کنترل کننده به TextField متصل هستو به ما امکان می دهد متن TextField رو بگیریم و کنترل کنیم.

TextEditingController controller = TextEditingController();
TextField(
  controller: controller,
)

و می توانیم با استفاده از تغییرات مقدار رو بگیریم.

controller.addListener(() {
  // Do something here
});

و مقادیر را با استفاده از اون تنظیم کنیم

print(controller.text); // Print current value
controller.text = "Demo Text"; // Set new value

متد های دیگه ای هم داره textfield که عبارت اند از

onEditingComplete: () {},
onSubmitted: (value) {},

اینها متدهایی هستن که برای مثال کاربر وقتی روی یه دکمه  کلیک میکنه عبارتی و تکمیل میکته ازش استفاده میشه

کار با فوکوس در TextFields

فوکوس بر روی TextField به معنای فعال بودن TextField هست و هر ورودی از صفحه کلید منجر به وارد کردن داده ها در TextField می شود.
کار با فوکوس خودکار
برای فوکوس خودکار بر روی TextField هنگام ایجاد ویجت textfield ، قسمت فوکوس خودکار را روی true تنظیم کنید.

TextField(
  autofocus: true,
),

تغییر خصوصیات صفحه کلید برای TextFields

TextField در Flutter به شما امکان می دهد خصوصیات مربوط به صفحه کلید رو سفارشی کنید.

1. نوع صفحه کلید
TextField به شما امکان می دهد نوع صفحه کلید رو که هنگام  فوکوس TextField نشان داده می شه  رو سفارشی کنید. ما ویژگی keyboardType را برای این کار تغییر می دیم.

TextField(
  keyboardType: TextInputType.number,
),

انواع آنها:

TextInputType.text (صفحه کلید کامل عادی)
TextInputType.number (صفحه کلید عددی)
TextInputType.emailAddress (صفحه کلید عادی با "@")
TextInputType.datetime (صفحه کلید عددی با "/" و ":")
TextInputType.numberWithOptions (صفحه کلید عددی با گزینه هایی برای فعال کردن حالت امضا و اعشاری)
TextInputType.multiline (برای اطلاعات چند خطی بهینه می شود)
2. TextInputAction
تغییر textInputAction از TextField به شما امکان این رو میده که  دکمه عملکرد صفحه کلید رو تغییر بدید

TextField(
  textInputAction: TextInputAction.continueAction,
),

این باعث می شود که دکمه "done" با دکمه "Continue" جایگزین شود:

و یا اینکه

TextField(
  textInputAction: TextInputAction.send,
),