راهنمای پیشرفته TextField در فلاتر ‌— بخش سوم

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

• آموزش ListView و ScrollPhysics در فلاتر (Flutter) — بخش دوم

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

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

فیلم آموزش پروژه محور فلاتر – طراحی اپلیکیشن موبایل با Flutter – مقدماتی در فرادرس

کلیک کنید

کد یک TextField ساده به سادگی زیر است:

1TextField()

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

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

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

1String value = "";
2TextField(
3  onChanged: (text) {
4    value = text;
5  },
6)

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

1TextEditingController controller = TextEditingController();
2TextField(
3  controller: controller,
4)

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

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

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

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

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

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

1. onEditingCompleted
2. onSubmitted

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

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

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

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

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

کار با autofocus

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

1TextField(
2  autofocus: true,
3),

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

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

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

1// Initialise outside the build method
2FocusNode nodeOne = FocusNode();
3FocusNode nodeTwo = FocusNode();
4// Do this inside the build method
5TextField(
6  focusNode: nodeOne,
7),
8TextField(
9  focusNode: nodeTwo,
10),
11RaisedButton(
12  onPressed: () {
13    FocusScope.of(context).requestFocus(nodeTwo);
14  },
15  child: Text("Next Field"),
16),

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

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

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

نوع کیبورد

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

1TextField(
2  keyboardType: TextInputType.number,
3),

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

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

TextInputAction

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

1TextField(
2  textInputAction: TextInputAction.continueAction,
3),

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

یا کد زیر:

1TextField(
2  textInputAction: TextInputAction.send,
3),

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

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

Autocorrect

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

1TextField(
2  autocorrect: false,
3),

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

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

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

1TextField(
2  textCapitalization: TextCapitalization.sentences,
3),

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

TextCapitalization.sentences

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

TextCapitalization.characters

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

TextCapitalization.words

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

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

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

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

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

1TextField(
2  textAlign: TextAlign.center,
3),

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

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

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

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

1TextField(
2  style: TextStyle(color: Colors.red, fontWeight: FontWeight.w300),
3),

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

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

1TextField(
2  cursorColor: Colors.red,
3  cursorRadius: Radius.circular(16.0),
4  cursorWidth: 16.0,
5),

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

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

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

1TextField(
2  maxLength: 4,
3),

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

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

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

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

1TextField(
2  maxLines: 3,
3)

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

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

1TextField(
2  obscureText: true,
3),

تزیین متن در TextField

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

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

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

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

افزودن آیکون

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

1TextField(
2  decoration: InputDecoration(
3    icon: Icon(Icons.print)
4  ),
5),

1TextField(
2  decoration: InputDecoration(
3    prefixIcon: Icon(Icons.print)
4  ),
5),

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

1TextField(
2  decoration: InputDecoration(
3    prefix: CircularProgressIndicator(),
4  ),
5),

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

1TextField(
2  decoration: InputDecoration(
3    hintText: "Demo Text",
4    hintStyle: TextStyle(fontWeight: FontWeight.w300, color: Colors.red)
5  ),
6),

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

helperText

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

1TextField(
2  decoration: InputDecoration(
3    helperText: "Hello"
4  ),
5),

decoration: null

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

1TextField(
2  decoration: InputDecoration.collapsed(hintText: "")
3),

border‌

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

1TextField(
2  decoration: InputDecoration(
3    border: OutlineInputBorder()
4  )
5),

سخن پایانی

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

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

• مجموعه آموزش‌های برنامه‌نویسی اندروید
• مجموعه آموزش‌های برنامه‌‌نویسی
• آموزش فریم ورک Google Flutter برای طراحی اپلیکیشن های موبایل
• آشنایی با لیست‌ و گرید در فلاتر — راهنمای مقدماتی
• گوگل فلاتر (Flutter) از صفر تا صد — ساخت اپلیکیشن به کمک ویجت

==