فلاتر (Flutter) یک فریمورک توسعه نرمافزاری از شرکت گوگل است که برای ساخت اپلیکیشنهای موبایل، وب و دسکتاپ از یک کدبیس واحد استفاده میکند. یکی از نیازهای رایج در اپلیکیشنهای موبایل، امکان ورود کاربران با استفاده از نام کاربری و رمز عبور است. در این مقاله، به نحوه نمایش و مخفی کردن رمز عبور در فلاتر میپردازیم.
فلاتر با استفاده از زبان دارت (Dart) توسعه یافته و به برنامهنویسان این امکان را میدهد تا با یک بار کدنویسی، اپلیکیشنهایی برای سیستمعاملهای اندروید، iOS، وب و دسکتاپ تولید کنند. از ویژگیهای برجسته فلاتر میتوان به سرعت بالا در توسعه، رابط کاربری زیبا و قابل تنظیم، و جامعه پشتیبان قوی اشاره کرد.
برای شروع، نیاز داریم یک فرم ساده برای ورود کاربر ایجاد کنیم که شامل دو فیلد برای نام کاربری و رمز عبور باشد. در این مثال، ابتدا یک پروژه جدید در فلاتر ایجاد میکنیم و سپس کد مربوط به فرم ورود را اضافه میکنیم.
برای ایجاد پروژه جدید، دستورات زیر را در خط فرمان اجرا کنید:
در فایل lib/main.dart، کد زیر را اضافه کنید:
main.dartدر این فایل، ابتدا اپلیکیشن فلاتر را راهاندازی کرده و یک StatelessWidget به نام MyApp ایجاد میکنیم که درون آن از MaterialApp استفاده شده است. در home این اپلیکیشن، صفحه ورود LoginScreen قرار دارد.
LoginScreenاین ویجت یک StatefulWidget است که دارای حالت (State) قابل تغییر میباشد. در این حالت، یک متغیر به نام _isObscured تعریف شده که به صورت پیشفرض مقدار true دارد. این متغیر برای نشان دادن یا مخفی کردن متن رمز عبور استفاده میشود. همچنین، یک کنترلر برای فیلد رمز عبور ایجاد شده است.
در متد build، از Scaffold استفاده کردهایم تا ساختار کلی صفحه را تعیین کنیم. داخل body، از یک Padding با مقدار 16.0 استفاده شده تا فاصله مناسبی بین لبه صفحه و محتوا ایجاد شود. سپس از Column برای قرار دادن ویجتهای مختلف به صورت عمودی استفاده شده است.
برای فیلد نام کاربری از یک TextField ساده با InputDecoration استفاده شده است. فیلد رمز عبور کمی پیچیدهتر است. در این فیلد، از TextField با ویژگی obscureText استفاده شده که مقدار آن برابر _isObscured است. این ویژگی تعیین میکند که متن ورودی به صورت مخفی نمایش داده شود یا نه.
در بخش InputDecoration فیلد رمز عبور، یک suffixIcon به کار رفته که یک IconButton است. آیکون این دکمه بسته به مقدار _isObscured تغییر میکند (اگر _isObscured true باشد، آیکون چشم باز نمایش داده میشود و در غیر این صورت، آیکون چشم بسته). با کلیک روی این دکمه، مقدار _isObscured تغییر کرده و وضعیت نمایش یا مخفی بودن رمز عبور بهروز میشود.
برای بهبود تجربه کاربری، میتوانیم از قابلیتهای بیشتری در این فرم استفاده کنیم. به عنوان مثال:
Form و TextFormFieldبرای اعتبارسنجی ورودیها میتوانیم از Form و TextFormField استفاده کنیم:
در این مثال، از Form و TextFormField برای ایجاد فیلدهای فرم استفاده شده است. GlobalKey<FormState> به عنوان کلید فرم تعریف شده و برای بررسی صحت ورودیها به کار میرود. هر TextFormField دارای ویژگی validator است که برای اعتبارسنجی ورودیها استفاده میشود. در صورتی که ورودیها معتبر باشند، فرم ارسال میشود.
در این مقاله، به نحوه نمایش و مخفی کردن رمز عبور در فلاتر پرداختیم و یک فرم ورود کاربر ساده ایجاد کردیم. سپس با استفاده از قابلیتهای اضافی مانند Form و TextFormField، تجربه کاربری را بهبود دادیم. با استفاده از این روشها، میتوانید فرمهای ورود کاربر را در اپلیکیشنهای فلاتر خود به صورت حرفهایتر پیادهسازی کنید.
