در بخش قبلی این راهنما به بررسی ویجت ListView در فلاتر پرداختیم. در این بخش اقدام به ارائه یک راهنمای پیشرفته در خصوص TextField در فلاتر می‌کنیم و قابلیت‌ها و روش‌های سفارشی‌سازی این ویجت را مورد بررسی کامل قرار می‌دهیم. برای مطالعه بخش قبلی روی لینک زیر کلیک کنید:

آشنایی با TextField در فلاتر

ویجت TextField امکان گردآوری اطلاعات را از سمت کاربر فراهم می‌سازد. کد یک TextField ساده به سادگی زیر است:

ساختار آن نیز به صورت زیر است:

TextField در فلاتر

بازیابی اطلاعات از یک TextField

از آنجا که TextField در فلاتر مانند اندروید دارای ID نیست، متن نمی‌تواند بسته به تقاضا بازیابی شود و باید در زمان تغییر در یک متغیر ذخیره شود و یا این که از یک کنترلر استفاده کنیم. ساده‌ترین روش برای انجام این کار استفاده از متد onChanged و ذخیره مقدار کنونی یک متغیر ساده است. کد ساده آن چنین است:

دومین روش برای انجام این کار استفاده از یک TextEditingController است. این کنترلر به یک TextField الحاق می‌یابد و به ما امکان گوش دادن و همچنین کنترل متن یک TextField را می‌دهد.

همچنین می‌توانیم با استفاده از کدی مانند زیر به تغییرها گوش بدهیم:

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

callback-های دیگر از TextField

ویجت TextField دو Callback به صورت زیر ارائه می‌کند:

  1. onEditingCompleted
  2. onSubmitted

کاربرد این دو به صورت زیر است:

این callbacks-ها در زمان اجرای اکشن‌هایی از سوی کاربر مانند کلیک روی دکمه Done در سیستم عامل iOS فراخوانی می‌شوند.

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

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

کار با autofocus

تنظیم autofocus روی TextField در زمان ایجاد شدن آن صورت می‌گیرد و به صوت True تنظیم می‌شود:

بدین ترتیب فوکوس به صورت پیش‌فرض روی TextField تنظیم می‌شود:

TextField در فلاتر

کار با تغییرهای فوکوس سفارشی

اگر بخواهیم فوکوس را بسته به تقاضا و نه به صورت autofocus تغییر دهیم، باید روشی برای اشاره به آن TextField که می‌خواهیم فوکوس بگیرد، پیدا کنیم. بدین منظور یک FocusNode به TextField الصاق می‌کنیم و از آن برای سویچ کردن فوکوس بهره می‌گیریم.

در کد فوق دو گره فوکوس ایجاد کرده و آن‌ها را به ویجت‌های TextField الصاق کرده‌ایم. زمانی که دکمه فشرده می‌شود، از FocusScope برای درخواست سوئیچ فوکوس به TextField بعدی استفاده می‌کنیم.

TextField در فلاتر

تغییر دادن مشخصه‌های کیبورد برای TextField

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

نوع کیبورد

TextField به ما امکان می‌دهد که نوع کیبوردی که در زمان فوکوس گرفتن کیبورد نمایش می‌یابد را تنظیم کنیم. بدین منظور باید مشخصه keyboardType را تغییر دهیم:

انواع قابل استفاده به صورت زیر هستند:

  • TextInputType.text: کیبورد کامل معمولی است.
  • TextInputType.number: کیبورد عددی است.
  • TextInputType.emailAddress: کیبورد معمولی با @ است.
  • TextInputType.datetime: کیبورد عددی با کاراکترهای / و . است.
  • TextInputType.numberWithOptions: کیبورد عددی با گزینه‌هایی برای وارد کردن اعداد علامت‌دار و اعشاری است.
  • TextInputType.multiline: کیبوردی با بهینه‌سازی برای اطلاعات چند زبانی است.

TextInputAction

تغییر دادن مشخصه TextInputAction در یک ویجت TextField به ما امکان می‌دهد که عمل دکمه کیبورد را تغییر دهیم. به مثال زیر توجه کنید:

این کار موجب می‌شود که دکمه Done با دکمه Continue عوض شود:

TextField در فلاتر

یا کد زیر:

تغییر زیر را موجب می‌شود:

TextField در فلاتر

فهرست کامل این موارد قابل تغییر، طولانی است، اما ارزش بررسی کردن را دارد.

Autocorrect

این مشخصه قابلیت Autocorrect را برای یک TextField خاص فعال یا غیر فعال می‌کند. از فیلد TextField برای تعیین این مشخصه استفاده کنید:

بدین ترتیب پیشنهادها نیز غیر فعال می‌شوند.

بزرگ‌نویسی حروف

TextField چند گزینه برای شیوه بزرگ‌نویسی حروف در زمان دریافت ورودی از سوی کاربر دارد.

انواع قابل استفاده برای این مشخصه به صورت زیر هستند:

TextCapitalization.sentences

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

TextField در فلاتر

TextCapitalization.characters

در این روش همه کاراکترها در جمله با حروف بزرگ نوشته می‌شوند.

TextField در فلاتر

TextCapitalization.words

در این روش حرف نخست هر کلمه بزرگ نوشته می‌شود.

TextField در فلاتر

استایل متن، جهت‌گیری و گزینه‌های کرسر

فلاتر امکان سفارشی‌سازی استایل‌بندی و جهت‌گیری متن درون ویجت TextField و همچنین کرسر را درون آن فراهم می‌سازد.

جهت‌گیری متن درون TextField

با استفاده از مشخصه textAlign می‌توانید مکان کرسر را درون TextField تنظیم کنید.

کد فوق موجب می‌شود که کرسر و متن از میانه TextField آغاز شوند.

TextField در فلاتر

مشخصه‌های جهت‌گیری معمول به صورت start, end, left, right, center, justify هستند.

استایل‌بندی متن درون TextField

با استفاده از مشخصه style می‌توان شیوه نمایش تن درون ویجت TextField را تغییر داد. از آن می‌توان برای تغییر دادن رنگ، اندازه فونت و مواردی از این دست استفاده کرد. این مشخصه مشابه stryle در ویجت Text است.

TextField در فلاتر

تغییر دادن شکل کرسر در TextField

کرسر را می‌توان مستقیماً درون ویجت TextField به صورت سفارشی درآورد. امکان تغییر رنگ کرسر، عرض و شعاع گوشه‌ها وجود دارد. برای نمونه در کد زیر یک کرسر دایره‌ای قرمز ایجاد می‌کنیم:

TextField در فلاتر

کنترل کردن اندازه و بیشینه طول TextField

ویجت‌های TextField تعداد بیشینه کاراکترهای درون خود را کنترل می‌کنند. همچنین امکان تعیین بیشینه طول خطوط و گسترش آن در زمان وارد کردن متن وجود دارد.

کنترل کردن بیشینه کاراکترها

TextField در فلاتر

با تعیین مشخصه maxLength طول بیشینه الزام می‌شود و یک شمارنده به صورت پیش‌فرض به TextField اضافه خواهد شد.

ساخت یک TextField بسط‌پذیر

برخی اوقات به یک TextField نیاز داریم که وقتی یک خط پایان می‌یابد گسترش یابد. فلاتر به این منظور یک روش کمی عجیب دارد. به این منظور باید مقدار maxLines را روی null تنظیم کنیم که به صورت پیش‌فرض مقدار آن 1 است. تعیین مقدار تهی یک رویه معمول محسوب نمی‌شود، اما در هر صورت کار آسانی است.

TextField در فلاتر

نکته: تعیین maxLines روی یک مقدار معین موجب می‌شود که تعداد خطوط به صورت پیش‌فرض به آن مقدار گسترش یابد.

TextField در فلاتر

پنهان‌سازی متن

برای پنهان‌سازی متن در یک TextField باید مشخصه obscureText روی مقدار true تنظیم شود:

TextField در فلاتر

تزیین متن در TextField

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

برای تزیین کردن یک ویجت TextField باید از مشخصه decoration استفاده کنیم که یک InputDecoration می‌گیرد. از آنجا که کلاس InputDecoration کلاس بزرگی است، صرفاً به بررسی اجمالی مشخصه‌های مهم آن می‌پردازیم.

استفاده از مشخصه‌های hint و label برای ارائه اطلاعات به کاربر

هر دو مشخصه hint و label رشته‌هایی هستند که به کاربر کمک می‌کنند تا اطلاعاتی که باید در فیلد متنی وارد کند را درک نماید. تفاوت این دو در آن است که hint زمانی که کاربر شروع به تایپ کردن بکند پنهان می‌شود، اما label روی TextField شناور می‌شود.

TextField در فلاتر
Hint
TextField در فلاتر
label

افزودن آیکون

امکان افزودن آیکون به TextField با استفاده از مشخصه‌های icon ،prefixIcon و prefixIcon وجود دارد. همچنین می‌توان از prefixText و suffixText برای افزودن متن استفاده کرد:

TextField در فلاتر
درج آیکون با استفاده از مشخصه icon

TextField در فلاتر
درج آیکون با استفاده از مشخصه prefixIcon

برای استفاده از یک ویجت ژنریک به جای آیکون باید از فیلد prefix بهره بگیرید. در مثال زیر یک نشانگر پیشروی دایره‌ای را به یک TextField اضافه می‌کنیم:

TextField در فلاتر

هر مشخصه دارای استایل‌های hint ،label و دیگر فیلدهای استایل خاص خود است. برای استایل‌بندی یک hint می‌توانیم از hintStyle استفاده کنیم. به طور مشابه در مورد label می‌توان از labelStyle استفاده کرد:

TextField در فلاتر

نکته: با این که در مثال فوق رنگ hint را تغییر داده‌ایم، اما این کار به طور کلی کار خوبی محسوب نمی‌شود چون اسباب سردرگمی کاربر خواهد شد.

helperText

اگر یک برچسب نمی‌خواهید، بلکه یک پیام دائمی برای کاربر می‌خواهید نشان دهید از helperText استفاده کنید:

TextField در فلاتر

decoration: null

از مشخصه decoration: null یا InputDecoration.collapsed برای حذف underline پیش‌فرض روی یک TextField استفاده کنید.

TextField در فلاتر

border‌

از border برای تعیین حاشیه برای TextField استفاده کنید:

سخن پایانی

علاوه بر مواردی که اشاره کردیم گزینه‌های دکوراسیون بسیار زیادی دیگری نیز وجود دارند که می‌توان روی یک TextField استفاده کرد. اما به جهت اجتناب از طولانی شدن مطلب، از بررسی تک‌تک آن‌ها خودداری می‌کنیم. امیدواریم این مقدار به شما کمک کرده باشد تا میزان ساده بودن سفارشی‌سازی TextFields در فلاتر را متوجه شوید.

اگر این مطلب برای شما مفید بوده است، ‌آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

==

میثم لطفی (+)

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

بر اساس رای 2 نفر

آیا این مطلب برای شما مفید بود؟

نظر شما چیست؟

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