فلاتر (Flutter) یکی از محبوبترین فریمورکهای توسعه اپلیکیشنهای موبایل است که توسط گوگل توسعه یافته است. این فریمورک به توسعهدهندگان امکان میدهد تا با استفاده از زبان دارت (Dart)، اپلیکیشنهای زیبا و کارآمدی برای اندروید و iOS ایجاد کنند. یکی از قابلیتهای کاربردی در توسعه فرمها، امکان نمایش و مخفی کردن پسورد در ویجت TextFormField است. در این مقاله، به بررسی نحوه پیادهسازی این ویژگی در فلاتر میپردازیم و به معرفی دوره فلاتر الماس که به آموزش این مفاهیم میپردازد، اشاره خواهیم کرد.
TextFormField یکی از ویجتهای پرکاربرد در فلاتر است که برای دریافت ورودیهای متنی از کاربر استفاده میشود. این ویجت به توسعهدهندگان امکانات متعددی را برای مدیریت و اعتبارسنجی ورودیهای متنی فراهم میکند. یکی از استفادههای معمول از TextFormField، دریافت پسورد از کاربر است که نیاز به قابلیت نمایش و مخفی کردن پسورد دارد.
برای پیادهسازی نمایش و مخفی کردن پسورد در ویجت TextFormField، نیاز به استفاده از یک آیکون و مدیریت وضعیت (State) داریم. در ادامه، نحوه انجام این کار را به صورت مرحله به مرحله توضیح خواهیم داد.
ابتدا یک StatefulWidget ایجاد میکنیم تا بتوانیم وضعیت نمایش و مخفی کردن پسورد را مدیریت کنیم.
در کد بالا، یک متغیر boolean به نام _obscureText تعریف کردهایم که حالت نمایش پسورد را مدیریت میکند. مقدار اولیه این متغیر true است تا پسورد به صورت مخفی نمایش داده شود. با استفاده از متد setState، وضعیت این متغیر را تغییر میدهیم و ویجت TextFormField را بازسازی میکنیم.
برای افزودن آیکون نمایش و مخفی کردن پسورد، از ویجت IconButton در قسمت suffixIcon از decoration ویجت TextFormField استفاده کردهایم. این آیکون بر اساس مقدار _obscureText تغییر میکند و با کلیک بر روی آن، مقدار _obscureText تغییر میکند و وضعیت نمایش پسورد بهروزرسانی میشود.
ویجت TextFormField در فلاتر برای دریافت ورودیهای متنی از کاربر استفاده میشود. این ویجت قابلیتهای متعددی مانند اعتبارسنجی، مدیریت فوکوس، و استایلدهی به ورودیهای متنی را فراهم میکند. یکی از ویژگیهای مهم این ویجت، امکان مخفی کردن ورودیها برای فیلدهای پسورد است که با استفاده از ویژگی obscureText قابل پیادهسازی است.
در فلاتر، برای مدیریت وضعیتهای محلی از StatefulWidget استفاده میشود. در این مثال، از StatefulWidget برای مدیریت وضعیت نمایش و مخفی کردن پسورد استفاده کردیم. با هر بار تغییر وضعیت _obscureText، ویجت بازسازی میشود و وضعیت جدید نمایش داده میشود.
ویجت IconButton یکی از ویجتهای پرکاربرد در فلاتر است که برای ایجاد دکمههای دارای آیکون استفاده میشود. در این مثال، از IconButton برای ایجاد آیکونی استفاده کردیم که با کلیک بر روی آن، وضعیت نمایش پسورد تغییر میکند.
دوره فلاتر الماس یکی از جامعترین دورههای آموزشی برای یادگیری فلاتر و دارت است. این دوره به صورت جامع به مفاهیم مختلف فلاتر از جمله ویجتها، مدیریت وضعیت، استایلدهی و بسیاری مفاهیم دیگر میپردازد. یکی از مباحث مهم این دوره، آموزش کار با ویجت TextFormField و پیادهسازی قابلیتهای مختلف آن از جمله نمایش و مخفی کردن پسورد است.
برخی از مباحثی که در دوره فلاتر الماس پوشش داده میشوند عبارتند از:
