استفاده از این محتوا رایگان میباشد

چارا برای خلق ارزش و توسعه مهارت های درونی و رشد استعدادها و جایی برای انجام پروژهای برنامه نویسی هست، هدف ما پیاده سازی ایده شما و توسعه مهارت های فردی کاربران برای ارتقا و اجرای هدفمندانه کسب و کارها میباشد بیشتر آموزش های سایت به صورت رایگان در اختیار شما هستند اما برای دسترسی به همه آموزش ها نیازمند تهیه عضویت ویژه سایت ما میباشید.

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

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

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

TextField()

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

Image for post

گرفتن اطلاعات ار 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” جایگزین شود:

Image for post

و یا اینکه

 

TextField(
  textInputAction: TextInputAction.send,
),

 

Image for post

 

 

ساخت Appbar در فلاتر ( بخش 2 ) ❤️
, , ,

1 دیدگاه. همین الان خارج شوید

  • سلام.. به راهنمایی تون نیاز دارم.. یادگیری دارت خوب بود. اما الان توی فلاتر کاملا گیج شدم. کدوم ویجت کجا میاد. چرا یه تابع اون پایین کدها میاد ولی به خط های اول کد ارتباط داره!؟ به نظرم فلاتر شبیه سلف سرویس رستورانه. انگار داریم ویجت مورد نیاز را خودمون انتخاب می کنیم. اما کدوم، کجا میاد.نمی دونم. لطفا من راهنمایی کنید از کجا شروع کنم؟ قدم به قدم. ممنون تون میشم!

    پاسخ

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این قسمت نباید خالی باشد
این قسمت نباید خالی باشد
لطفاً یک نشانی ایمیل معتبر بنویسید.
شما برای ادامه باید با شرایط موافقت کنید

فهرست